// JavaScript Document
var sVersion = "version => 20090930:09:45 -- "
//array that contains the location of the background image
var arBgImages = new Array();
arBgImages["__tl"]="-250px";
arBgImages["__tc"]="0px";
arBgImages["__tr"]="-750px";
arBgImages["__cl"]="-500px";
arBgImages["__cc"]="-1750px";
arBgImages["__cr"]="-1000px";
arBgImages["__bl"]="-2000px";
arBgImages["__br"]="-1250px";
arBgImages["__bc"]="-1500px";

//array to disable a block if I want to

var arBlocks = new Array();
arBlocks["tl"]=1;
arBlocks["tc"]=1;
arBlocks["tr"]=1;
arBlocks["cl"]=1;
arBlocks["cc"]=1;
arBlocks["cr"]=1;
arBlocks["bl"]=1;
arBlocks["bc"]=0;
arBlocks["br"]=1;


//variables that will contain the dimensions of the bounding box
var iMaxRight=0
var iMaxBottom=0;
var iMinTop=1000;
var iMinLeft=1000;
var bIsIe8 = false;
var bIsIe7 = false;
var bIsIe = false

$(function(){

	
	
	
  	if($("html").hasClass("ie"))bIsIe=true;
  	if($("html").hasClass("ie8"))bIsIe8=true;
  	if($("html").hasClass("ie7"))bIsIe7=true;
	
	$(".noscript").hide()
	//take the more info content(=itemDetail) of each block and 
	//copy the text into the backgroundContainer to create the background
	//
	$(".itemDetail").each(
		function()
		{
			$("#backgroundContainer").append($("<span />")
											.attr("id",'itemDetail__'+$(this).parent().attr("id"))
										  	.text(' - - - '+$(this).parent().text())
										)
		}).hide();//then hide the itemDetail
	
	$("#backgroundContainer").prepend(sVersion).append("------------- loading content is done------------") // just add some extra to the end of the background
	
	
	
	// init all main blocks
	// I use the default of jQ-UI because why redo stuff if it's there
	$('.isMainBlock').dialog({ 
		autoOpen: false,
		width: 210,
		height:210,
		resizable: false
	});
	


	//adding some extra stuff to each block
	$('.isMainBlock').each(
		function()
		{
			var oDialog = $(this) //jQ reference to each block
			
			var TB=""; 
			var LR="";
			
			//adding some randomness to each block 
			//so it changes every time somebody comes to the site
			var iRandomL = Math.random()*75;
			var iRandomR = Math.random()*75;
			
			switch(this.id.substr(0,1))
			{
				case "t":
					TB=0+iRandomL;
					if(TB<iMinTop)iMinTop=TB;
				break;
				case "c":
					TB=175+iRandomL;
				break;
				case "b":
					TB=350+iRandomL;
					if(TB>iMaxBottom)iMaxBottom=TB;
				break;
			}
			
			switch(this.id.substr(1,1))
			{
				case "l":
					LR=0+iRandomR;
					if(LR<iMinLeft)iMinLeft=LR;
				break;
				case "c":
					LR=175+iRandomR;
				break;
				case "r":
					LR=350+iRandomR;
					if(LR>iMaxRight)iMaxRight=LR;
				break;
			}
			
			var pos= $("#mainBlocksContainer").position();
			oDialog.dialog('option','position',[LR+pos.left-15,TB+pos.top-15]); 
			
			//set the title of the jQ dialog to the mainBlocks H1
			//and then remove the original H1 as I don't need it anymore	
			oDialog.dialog('option','title', $("<h1 />").html($(oDialog.find("h1")).html()));
			$(oDialog.find("h1")).remove();
			
			
			
			//add an extra div that holds the background
			oDialog.parent().wrapInner($("<div />")
										 .attr("id","__"+this.id)
										 .addClass('contentWrap')
										 .attr('style','background-position: 0px '+arBgImages[("__"+this.id)])
									   )
				
		}
	);
	
	//don't want to close the jQ dialog
	$(".ui-dialog-titlebar-close").remove();
	
	//all init stuff is done, so show the box
	$(".isMainBlock").dialog('open');

	// the mainBlocksContainer left/right margins is set to auto
	// but this must change when the blocks are rebuild to be jQ diolog boxes 
	$("#mainBlocksContainer").css("margin",0)

	//now place all the jQ build boxes into the mainblockscontainer
	// so they can all be moved at once 
	$("div[role='dialog']").appendTo("#mainBlocksContainer")
						   .css({border:"none",padding:"10px"});
	

	
	//reposition the complete mainblockscontainer
	// so all blocks are centered in the window
	iWidth=iMaxRight+210
	iHeight=iMaxBottom+220
	$("#mainBlocksContainer").css({

							  width:iWidth,
							  height:iHeight,
							  top:($(window).height()-iHeight-iMinTop)/2,
							  left:($(window).width()-iWidth)/2
							  })
	

	
		
	$("#backgroundContainer").css({height:$(window).height()-150})
	
	//this modaldialog will contain the extra info after click on a block
	$('#itemDetail').dialog({ 
		autoOpen: false,
		width: 420,
		height:400,
		modal:true,
		resizable:false,
		draggable:false
	});
	$('#itemDetail').css("background","#fff");
	
	
	//disabled as I showall blocks
	/**/
	for(oBlock in arBlocks)
	{
		if(!arBlocks[oBlock])
		{
			$("#"+oBlock).parent().parent().hide();
		}
	}
	
	
		
	// add eventhandlers	
	$(window).bind("resize",windowResize);
	$(".isMainBlock").hover(showColorBg,showGreyBg)
	$(".isMainBlock").bind("click",showContent);
	$().mousemove(function(e){
      $('#tooltip_link').css({left:e.pageX-8,top:e.pageY+15})
	  					.fadeTo("slow", 0.8);
    }); 

	$("body").show();
	
	//$('div#gallery a').lightBox();
	
	//dont't select any content, not because I don't want you to copy my stuff
	//it's just that double click highlights content and it's ugly
	//document.onselectstart = function() {return false;} // ie
  	//document.onmousedown = function() {return false;} // mozilla
	
	$("noscript").hide();
	totalThumbs = 0
	if(!bthumbnailsLoaded)
			{
				try
				{
				$("#bl #thumbNails img").each(function(e)
				{					
					$(this).addClass("thumb_"+totalThumbs);
					arImgTumbs.push("thumb_"+totalThumbs++)
					//preloadThump(total++);
				 })
				}
				catch(e){alert(e.message)}
				//$("#itemDetail #thumbNails a:first").html($("<p>aaarg</p>"))
				preloadThumb(5)
				bthumbnailsLoaded=true
			}
	
});



var bDialogisOpen = false
function windowResize()
{
	if(bDialogisOpen)
	{
		$('#itemDetail').dialog('close');
		//$("body").css("overflow","auto")
		bDialogisOpen = false;
	}
	$("#mainBlocksContainer").css("top",($(window).height()-iHeight-iMinTop)/2);
	$("#mainBlocksContainer").css("left",($(window).width()-iWidth)/2)
	$("#backgroundContainer").css("height",$(window).height()-150);
}

function showColorBg()
{
	$("#"+this.id).dialog('moveToTop');
	$("#itemDetail__"+this.id).css("color","#999");
	$(this).parent().css("background-position","-250px "+arBgImages[("__"+this.id)]);
	
	if(this.id=="br"){
		return;
	}
	
	$('#tooltip_link').show()
	$("#tooltip_link_text").html("<span style='font-size:10px;'>CLICK to read more about: </span><br />'"+$("#"+this.id.replace("__","")).dialog('option', 'title').text()+"'");
}

function showGreyBg()
{
	$(this).parent().css("background-position","0px "+arBgImages[("__"+this.id)])
	$("#itemDetail__"+this.id).css("color","#CCC");
	$('#tooltip_link').hide();
}

var bthumbnailsLoaded=false;

function showContent()
{
	
	var myId = "#"+this.id.replace("__","");
	
	bDialogisOpen = true;
	var oDetail = $('#itemDetail').parent().parent()
	sTitle = $(myId).dialog('option', 'title').text()
	
	var iPos = $("#"+this.id).parent().parent().offset()
	
	$('#itemDetail').html($(myId).html());
	$('#itemDetail .itemDetail').show();
	
	var iDetailHeight=220;
	var iDetailWidth=220;
	var bIsCentered = false;
	//alert(myId)
	switch(myId)
	{
		case "#tl":
			iDetailHeight=500;
			iDetailWidth=270;
		break;
		case "#tc":
			iDetailHeight=520;
			iDetailWidth=380;
			break;
		case "#tr":
			iDetailHeight=460;
			iDetailWidth=280;
			iPos.left -= iDetailWidth-210;
			break;
		case "#cl":
			iDetailHeight=460;
			iDetailWidth=350;
			break;
		case "#cc":
			iDetailHeight=470;
			iDetailWidth=450;
			break;
		case "#cr":
			iDetailHeight=320;
			iDetailWidth=280;
			iPos.left -= iDetailWidth-210;
			break;
		case "#bl":
			iDetailHeight=600;
			iDetailWidth=625;
			bIsCentered = true;
			//class="gallery clearfix"
			$("#itemDetail ul").addClass("gallery").addClass("clearfix");
			$(".gallery a").prettyPhoto({theme:'light_rounded'});
			//if(bIsIe && !bIsIe8)$(".thereAreIssues").show()
			total = 0;
			
			
			break;
		
	}
	
	var iLeftCorrection = -1;
	var iTopCorrection = -1;
	
	if(bIsIe7)
	{
		iLeftCorrection = -3;
		iTopCorrection = -8;
	}
	
	if (bIsCentered)
	{
		$('#itemDetail').dialog('option', 'position',['center','center'])
						.dialog('option', 'draggable','true')
						.dialog('option', 'resizable','true')
	}
	else
	{
		$('#itemDetail').dialog('option', 'position',[iPos.left+iLeftCorrection,iPos.top+iTopCorrection])
	}
	
	$('#itemDetail').dialog('option', 'title',sTitle)
					.dialog('option', 'height',iDetailHeight)
					.dialog('option', 'width',iDetailWidth)
					.dialog('option', 'zIndex', 3999)
					.dialog("open");
					
		
	$(".ui-widget-overlay").bind("click",
					function(){
						$('#itemDetail').dialog("close");
						$('#tooltip_link').hide();
						$('#tooltip_link .ui-icon').removeClass("ui-icon-close");
						$('.moreContent').hide()
					});
	$(".ui-widget-overlay").hover(
					function()
					{
						$('#tooltip_link').show().css("z-index",5000);
						$('#tooltip_link .ui-icon').addClass("ui-icon-close");
						$("#tooltip_link_text").text("Click to close");
					},
					function()
					{
						$('#tooltip_link').hide()
					})
	
	try{
		pageTracker._trackEvent('Detail', 'Show', sTitle);
	}
	catch(err){}
	
	$('.subLink').hover(
		function() { $(this).addClass('ui-state-hover');}, 
		function() { $(this).removeClass('ui-state-hover'); }
	);
	
	$('.hasMoreContent').bind("click", 
								  function(e)
								  {
									  if(!$(this).find("span").hasClass("ui-icon-minus"))
									  {
										  $(this).hide();
										  $(".moreContent").show();
										  $(this).find("span").removeClass("ui-icon-plus").addClass("ui-icon-minus");
										
								  	  }else
									  {
										  $(".moreContent").hide();
										  $(this).find("span").removeClass("ui-icon-minus").addClass("ui-icon-plus");
									  }
								  });
	
	if(myId=="#br"){
		//alert("clicked")
		$(".ui-widget-overlay").click();
		return;
	}
	
	
	if(!bIsIe)
	{
		$("body").css("overflow","hidden")
	}
}




var loadedTumbs = 0;
var totalThumbs;// = $('ul.gallery img').length;
var arImgTumbs = new Array();



function preloadThumb()
{
	o = $("."+arImgTumbs[loadedTumbs++])
	o.bind("load", function() {
                           if(loadedTumbs<totalThumbs)
						   {
							  if(!bIsIe)loadAnotherThumb()
							  else InitializeTimer()
						   }
						   else
						   {
							   bAllThumbsLoaded = true;
						   }
                        })
	
	o.attr("src",o.attr("tmpsrc"));
}

function loadAnotherThumb()
{
	preloadThumb()
}


var secs
var timerID = null
var timerRunning = false
var delay = 10
//InitializeTimer()


function InitializeTimer()
{
    // Set the length of the timer, in seconds
    secs = 1
    StopTheClock()
    StartTheTimer()
}

function StopTheClock()
{
    if(timerRunning)
        clearTimeout(timerID)
    timerRunning = false
}

function StartTheTimer()
{
    if (secs==0)
    {
        StopTheClock()
        // Here's where you put something useful that's
        // supposed to happen after the allotted time.
        // For example, you could display a message:
        //alert("You have just wasted 10 seconds of your life.")
		loadAnotherThumb()
    }
    else
    {
        self.status = secs
        secs = secs - 1
        timerRunning = true
        timerID = self.setTimeout("StartTheTimer()", delay)
    }
}

currentTime("index.js")