/*
	Work page scroller
*/

//start the jQuery dom ready functions
$(document).ready(function() {
	
	$("body").addClass("js");							// js is available! this hides/shows controls via CSS
	
	//setMaxHeight($(".slide"));						// set max height on contain based on content size
	showDefault();										// determine first item
	$("#next,#prev").bind("click",changeItem);			// binding for next/previous item
	$("#work-list a").bind("click",showItem);			// show project from work thumbnails
	$(".screens-thumbs a").bind("click",showScreen);	// scroll to screen from thumbnails
	
}); // end jQuery dom ready

// get max height of set of $elements
var setMaxHeight = function($els) {
	var key = $.browser.msie && (parseInt($.browser.version) < 7) ? "height" : "minHeight";		
	var h = 0;
	$els.each(function(){
		h = h < parseInt($(this).height()) ? parseInt($(this).height()) : h;						   
	});		
	$("#slideshow").css(key,h+20+"px");		
};

var showDefault = function() {
	
	// check if hash exists. get hash for first item
	var hash = window.location.hash.substr(1) || "";
	var urla = jQuery.grep($("#work-list li:first a").attr("href").split("/"), function(n, i){ return (n != ""); });
	var first = urla.pop();	
	
	// if hash is not empty and does not equal the first item, get the requested item
	if(hash!=""&&hash!=first) { 
		$("#showcase").hide();
		var show = window.location.hash.substr(1);
		$.ajax({
			cache: true,
			type: "GET",
			dataType: "html",
			url: "/work/"+show,
			success: function(data){
				var $slide = $(data).find(".slide");
				$("#showcase").html($slide).fadeIn("fast");
				$(".screens").css({ backgroundPosition: '0 0' });
				$("#work-list li").removeClass("on");
				$("#work-list a[href='/work/"+show+"']").parent().addClass("on");
				$(".screens-thumbs a").bind("click",showScreen);
				addData(hash,$slide);
			},
			error:  function(){
				$("#showcase").fadeIn("fast");	
				$("#work-list li:first").addClass("on");	
			}
		});	
	} else {
		// highlight the first
		$("#work-list li:first").addClass("on");
		addData(first,$(".slide"));
	}
	// for background animation to work proper
	$(".screens").css({ backgroundPosition: '0 0' });
};

var changeItem = function() {
	changeProject($(this));
	return false;		
};

var changeProject = function($clicked) {
	var $li = $("#work-list li.on");
	var $next;
	$("#showcase").fadeOut("fast");
	
	if($clicked.is("#next")) {
		$next = $("#work-list li.on").next()[0] ? $("#work-list li.on").next() : $("#work-list li:first");
	} else {
		$next = $("#work-list li.on").prev()[0] ? $("#work-list li.on").prev() : $("#work-list li:last");
	}
	
	var url = $("a",$next).attr("href");
	var urla = jQuery.grep(url.split("/"), function(n, i){ return (n != ""); });
	var store = urla.pop();
	
	if($("html").data(store)) {
		initProject($("html").data(store));
	} else {
	
		$.ajax({
			cache: true,
			type: "GET",
			dataType: "html",
			url: url,
			success: function(data){
				var $slide = $(data).find(".slide");
				initProject($slide);
				addData(store,$slide);
			},
			error:  function(){
				$("#showcase").fadeIn("fast");	
				$("#work-list li:first").addClass("on");	
			}
		});
	}
	
	function initProject($data) {
	
		$("#work-list li").removeClass("on");
		$("#showcase").hide().html($data).fadeIn("fast");
		$(".screens").css({ backgroundPosition: '0 0' });
		$("#work-list li").removeClass("on");			
		$next.addClass("on");
		$(".screens-thumbs a").bind("click",showScreen);

		$(".screens").css({ backgroundPosition: '0 0' });
		$(".screens-thumbs li").removeClass("on").eq(0).addClass("on");
		addHash(url);
	}	
	
}

var showItem = function() {
	
	if ($(this).parent().hasClass("on")) { return false; }
	
	$("#work-list li").removeClass("on");
	$(this).parent().addClass("on");
	$("#showcase").fadeOut("fast");
	
	var url = $(this).attr("href");
	var url = $(this).attr("href");
	var urla = jQuery.grep(url.split("/"), function(n, i){ return (n != ""); });
	var store = urla.pop();
	
	if($("html").data(store)) {
		initProject($("html").data(store));		
	} else {	
		$.ajax({
			cache: true,
			type: "GET",
			dataType: "html",
			url: url,
			success: function(data){
				var $slide = $(data).find(".slide");
				initProject($slide);
				addData(store,$slide);			
			}
		});
	}
	
	function initProject($data) {
		$("#showcase").hide().html($data).fadeIn("fast");
		$(".screens").css({ backgroundPosition: '0 0' });
		$(".screens-thumbs a").bind("click",showScreen).parent("li").removeClass("on").eq(0).addClass("on");
		addHash(url);	
	}
	return false;
};

var showScreen = function() {
	var $li = $(this).parent();	
	if($(this).is(".on")) { return false; }				  
	$(".slide:visible li").removeClass("on");
	$li.addClass("on");	
	var bgshift = $(".slide:visible li").index($li) * -547;	
	$(".screens").animate({ backgroundPosition: '('+bgshift+'px 0)' });	
	return false;	
};

var addHash = function(url) {
	var urla 	= jQuery.grep(url.split("/"), function(n, i){ return (n != ""); });
	var project = urla.pop();		
	window.location.hash = project;	
};

var addData = function(store,data) {
	$("html").data(store,data);
};

/**
 * @author Alexander Farkas
 * v. 1.02
 */
(function($) {
	$.extend($.fx.step,{
	    backgroundPosition: function(fx) {
            if (fx.state === 0 && typeof fx.end == 'string') {
                var start = $.curCSS(fx.elem,'backgroundPosition');
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
			}
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];           
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
            
           function toArray(strg){
               strg = strg.replace(/left|top/g,'0px');
               strg = strg.replace(/right|bottom/g,'100%');
               strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
               var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
               return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
           }
        }
	});
})(jQuery);
