/*
 * Custom Site Menu Navigation
 * Chris Peery
 */
var Controls = Class.create();

Controls.prototype = {
	initialize : function(element) {
		this.element = $(element);
		this.overlay = $('overlay');
		this.rotationActive = true;

		// SET UP CLOSE CONTROLS
		this.close = document.getElementsByClassName('close-overlay');
		this.close.each(this.setupCloseControls.bind(this));
		
		// SETUP NAVIGATION CONTROLS
		this.controls = $A(this.element.getElementsByTagName('area'));
		this.controls.each(this.setupControls.bind(this));

		// ROTATORS
		this.rotation = $('rotator');
		this.rotation.defaultHTML = this.rotation.innerHTML;

		// GRAB A REFERENCE TO THE ICONS ON THE PAGE
		this.icons = document.getElementsByClassName('icon');

		// PRELOAD SECTION BACKGROUNDS
		this.images = new Array();
		this.controls.each(this.preloadImage.bind(this));

		// THIS WILL PERIODICALLY CHECK TO CLOSE OPENED SUBMENUS
		new PeriodicalExecuter(function(pe) {
			this.loadFlickrContent();
		}.bind(this), 1);
	},
	setupControls : function(elm) {
		Event.observe(elm,'mouseover',this.activateIcon.bindAsEventListener(this),false);
		Event.observe(elm,'mouseout',this.deactivateIcon.bindAsEventListener(this),false);
		Event.observe(elm,'click',this.activate.bindAsEventListener(this),false);
	},
	setupCloseControls : function(elm) {
		Event.observe(elm,'click',this.deactivate.bindAsEventListener(this),false);
	},
	activate :  function(ev) {
		var elm = Event.element(ev); //MAP ELEMENT
		this.loadSectionBackground(elm);
		this.getContent(elm);
		this.show(this.overlay);
		this.loadFlickrContent();
		elm.blur();
		Event.stop(ev);
	},
	deactivate : function(ev) {
		var elm = Event.element(ev);
		this.loadDefaultSectionBackground();
		this.hide(this.overlay);
		elm.blur();
		Event.stop(ev);
	},
	activateIcon : function(ev) {
		var active = Event.element(ev); // IMAGE ELEMENT

		this.icons.each(function(elm) {
			var id = elm.id.match(/icon-(\w.+)/)[1];
			elm.src = (id == active.id) 
				? '/media/shared/icn_' + id + '_alt.gif'
				: '/media/shared/icn_' + id + '.gif';
		});
	},
	deactivateIcon : function(ev) {
        this.icons.each(function(elm) {
            var id = elm.id.match(/icon-(\w.+)/)[1];
            elm.src = '/media/shared/icn_' + id + '.gif';
        });	
	},
	getContent : function(elm) {
		this.updateRequest = new Ajax.Updater('overlay', '/content/' + elm.id + '.php');
	},
	loadSectionBackground : function(elm) {
		window.pause = true;
		this.rotationActive = false;
		this.rotation.innerHTML = '<img id="splash" src="/media/shared/splash_' + elm.id + '.jpg" width="700" height="408" alt="" style="display:block;" />';
	},
	loadDefaultSectionBackground : function() {
		if (this.rotationActive) return false;
		this.rotationActive = true;
		this.rotation.innerHTML = this.rotation.defaultHTML;
		window.so_init(); // START IMAGE ROTATION BACK UP
	},
	loadFlickrContent : function() {
		if (!$('flickr_update')) return; // NOT DEFINED RETURN

		if ($('flickr_update').empty()) { // MAKE SURE ELEMENT IS EMPTY
			$('flickr_update').update($('flickr').innerHTML);
		}
	},
	preloadImage : function(elm) {
		this.images[elm.id] = new Image();
		this.images[elm.id].src = '/media/shared/splash_' + elm.id + '.jpg';
	},
	hide : function(elm) {
		new Effect.Fade(elm, { duration: 3.0, from: 0.85, to: 0.0 });
	},
	show : function(elm) {
		new Effect.Appear(elm, { duration: 3.0, from: 0.0, to: 0.85 });
	}
}

Event.observe(window,'load',function(){ new Controls('navigation'); },false);