Cufon.replace('h1, h3'); // Works without a selector engine
//Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7, see above

var buttonBackShown = false;
var infoBarShown = false;
var projects = "";

$(document).ready(function(){
	
	$.getJSON('data.json', function(data) {
		projects = data;
		
		$.each(data, function(id,val){
			var html = "<h3>"+val.name+"</h3>";
			html += "<p>"+val.desc+"</p>";
			html += '<a href="http://'+val.www+'" target="_blank" title="'+val.linkTitle+'">'+val.www+'</a>';
			$("div."+id+".rectangle").html(html);
			
			$.each(val.items, function(i,item){
				$("div."+id+".box"+(i+1)).html('<span title="Kliknij, by zobaczyć więcej szczegółów" style="background-image: url(projects/'+item.box+');"></span>')
				.bind("click", function(){
					openOverlay(id,i);
				});
			});
		});
		
		Cufon.replace('h3');
	});
	
	$("#infoBarButton.buttonSlideDown").toggle(function(){
		infoBarOpen();
		
		if(buttonBackShown) {
			$("#buttonBack").fadeOut();
		}
		infoBarShown = true;
	},function(){
		infoBarHide();
		
		if(buttonBackShown) {
			$("#buttonBack").fadeIn();
		}
		infoBarShown = false;
	});
	
	$("#grid div[id]").click(function()
	{
		if(!$(this).hasClass("clicked")) 
		{
			var id = $(this).attr("id");
			$(this).addClass("clicked");
			$("#grid div").not(this).fadeOut();
			$("#buttonBack, #grid div."+id).fadeIn(1000);
			buttonBackShown = true;
			
			$("div.rectangle."+id).parent();
			
			if(infoBarShown) {
				infoBarHide();
			}
		}
	});
	
	$("#buttonBack").click(function(){
		//$('#buttonBack, #grid div[class]').fadeOut();
		//$("#grid div[id]").fadeIn(1000);
		
		$('#buttonBack, #grid div[class!="clicked"]').fadeOut();
		$("#grid div[id]").fadeIn(1000).removeClass("clicked");
		
		buttonBackShown = false;
	});
	
//	zIndexWorkaround();
	
	/*if(isIE7()) {
	    var zIndexNumber = 1000;
	    $('div').each(function() {
	        $(this).css('zIndex', zIndexNumber);
	        zIndexNumber -= 10;
	    });
	}*/

	Cufon.now();
});

function infoBarOpen()
{
	$("#infoBarButton").addClass("buttonSlideUp").attr("title","Kliknij, aby zwinąć");
	$("#infoBar").animate({top:'0'},400);
}

function infoBarHide()
{
	$("#infoBarButton").removeClass("buttonSlideUp").attr("title","Kliknij, aby rozwinąć");
	$("#infoBar").animate({top:'-210'},400);
}
/*
function isIE7() {
//	 if(navigator.userAgent.match(/MSIE \d\.\d+/))  {
 	 if(navigator.userAgent.match(/MSIE 7.0+/))  {
		 return true;  
	 }
	 return false;  
}
*/
function openOverlay(projectId, startImageIndex) 
{	
	// overlay handler
	var overlay = "#"+projectId+"Overlay";
	
	// generate html overlay's code
	var html = "";
	html +='<div id="'+projectId+'Overlay" class="overlay" style="height: '+$(window).height()+'px;">'
			+'<div class="overlayContent">'
				+'<div class="buttonClose">zamknij</div>'
				+'<div class="clear"></div>'
				+'<div class="overlayDetails">' 
					+'<h3>'+eval("projects."+projectId+".name")+'</h3><p>'+eval("projects."+projectId+".desc")+'</p>'
	   	 	 		+'<a href="http://'+eval("projects."+projectId+".www")+'" target="_blank" title="'+eval("projects."+projectId+".linkTitle")+'">'+eval("projects."+projectId+".www")+'</a>'
		 			+'<ul class="overlayThumbs">';
    		  $.each(eval("projects."+projectId+".items"), function(i,item){
				html +='<li class="'+projectId+'" title="Kliknij, aby wyświetlić ten obraz" style="background-image: url(projects/'+item.thumb+');"></li>';
			  });	 	
		 	  html +='</ul>' 
 				+'</div>'
 				+'<div class="overlayPreview">'
					+'<div class="overlayImage">'
						+'<div class="buttonPrev" title="Kliknij, by wyświetlić poprzedni obraz"></div>';
				$.each(eval("projects."+projectId+".items"), function(i,item){
				  html +='<div class="image"><img src="projects/'+item.big+'" style="width:'+item.w+'px; height:'+item.h+'px;" alt="" /></div>';
				});	 	
				  html +='<div class="buttonNext" title="Kliknij, by wyświetlić następny obraz"></div>'
					+'</div>';
				+'</div>'
				+'<div class="clear"></div>'
			+'</div>'
		+'</div>';
	
	// insert html code
	$("#page").after(html);
	Cufon.replace('h3');
	
	// show mg logo
	$("#page .logo").addClass("onTop");
	
	// show overlay
	$(overlay).fadeIn();
	
	// load image
	showImage(projectId, startImageIndex);
	
	// bind overlay thumbs
	$(overlay+" .overlayThumbs li").unbind().each(function(index){
		$(this).bind("click", function(){
			showImage(projectId, index);
		});
	});
	
	$(".overlay .buttonClose").bind('click', function(){
		closeOverlay();
	});
}

function showImage(overlayId, imageIndex) 
{
	// overlay handler
	var overlay = "#"+overlayId+"Overlay";
	
	// image handler
	var image = overlay+" .overlayImage .image:eq("+imageIndex+") img";
	
	// select thumbnails
	$(overlay+" .overlayThumbs li").removeClass("shown");
	$(overlay+" .overlayThumbs li:eq("+imageIndex+")").addClass("shown");
	
	// hide all images
	$(overlay+" .image").hide();
			
	// nav buttons handlers
	var prev = overlay+" .buttonPrev";
	var next = overlay+" .buttonNext";
	$(prev).unbind().hide();
	$(next).unbind().hide();

	// resize 
	$(overlay+" .overlayImage").animate({
		height: ""+$(image).css("height")+""
	},500, function(){
		$(overlay+" .overlayImage").animate({
			width: ""+$(image).css("width")+""
		},500,function(){
			// show image
			$(image).parent().fadeIn();
			
			// count all images
			var totalImages = $(overlay+" .image").length;
			var imageNumber = imageIndex+1;
			
			// nav buttons
			if(imageNumber<totalImages) {
				$(next).bind("click", function(){
					showImage(overlayId, imageIndex+1);
				}).show();
			}	
			
			if(imageNumber>1) {
				$(prev).bind("click", function(){
					showImage(overlayId, imageIndex-1);
				}).show();
			}
		});
	});
}

function closeOverlay() 
{
	$(".overlay").fadeOut("normal",function(){
		$(".overlay").remove();
	});
	
	// hide 
	$("#page .logo").removeClass("onTop");
}