/*#################################################

Image Rollover | v1.2 
Max Felker | max@bigroomstudios.com

Creates an image rollover in a specified container with event observation

#################################################*/

var Rollover = Class.create({

	initialize: function(config) {
	
		this.container = $(config.container);
		this.img_off = Builder.node('img', { id: config.container+"-off", src: config.img_off, border:0, style: "display:none" });
		this.img_on = Builder.node('img', { id: config.container+"-on", src: config.img_on, border:0, style: "display:none" });
		this.img_selected = Builder.node('img', { id: config.container+"-selected", src: config.img_selected, border:0, style: "display:none" });
		this.id = config.id;
		this.level = config.level;
		this.num_loaded = 0;

		this.container.appendChild(this.img_off);
		this.container.appendChild(this.img_on);
		this.container.appendChild(this.img_selected);
	
		this.load_images();
		
		this.img_off = $(config.container+"-off");
		this.img_on = $(config.container+"-on");
		this.img_selected = $(config.container+"-selected");

		this.parent = config.parent_id;
		
		if(config.is_selected) {
			this.img_selected.show();
			this.selected = true;
			if(this.level == 1) {
				//live.primary_nav_selected = this.container;
				var id = this.id;
				document.observe("dom:loaded", function() {
					live.secondary_nav_selected = $("secondary_nav_" + id);
				});
			}
			else if(this.level == 2) {
				//live.secondary_nav_selected = $("secondary_nav_" + this.id);
				var id = this.id;
				document.observe("dom:loaded", function() {
					live.slide_nav_selected = $("slide_nav_" + id);
				});
			}
			//else if(this.level == 3) {
				//live.slide_nav_selected = this.container;
			//}
		}
		else {
			this.img_off.show();
			this.selected = false;
		}
		
		this.container.observe('mouseenter',this.img_hover.bind(this));
		this.container.observe('mouseleave',this.img_idle.bind(this));
		this.container.observe('click',this.img_select.bind(this));

		live.rollovers.set(this.container.id,this);
		live.pause_secondary_nav = false;
	},
	
	load_images: function() {
		var nav = this;
		this.img_off.observe('load', function() {nav.img_loaded(nav);});
		this.img_on.observe('load', function() {nav.img_loaded(nav);});
		this.img_selected.observe('load', function() {nav.img_loaded(nav);});
	},
	
	img_loaded: function(nav) {
		nav.num_loaded++;
	},
	
	img_hover: function() {
		if(this.selected)
			return;
			
		this.img_off.hide();
		this.img_selected.hide();
			
		this.img_on.show();
		
		if(Prototype.Browser.MobileSafari) {
			if(this.container.tagName == "A") {
				window.location = this.container.href;
			}
			else {
				this.img_select();
			}
		}
	},
		
	img_idle: function() {
		if(this.selected)
			return;
		
		this.img_on.hide();
		this.img_selected.hide();
			
		this.img_off.show();
	},
	
	img_select: function() {
		if(this.selected || this.container.tagName == "A" || (this.level == 2 && live.pause_secondary_nav))
			return;
		
		//hide the sibling nav
		var parent_id = this.parent;
		live.rollovers.each(function(rollover) {
			if(rollover.value.selected) {
				if(rollover.value.parent == parent_id) {
					rollover.value.selected = false;
					rollover.value.img_idle();
				}
			}
		});
		
		if(this.level == 1) {
			//hide the current secondary nav if it exists
			if(live.secondary_nav_selected) {
				live.secondary_nav_selected.hide();
				live.secondary_nav_selected = null;
			}
			else if(live.secondary_nav_selected = $("secondary_nav_" + this.id)) {
				live.secondary_nav_selected.hide();
				live.secondary_nav_selected = null;
			}
			
			//show the new secondary nav if it exists
			var sub_nav = $("secondary_nav_" + this.id);
			if(sub_nav) {
				live.secondary_nav_selected = sub_nav;
				sub_nav.show();
			}
		}
		else if(this.level == 2) {
			var old_slide = null;
			
			//hide the current slide nav if it exists
			if(live.slide_nav_selected) {
				//live.slide_nav_selected.hide();
				//live.slide_nav_selected.morph('width:0px;');
				old_slide = live.slide_nav_selected;
				live.slide_nav_selected = null;
			}
			
			//show the new slide nav if it exists
			var slide_nav = $("slide_nav_" + this.id);
			if(slide_nav) {
				live.slide_nav_selected = slide_nav;
				//slide_nav.show();
				var width = 0;
				slide_nav.childElements().each(function(child) {
					width += child.getWidth() + 15;
				});
				var old_width;
				if(old_slide)
					old_width = old_slide.getWidth();
				else
					old_width = 0;
					
				var diff = Math.floor((width-old_width)/2);
				var parent_margin = slide_nav.parentNode.getStyle('right');
				if(parent_margin) 
					parent_margin = parseInt(parent_margin.gsub('px',''));
				parent_margin -= diff;

				slide_nav.parentNode.morph('right:'+parent_margin+'px');
				if(old_slide)
					old_slide.morph('width:0px;');
				slide_nav.morph('javascript error', {style: 'width:'+width+'px;', duration: 1.0});
				
				//pause the slide out animation
				live.pause_secondary_nav = true;
				this.executer = new PeriodicalExecuter(function() {
					live.pause_secondary_nav = false;
					this.stop();
				}, 1.0);
			}
		}
		
		this.selected = true;
		this.img_on.hide();
		this.img_off.hide();
		this.img_selected.show();
	},

	stop_rollover: function() {
		
		Event.stopObserving(this.container);

	}

});