var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/js_enabled.css';
link.media = 'screen';
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);

var IE = document.all ? true : false;

$.fn.delay = function(time, callback){
	// Empty function:
	jQuery.fx.step.delay = function(){};
	// Return meaningless animation, (will be added to queue)
	return this.animate({delay:1}, time, callback);
}

var timeout;

function onMouseMove()
{
	if(!IE)
	{
		$(".work.active .prev-button").fadeIn();
		$(".work.active .next-button").fadeIn();
		$(".work.active .sub.active .img-description").fadeIn();
	}
	else
	{
		$(".work.active .prev-button").show();
		$(".work.active .next-button").show();
		$(".work.active .sub.active .img-description").show();
	}
	clearTimeout(timeout);
	createTimeout();
}

function createTimeout()
{
	timeout = setTimeout(function () {
		if(!IE)
		{
			$(".work.active .prev-button").fadeOut();
			$(".work.active .next-button").fadeOut();
			$(".work.active .sub.active .img-description").fadeOut();
		}
		else
		{
			$(".work.active .prev-button").hide();
			$(".work.active .next-button").hide();
			$(".work.active .sub.active .img-description").hide();
		}
	}, 7000);
}

$(document).ready(function () {
	
	$('.thumbnail_link').lightBox();
	
	$('.work').each(function () {
		var work = $(this);
		var timeout2;
		var subContainer = work.find(".subs");
		
		subContainer.append('<div class="progress"><div class="bar"></div></div><div class="prev-button"></div><div class="next-button"></div>');
		
		var subList = work.find(".sub");
		var progressbar = work.find(".progress");
		
		var stepIndex = 0;
		var prevButton = work.find(".prev-button");
		var nextButton = work.find(".next-button");
		
		var active = false;
		
		//this is to overwrite display 'block' in the stylesheet, because we want display:inline
		work.find(".img-description").css({display : "none"});
		
		function updateProgress(animate) {	
			if(animate)
				progressbar.find(".bar").animate({width : ((stepIndex / (subList.length-1)) * 100) + "%"}, {duration : 1000, easing : "easeOutExpo"});
			else
				progressbar.find(".bar").css({width : ((stepIndex / (subList.length-1)) * 100) + "%"});
		}
		
		work.find(".next-button").click(function () 
		{
			clearTimeout();
		
			$( subList.get(stepIndex) ).removeClass("active").fadeOut();
			$( subList.get(stepIndex) ).find(".img-description").hide();
			
			stepIndex = (stepIndex+1) % (subList.length);

			$( subList.get(stepIndex) ).addClass("active").fadeIn();
			
			if(!IE)
			{
				$( subList.get(stepIndex) ).find(".img-description").delay(300).fadeIn("slow");
			}
			else
			{
				$( subList.get(stepIndex) ).find(".img-description").show();
			}
			
			updateProgress( true );
		});
		
		work.find(".prev-button").click(function () 
		{
			clearTimeout();
		
			$( subList.get(stepIndex) ).removeClass("active").fadeOut();
			$( subList.get(stepIndex) ).find(".img-description").hide();
			
			stepIndex = stepIndex-1;
			if(stepIndex == -1)
				stepIndex = subList.length-1;
			
			$( subList.get(stepIndex) ).addClass("active").fadeIn();
			
			if(!IE)
			{
				$( subList.get(stepIndex) ).find(".img-description").delay(300).fadeIn("slow");
			}
			else
			{
				$( subList.get(stepIndex) ).find(".img-description").show();
			}
			
			updateProgress( true );
		});
		
		work.hover(
		function (e)
		{
			clearTimeout(timeout2);
		
			//fade the sub container in
			subContainer.fadeIn();
			
			if(!IE)
			{
				prevButton.delay(400).fadeIn();
				nextButton.delay(400).fadeIn("def", function ()
				{
					work.bind("mousemove", onMouseMove);
					createTimeout();
				});
			}
			else
			{
				prevButton.show();
				nextButton.show();
				
				work.bind("mousemove", onMouseMove);
				createTimeout();
			}
		
			if(active)
				return;
			
			work.addClass("active");
			
			stepIndex = 0;
			
			active = true;
			
			updateProgress(false);
			
			//hide the previous active sub and show the intro
			subContainer.find(".sub.active").removeClass("active").hide();
			subContainer.find(".sub-intro").addClass("active").show();
			
			
			
		},
		function (e)
		{
			
			timeout2 = setTimeout(function () {
				
				subContainer.fadeOut("slow", function ()
				{
					subContainer.find(".sub.active .img-description").hide();
					active = false;
				});
				
				if(!IE)
				{
					prevButton.fadeOut();
					nextButton.fadeOut();
				}
				else
				{
					prevButton.hide();
					nextButton.hide();
				}
				
			}, 3000);
			
			work.removeClass("active");
			
			clearTimeout(timeout);
			work.unbind("mousemove", onMouseMove);
		});
		
		
		
	});
	
});