var totalPages;
jQuery.fn.exists = function(){return jQuery(this).length>0;}

$(window).load(function(){
	//set height of carousel
	$("#carousel").css("height",  $("ul#slides li").height());
	
	//set height of mulitpage element
	if ($("#studies").exists()){
		$("#studies").css("height", (Math.max($("#studies div:first-child div").children("img").height(), 300) + 50));
	}
})

$(document).ready(function() {
	
	// *************** CAROUSEL
	totalPages = $(".grid").length;
	updateCounter();
	totalScreenPages = $(".screenset").length;
	updateScreenshotCounter()
	$("div#carousel ul#slides").cycle({ 
		fx: 		'fade',
		speed:  	'500', 
    	timeout: 	0,
		prev: 		'#prev',
		next: 		'#next',
		autostop: 	1,
		cleartype:	false,
		before:		onBefore
	});
	$("div#grids").cycle({ 
		fx: 		'scrollHorz',
		speed:  	'500', 
    	timeout: 	0,
		prev: 		'#prev-grid',
		next: 		'#next-grid',
		autostop: 	1,
		cleartype:	false,
		onPrevNextEvent: updateCounter
	});
	$("div#studies").cycle({ 
		fx: 		'scrollHorz',
		speed:  	'500', 
    	timeout: 	0,
		prev: 		'#cs-prev-screenshots',
		next: 		'#cs-next-screenshots',
		autostop: 	1,
		cleartype:	false,
		after:		onAfter,
		onPrevNextEvent: updateScreenshotCounter
	});
	
	//grayscale hover effect
	$(".sample:not(.current)").hover(function() { //On hover...
		var thumbOver = $(this).find("img").attr("src");

		//Set a background image(thumbOver) on the <a> tag - Set position to bottom
		$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

		//Animate the image to 0 opacity (fade it out)
		$(this).find("span").stop().fadeTo('normal', 0 , function() {
			$(this).hide() //Hide the image after fade
		});
	} , function() { //on hover out...
		//Fade the image to full opacity 
		$(this).find("span").stop().fadeTo('normal', 1).show();
	});
	// find current thumbnail and make it full color
	var thumbOver = $(".sample.current").find("img").attr("src");
	$(".sample.current").find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
	$(".sample.current").find("span").stop().fadeTo('normal', 0 , function() {
		$(this).hide() //Hide the image after fade
	});
	
	
	// ************** NAVIGATION
	$("#main-nav li a").each(function(){
        if($(this).siblings().size() > 0){
            $(this).toggle(
                function(){
                    $("#nav .section li ul:visible").parent().children("a").trigger("click");
                    $(this).parent().end().next("ul").slideDown();
					$(this).addClass("open");
                },
                function(event){
                    $(this).parent().end().next("ul").slideUp();
					$(this).removeClass("open");
                }
            );
        }
    });
	//trigger the toggle to open the subnav if it contains a link with .current
	//$("#main-nav li li a.selected").parent().parent().parent().children("a").trigger("click"); 
	
	// prepare the form when the DOM is ready 
	if ($("#contact_form").exists()){
		$("#contact_form").validate();
	
		// bind form using ajaxForm 
		$("#contact_form").ajaxForm({ 
		   
			beforeSubmit:function() {
				
			   return $("#contact_form").valid()
			},
		
			// target identifies the element(s) to update with the server response 
			target: "#success", 
	 
			// success identifies the function to invoke when the server response 
			// has been received; here we apply a fade-in effect to the new content 
			success: function() { 
				$(".form-fields").hide();
				$("#success").fadeIn("slow"); 
			} 
		}); 
	}
});

function updateCounter(isNext, index, el){
	index = index || 0;
    $("#work-pagination span").html((index+1)+"/"+totalPages);
}

function updateScreenshotCounter(isNext, index, el){ //used to control screenshot page counter on mulitpage case studies
	index = index || 0;
    $("#case-studies-pagination span").html((index+1)+"/"+totalScreenPages);
}

function onBefore(currSlideElement, nextSlideElement, options, forwardFlag){ //used by main carousel
   $("#carousel.secondary-page, ul#slides").animate({
       height: $(this).height()
   }, 200 );
}

function onAfter(currSlideElement, nextSlideElement, options, forwardFlag){
   $("#studies").animate({
       height: Math.max($("div", this).children("img").height(), 300) + 50
   }, 200 );
}