var dropableStatus = false; // Current status
var expireTrigger = null;
var timeout = 200;

function hideDropable(){ 
	if (dropableStatus == true){ 
		expireTrigger = window.setTimeout(expireDropable, timeout);
	}
}

function expireDropable(){ 
	$('dropable').hide();
	$('drop_show').show();
	dropableStatus = false;
}

function spawnDropable(){
	if(expireTrigger){  
		window.clearTimeout(expireTrigger);
		expireTrigger = null;
	}
}

function showDropable(){ 
	if (dropableStatus == false){ 
		Effect.BlindDown('dropable');
		$('drop_show').hide();
		dropableStatus = true; 
	}
}

document.observe("dom:loaded", function() {

	//------------------------------------------------------------------------
	// ModelSelector mouseover
	//------------------------------------------------------------------------

	$$("#modelSelector ul li a").each(function(item) {
		item.observe('mouseover', function() {
			var link = this.down('img');
			link.writeAttribute('src', "/MusaWeb/mexico2/img/tools/mazda3/navigation/nav_" + link.readAttribute('id') + "_red.gif");
    	});
		item.observe('mouseout', function() {
			var link = this.down('img');
			link.writeAttribute('src', "/MusaWeb/mexico2/img/tools/mazda3/navigation/nav_" + link.readAttribute('id') + ".gif");
    	});
	});
	
  	//------------------------------------------------------------------------
	// Dropdown
	//------------------------------------------------------------------------
	
	$('clickable').observe('mouseover', showDropable);
	
	$$('#dropable li').each(function(item) {
    	item.observe('mouseover', function() {
        	spawnDropable();
			var link = this.down('img.hlable');
			if(link){
				link.writeAttribute('src', "/MusaWeb/mexico2/img/tools/mazda3/navigation/" + link.readAttribute('id') + "_on.jpg");
			}
    	});
    	item.observe('mouseout', function() {
        	hideDropable();
			var link = this.down('img.hlable');
			if(link){
				link.writeAttribute('src', "/MusaWeb/mexico2/img/tools/mazda3/navigation/" + link.readAttribute('id') + ".jpg");
			}
		});
	});
	
	//------------------------------------------------------------------------
	// Nav rollover
	//------------------------------------------------------------------------

	var animateFor = 200; // Duration
	beingShown = new Array(); //Status tracking variables
	beingWithdrawn = new Array();
	displayed = new Array();
	
	$$('#nav li a.navButton').each(function(item) {
		// MouseOver
		item.observe('mouseover', function() {
			var nav = this.down('img');
			var navName = nav.readAttribute('name');
			var width = nav.readAttribute('width');
			var height = nav.readAttribute('height');
			
			// being shown, don't trigger again
			if ((beingShown[navName] == true) || (displayed[navName] == true)){ // Already on, or being animated to ON...	
				return; // ...so we ignore
			}else{ // OFF and NOT being animated to ON...
				beingShown[navName] = true; // Marks as being animated to ON
			}
			
			// close any other navs that might have stayed open
			$$('.displayed').each(function(opened) {
				
				var navDisplayed = opened.readAttribute('name');
				var Dwidth = opened.readAttribute('width');
				var Dheight = opened.readAttribute('height');
				
				if ((beingWithdrawn[navDisplayed] == false) || (typeof beingWithdrawn[navDisplayed] == 'undefined')){ // Prevents double taps 
					beingWithdrawn[navDisplayed] = true;
					//console.log("Case1: "+navDisplayed);
					new Effect.BlindUp(opened, { scaleX : false , scaleY : true, duration : '0.2', afterFinish: function() {
						opened.remove();
						beingWithdrawn[navDisplayed] = false;
						displayed[navDisplayed] = false;
				   } });
					new Insertion.After(opened, "<img src='/MusaWeb/mexico2/img/tools/mazda3/navigation/nav_" + navDisplayed + ".gif' width='" + Dwidth + "' height='" + Dheight + "' name='" + navDisplayed + "' />");
					
				}
				
			});
			//console.log("Case2: "+navName);
			new Effect.BlindUp(nav, { scaleX : false , scaleY : true, duration : '0.2', afterFinish: function() {
			   	nav.remove();
				beingShown[navName] = false;
				displayed[navName] = true;
			   }});
			new Insertion.After(nav, "<img src='/MusaWeb/mexico2/img/tools/mazda3/navigation/nav_" + navName + "_blue.gif' width='" + width + "' height='" + height + "' class='displayed' name='" + navName + "' />");
			
			
		});
		// MouseOut
		item.observe('mouseout', function() {

			var nav = this.down('img');
			var navName = nav.readAttribute('name');
			var width = nav.readAttribute('width');
			var height = nav.readAttribute('height');
			
			if ((beingShown[navName] == true) || ((beingWithdrawn[navName] == true) && (displayed[navName] == true))){
				return;
			}else{
				if ((beingShown[navName] == false) && (beingWithdrawn[navName] == false) && (displayed[navName] == false)){
					return;
				}
				beingWithdrawn[navName] = true;
			}
			//console.log("Case3: "+navName);
			new Effect.BlindUp(nav, { scaleX : false , scaleY : true, duration : '0.2',  afterFinish: function() {
						nav.remove();
						beingWithdrawn[navName] = false;
						displayed[navName] = false;
				} });
			new Insertion.After(nav, "<img src='/MusaWeb/mexico2/img/tools/mazda3/navigation/nav_" + navName + ".gif' width='" + width + "' height='" + height + "' name='" + navName + "' />");
			
	
		});
	});	 
});