var pause = false;


$(document).ready(function() {
	
	/* #######################################
	 #				Init
	 #######################################*/
	
	//Initialize the image/sidebar shifter
	prepareShifter();
	//Initialize the dropdown menu
	prepareDDMenu();

});
function prepareDDMenu() {
	$('#menu>ul>li').css('position', 'relative').each(function() {
		$(this).hover(
			function() {
				showSubMenu(this);
			},
			function() {
				hideSubMenu(this);
			}
		);
	});
	$('.submenu').css('position', 'absolute').hide();
}
function showSubMenu(elt) {
	$(elt).children('.submenu').fadeIn('fast');
}
function hideSubMenu(elt) {
	$(elt).children('.submenu').fadeOut('fast');
}

/* #########################################
# 
# INITialization for the image/text shifter
# Will start loop that shifts until a click on the menu is detected,
# Then freeze.
# NOTE: Expects a 1:1 index correspondance of li>img in #hoverimages, 
# li's in #hoverlist and divs in #sidebar.
#
######################################### */
	function prepareShifter() {
		if($('#middle').length == 0) return;
		
		pause = false;
		$('#hoverlist li').each(function(index) {
			//alert('Attaching event to ' + index + ': ' + $(this).text());
			$(this).click(function(e, p) {
				// If click comes from mouse event, p is undefined
				if(p == undefined || p == true) {
					pause = true;
				} else {
					pause = false;
				}
				
				$('.active').each(function() {
					$(this).removeClass('active');
				});
				$(this).addClass('active');
				
				// Innerfade to the clicked item.
				var previndex = $('.hoverimage').index($('.hoverimage.focus'));
				if(index == previndex) return;
				//alert('Transition from '+previndex+' to '+index);
				// The new image
				var image = $(".hoverimage").eq(index);
				var previmg = $(".hoverimage").eq(previndex);
				var descript = $("#sidebar >div").eq(index);
				var prevdescript = $("#sidebar >div.focus");
				
				if(image.length > 0) {
					fadeInOut(image, previmg);
					fadeInOut(descript, prevdescript);
				} else {
					alert('index does not exist, check img/descriptor to menu count');
				}
			});
		});
		// lock the canvas
		$('#hoverimages').css('position', 'relative');
		$('#sidebar').css('position', 'relative');
		
		// set z-indexes
		var elements = $('.hoverimage, #sidebar > div');
		for (var i = 0; i < elements.length; i++) {
			$(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
		};
		$($('#hoverlist li')[0]).addClass('active');
		$(elements[0]).addClass('focus').show();		
		$($('#sidebar > div')[0]).addClass('focus').show();
		
		setTimeout ("showNext()", 5000 );
	}
// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
	if(element.style.removeAttribute){
		element.style.removeAttribute('filter');
	}
}
function showNext() {
	var i = $('.hoverimage').index($('.hoverimage.focus'));
	i = (i + 1) % $('.hoverimage').length;
	if(!pause) {
		$($('#hoverlist li')[i]).trigger('click', [pause]);
		setTimeout ("showNext()", 5000 );
	}
}

// FadeIn the first element, and fadeout the 2nd.
function fadeInOut(elt1, elt2) {
				elt1.addClass('focus');
				elt2.removeClass('focus');
				
				elt2.fadeOut('slow');
				elt1.fadeIn('normal', function() {
					removeFilter($(this)[0]);
				});
}