var inPreview			= false;
var curTyp				= "landscape";
var curImg				= null;
var landscapes		= [];
var cityscapes		= [];
var longexps			= [];
var cornwall2011	= [];

//==============================================================================

function switchCat(num,typ){
	hideImageDetail();

	curTyp = typ;
	num = parseInt(num) + 1;
	$("#galleryTitle li").removeClass("sel");
	$("#galleryTitle li:nth-child("+num+")").addClass("sel");
	Cufon.refresh('li');
	$("#galleryTitle .sel").corner("3px");

	$("#galleryThumbs li").removeClass("selCat");
	$("#galleryThumbs li."+typ).addClass("selCat");
}

//==============================================================================

function showImageDetail(num, title){
	inPreview = true;

	if(curImg != null){
		removeImageDetail();
	}

	curImg = num;
	
	var titleOffset = 10;
	var h = $(window).height();
	var w = $("#page").outerWidth();

	var lPos = 0;
	var tPos = 0;

	if($(".pageBlock").length < 1){
		var dv = $("<div class='pageBlock'>&nbsp;</div>");
		$(dv).css("height",h+"px").bind("click",function(){hideImageDetail()});
		$("#page").append(dv);
	}

	var img = new Image();
  $(img).load(function(){
		var h = $(window).height();
		var w = $("#page").outerWidth();

  	lPos = (w - $(this).outerWidth())/2;
  	tPos = (h - $(this).outerHeight())/2;
  	$(this).addClass("imageDetail dropshadow").css("left",lPos+"px").css("top",tPos+"px");
  	$(this).hide();

    var imgTTL = $("<div class='imageDetailTitle'>"+ title +"</div>");
    $(imgTTL).css("left",(lPos+10)+"px")
    	.css("top",(tPos+$(img).outerHeight()+titleOffset)+"px")
    	.css("display", "block");
    $(imgTTL).hide();
    $("#page").append(imgTTL);
    Cufon.replace('.imageDetailTitle');

    var buyNowLink = $("<div class='imageDetailBuyNow'><a href='/store/"+ num +"/'>Buy this print</a></div>");
    $(buyNowLink).css("left",(lPos + $(img).outerWidth() - 90)+"px").css("top",(tPos+$(img).outerHeight()+titleOffset)+"px");
    $(buyNowLink).hide();
    $("#page").append(buyNowLink);
    Cufon.replace('.imageDetailBuyNow a', {hover:true});

    var closeIcon = $("<img src='"+ sl +"i/closeicon.png' class='imageDetailCloseIcon' alt='close' title='close' />");
    $(closeIcon).css("left",(lPos-12)+"px").css("top",(tPos-12)+"px").bind("click",function(){hideImageDetail()});
    $(closeIcon).hide();
    $("#page").append(closeIcon);

    var detailSub = $("<div class='imageDetailSub dropshadow'>&nbsp;</div>");
    $(detailSub).css("left",lPos+"px")
    	.css("top",(tPos+$(img).outerHeight()-20)+"px")
    	.css("height", "55px")
    	.css("width",$(img).outerWidth()+"px" );

    $(detailSub).hide();
    $("#page").append(detailSub);

    $(imgTTL).fadeIn();
    $(buyNowLink).fadeIn();
    $(closeIcon).fadeIn();
    $(detailSub).fadeIn();
		
  	lPos = (w - $(this).outerWidth())/2;
  	tPos = (h - $(this).outerHeight())/2;
  	$(this).css("left",lPos+"px").css("top",tPos+"px");
  	
  	
  	
				$(this).css({
					left: "0px",
					top: "-1000px"
				});
  	
  	$(this).fadeIn(100, function(){
			
			// a fucking hack simply for the shit browser IE.
			//if(jQuery.browser.msie){
				$(this).css({
					left: "0px",
					top: "-1000px"
				}).hide();
				var titleOffset = 10;
				var h = $(window).height();
				var w = $("#page").outerWidth();
				lPos = (w - $(".imageDetail").outerWidth())/2;
  			tPos = (h - $(".imageDetail").outerHeight())/2;

				$(".imageDetail").css({
					left: lPos+"px",
					top: tPos + "px"
				});

				$(".imageDetailCloseIcon").css({
					left: (lPos-12)+"px",
					top: (tPos-12)+"px"
				});

				$(".imageDetailSub").css({
					left: lPos+"px",
					top: (tPos+$(".imageDetail").outerHeight()-20)+"px",
					width: $(".imageDetail").outerWidth()+"px"
				});

				$(".imageDetailTitle").css({
					left: (lPos+10)+"px",
					top: (tPos+$(".imageDetail").outerHeight()+titleOffset)+"px"
				});
				$(".imageDetailBuyNow").css({
					left: (lPos + $(".imageDetail").outerWidth() - 90)+"px",
					top: (tPos+$(".imageDetail").outerHeight()+titleOffset)+"px"
				});
				$(this).show();
			//}
		});
  })
  .error(function(){})
  .attr('src', sl +"p/"+ num +".jpg");

  $("#page").append(img);

}

//==============================================================================

function hideImageDetail(){
	inPreview = false;
	$(".pageBlock").fadeOut(400,function(){$(".pageBlock").remove()});
	$(".imageDetail").fadeOut(400,function(){$(".imageDetail").remove()});
	$(".imageDetailTitle").fadeOut(400,function(){$(".imageDetailTitle").remove()});
	$(".imageDetailCloseIcon").fadeOut(400,function(){$(".imageDetailCloseIcon").remove()});
	$(".imageDetailBuyNow").fadeOut(400,function(){$(".imageDetailBuyNow").remove()});
	$(".imageDetailSub").fadeOut(400,function(){$(".imageDetailSub").remove()});
}

//==============================================================================

function removeImageDetail(){
	$(".imageDetail").remove();
	$(".imageDetailTitle").remove();
	$(".imageDetailCloseIcon").remove();
	$(".imageDetailBuyNow").remove();
	$(".imageDetailSub").remove();
}

//==============================================================================

function stackGalleryImages(typ,num,ttl){	switch(typ){
		case "landscape":
			landscapes.push([num,ttl]);
			break;

		case "cityscape":
			cityscapes.push([num,ttl]);
			break;

		case "longexp":
			longexps.push([num,ttl]);
			break;

		case "cornwall2011":
			cornwall2011.push([num,ttl]);
			break;
	}
	$.preLoadImages(sl +"p/"+ num +".jpg");

}

//==============================================================================

function getNextImage(num){
	var arr = getCurrentImageArray();
	
	for(var i=0; i<arr.length; i++){
		if(arr[i][0] == num){
			if(i < arr.length-1)
				return arr[i+1];
			else
				return false;
		}
	}
}

//==============================================================================

function getPreviousImage(num){
	var arr = getCurrentImageArray();

	for(var i=0; i<arr.length; i++){
		if(arr[i][0] == num){
			if(i > 0)
				return arr[i-1];
			else
				return false;
		}
	}
}

//==============================================================================

function getCurrentImageArray(){
	switch(curTyp){
		case "landscape":
			return landscapes;
			break;

		case "cityscape":
			return cityscapes;
			break;

		case "longexp":
			return longexps;
			break;

		case "cornwall2011":
			return cornwall2011;
			break;

	}
}

//==============================================================================

var cache = [];

$.preLoadImages = function() {
  var args_len = arguments.length;
  for (var i = args_len; i--;) {
    var cacheImage = document.createElement('img');
    cacheImage.src = arguments[i];
    cache.push(cacheImage);
  }
}

//==============================================================================

$(document).keyup(function(e){
	if(inPreview == true){
		if(e.keyCode == 37){
			prevImg = getPreviousImage(curImg);
			if(prevImg != false){
				removeImageDetail();
				showImageDetail(prevImg[0],prevImg[1]);
			}
		}
		else if(e.keyCode == 39){
			nextImg = getNextImage(curImg);
			if(nextImg != false){
				removeImageDetail();
				showImageDetail(nextImg[0],nextImg[1]);
			}
		}
		else if(e.keyCode == 27){
			hideImageDetail();
		}
	}
});

//==============================================================================