jQuery(function(){
	// ! Vars: DOM
	var $logo = $("#header .logo");
	var $contactLink = $("#header .contact a");
	var $contactClose = $("#contact h4");
	var $contact = $("#contact");
	var $nav = $("#navi");
	var $navItems = $("#navi a").not(":first");
	var $content = $("#content");
	var $contentSlider =  $("#slider");
	var $frames = $("#content").find(".frame");

	
	var $bg = $("#bg");
	
	var $skbk = $("#skbk");
	var $skbkLi = $skbk.find("li");
	var $skbkLiA = $skbk.find("a");
	var $skbkDetail = $skbk.find(".detail");
	
	// ! Vars: window & resize
	var wH = $(window).height();
	var wW = $(window).width();
	
	var isIE = false;
	var init = true;
	
	// ! Vars: scroll
	var scrDuration = 1200;
	var scrEasing = "easeInOutSine";
	
	// ! Vars: utility
	var baseHref = $("base").attr("href");
	var bodyClass = $("body").attr("class");
	var isHome = true;
	var framesSetupState = [false,false,false,false,false,false,false];
	var galleryCurrent = [];
	var browserHistory = true;
	

	// ! FUNCTIONS	-----------------------
	function cl(str){
		
		if(!isIE && window.console != undefined){
			console.log(str);
		}
	}	
	function setupNewFrame(index){
		cl("setupNewFrame("+index+")");
		var $currentFrame =  $frames.eq(index);

		$frames.removeClass("current");		
		$currentFrame.addClass("current");
		
		if(!framesSetupState[index]){
			framesSetupState[index] = true;
			galleryCurrent[index] = 1;
			
			if(isHome){
				var $photosWrapper = $currentFrame.find(".photos li");
				var photosAmount = $photosWrapper.length;
				var counterHtml = "1"+" of "+photosAmount;			
				$navItems.eq(index).find(".counter").html(counterHtml);
				
				setupGalleryNavigation(index);
				initFirstImage(index);				
			} else {
				$currentFrame.load(baseHref+" .ajax-wrapper:eq("+index+")", function(){
					var $photosWrapper = $currentFrame.find(".photos li");
					var photosAmount = $photosWrapper.length;
					var counterHtml = "1"+" of "+photosAmount;			
					$navItems.eq(index).find(".counter").html(counterHtml);
					
					setupGalleryNavigation(index);
					initFirstImage(index);					
				
				});

			}
			

		}
	}

	var nextLoaded = false;
	var fadeOutEnd = false;
	
	function switchNextGalleryItem($current,$next){
		cl("switchNextGalleryItem");
		if(nextLoaded && fadeOutEnd){
			$current.removeClass("active");
			$next.addClass("active");
			$next.animate({ opacity: 1}, 500, function(){ });
		}
	}
	function switchPrevGalleryItem($current,$prev){
		$current.animate({opacity:0},250, function(){
			$current.removeClass("active");
			
			$prev
			.addClass("active")
			.animate({opacity:1},250, function(){
				
			});
			
		});
	}
	function setupGalleryNavigation(index){
		var $left = $navItems.eq(index).find(".left");
		var $right = $navItems.eq(index).find(".right");
		
		$navItems.eq(index).addClass("first");
		cl("setupGalleryNavigation("+index+")");
		nextLoaded = false;
		fadeOutEnd = false;
		
		$left.click(function(){
			cl("$left.click("+index+")");
			var $items = $frames.eq(index).find(".photos li");
			var $currentItem = $items.filter(".active");
			var $prevItem = $currentItem.prev();
			var $firstItem = $items.first();
			
			var currentCounter = $items.index($currentItem);

			if($prevItem.is($firstItem)){
				$left.parent().addClass("first");	
			} else {
				$left.parent().removeClass("last");
			}
			
			if(!$currentItem.is($firstItem)){
				$(this).parent().find(".counter").html((currentCounter)+" of "+$items.length);
				switchPrevGalleryItem($currentItem,$prevItem);
			}
			
		});
		
		$right.click(function(){
			cl("$right.click("+index+")");
			var $items = $frames.eq(index).find(".photos li");
			var $currentItem = $items.filter(".active");
			var $firstItem = $items.first();
			var $lastItem = $items.last();
			var $nextItem = $currentItem.next();
			

			
			if($nextItem.is($lastItem)){
				$right.parent().addClass("last");	
			} else {
				$right.parent().removeClass("first");
			}
			
			if(!$currentItem.is($lastItem)){ // if current not last
				var currentCounter = $items.index($currentItem);
				$(this).parent().find(".counter").html((currentCounter+2)+" of "+$items.length);

				var $replaceItem = $nextItem.children();
				var imgSrc = $replaceItem.attr("href");
				var imgTitle = "<strong>"+$replaceItem.html()+"</strong>";
				var imgSubtitle = "<span>"+$replaceItem.attr("rel")+"</span>";
				
				$nextItem.css("opacity","0");
				
				$currentItem.animate({ opacity: 0}, 500, function(){
					fadeOutEnd = true;
					switchNextGalleryItem($currentItem,$nextItem);
				});
				
				if(!$nextItem.hasClass("loaded")){ // if next has not been loaded load new Image
					var img = new Image();
					$(img).attr("src",imgSrc).whenLoaded(function(){
						$nextItem.addClass("loaded");
						$replaceItem.replaceWith($(this));
						$(this).after(imgTitle+imgSubtitle);
						nextLoaded = true;
						switchNextGalleryItem($currentItem,$nextItem);
					});
				} else { // if next has been loadaded
					nextLoaded = true;
					switchNextGalleryItem($currentItem,$nextItem);
				}	
			}
			
		});
		
	}
	function initFirstImage(index){
		if(index == 0) return false;
		cl("initFirstImage: "+index);
		var $firstItem = $frames.eq(index).find(".photos li:first");
		var $replaceItem = $firstItem.find("a");
		
		var imgSrc = $replaceItem.attr("href");
		var imgTitle = "<strong>"+$replaceItem.html()+"</strong>";
		var imgSubtitle = "<span>"+$replaceItem.attr("rel")+"</span>";
		
		$firstItem.css("opacity","0");
		
		var img = new Image();
		$(img).attr("src",imgSrc).whenLoaded(function(){
			$firstItem.addClass("loaded");
			$replaceItem.replaceWith($(this));
			$(this).after(imgTitle+imgSubtitle);
			$firstItem.addClass("active");
			$firstItem.animate({ opacity: 1}, 500, function(){ });
		});
	}
	
	
	function setUserAgent(){
		if (navigator.appVersion.indexOf("Win")!=-1) { userAgent="win"; }
		if (navigator.appVersion.indexOf("Mac")!=-1) { userAgent="mac"; }
		if (navigator.appVersion.indexOf("Linux")!=-1) { userAgent="linux"; }
		if (navigator.platform ==  "iPhone" ) { userAgent="iphone"; }
		if (navigator.platform == "iPad") { userAgent="ipad"; }
	}
	function setCapabilities(){
		if($.browser.msie) { isIE = true; }
		if(userAgent == "iphone" || userAgent == "ipad") {}
	}
	function initClick(){
		if(bodyClass == "home"){
			$navItems.eq(0).click();
		} else {
			isHome = false;
			$navItems.filter('[href$="'+bodyClass+'/"]').click();
		}
		init = false;
	}
// ! HISTORY ----------------------
	var History = window.History; 
    if ( !History.enabled ) {
        return false;
    }

	History.Adapter.bind(window,'statechange',function(){ 
		
		if(browserHistory){
			var State = History.getState();
			var StateUrlArr = State.url.split(baseHref);
			

			
			if(StateUrlArr[1] == ""){
				$navItems.filter('[href="/"]').click();
			} else {
				var checkAnchorArr = StateUrlArr[1].search("#");
				// cl(checkAnchorArr);
				if (checkAnchorArr == -1){
					$navItems.filter('[href="'+StateUrlArr[1]+'"]').click();
				} else {
					var splitURL = StateUrlArr[1].slice(1);
					$navItems.filter('[href="'+splitURL+'"]').click();
					
				};
				
				
			}
		}
		browserHistory = true;
		//History.log('statechange:', State.data, State.title, State.url);
	});


	// ! EVENTS	-----------------------
	$(window)
	.resize( function() { 
		wH = $(window).height();
		wW = $(window).width();
	});
	// ! build photo navigation
	$navItems.each(function(i){
		if(i>0){
			var html = $(this).html();
			var href = $(this).attr("href");
			
			$(this).html(html+'<span class="left">‹</span><span class="right">›</span><span class="counter"></span>');
		}
	});
	$navItems.click(function(){
		
		var $thisItem = $(this);
		var index =  $navItems.index($thisItem);	
		var href = $navItems.eq(index).attr("href");

		$navItems.parent().removeClass("active");
		$thisItem.parent().addClass("active");

		
		var iWidth = $thisItem.width()+54; // 54 = 2 x padding of 27px
		var iPos = $thisItem.position()
		var navScrPos = iPos.left-(wW-iWidth)/2;

		var bgImgWidth = $bg.find("img").width();
		var bgScrPos = ((bgImgWidth-wW)/7)*index;
		
		var time;
		
		if(init){
			time = 0;	
		} else {
			time = scrDuration;
		}

		$nav.scrollTo(navScrPos, time,{ axis: 'x', easing: scrEasing });
		$content.scrollTo($frames.eq(index), time,{ axis: 'x', easing: scrEasing });
		$bg.scrollTo(bgScrPos, time,{ axis: 'x', easing: scrEasing });
		
		setupNewFrame(index);
		browserHistory = false;
		History.pushState(null, null, href);
			
		return false;
	});
	

	// ! sketchbook
	$skbkLiA.click(function(){
		var href = $(this).attr("href");
		$skbkDetail.addClass("loading");
		var img = new Image();
		$(img).attr("src",href).whenLoaded(function(){
			var $thisImg = $(this);
			if($skbkDetail.hasClass("init")){
				$skbkDetail.animate({ opacity:0},500, function(){
					$skbkDetail.removeClass("loading");
					$(this).find("img").replaceWith($thisImg);
					$(this).animate({ opacity:1},500);
				});
			} else {
				
				$skbkDetail.removeClass("loading");
				$skbkDetail.addClass("init");
				$skbkDetail.html($(this));
				$(window).scrollTo("#skbk",{ duration: 1200, easing: "easeInOutExpo" });
			}
		});
		
		return false;

	});
	
	$logo.click(function(){
		$navItems.filter('[href="/"]').click();
		return false;
	});
	$contactLink.click(function(){
		$contact.addClass("open");
		return false;
	});
	$contactClose
	.add("#header")
	.add($content)
	.add($navItems).click(function(){
		$contact.removeClass("open");
		return false;
	});

	setUserAgent();
	setCapabilities();
	initClick();
	
});

$(document).ready(function(){
	$("#form_contact").validate({
		invalidHandler: function(form, validator) {
		  var errors = validator.numberOfInvalids();
		  if (errors) {
			var message = errors == 1
			  ? 'You missed 1 field. It has been highlighted'
			  : 'You missed ' + errors + ' fields. They have been highlighted';
			$("em.error").html(message);
			$("em.error").show();
		  } else {
			$("em.error").hide();
		  }
		}
	 });
});