/*
 * 
 * The code is not really that hard.. 
 * buzz us via the email address on the contact us page if you read this
 * you should see the CSS behind it too.. 
 * big props to jingle as she done a fantastic job at fixing ie6's "problems", 
 * some not possible
 * 
 */


// JavaScript Document
$(document).ready(function(){	
 var flag;//quick click mark
//load different galleries
function loadPage(pageID,imageArray){
  //initialization
  var x=0;//map button x coordinate
  var y=0;//map button y coordinate
  var nextCaseHtml="";//next image html
  
  var gallery=$(pageID).find(".gallery"); 
  var loader=$(pageID).find(".loader");
  var button=$(pageID).find('.button');

  if($(pageID).find(".currentCase").length==0){//justify the page if load the first time 
   var initialitem=imageArray[0].path;
   var initialImgPath=initialitem[0].item;
   var detailItem=imageArray[0].path;//big image path
   var thumbIndex=0;//index of thumbnail
   arrayToMap(imageArray);
   $(pageID).find('#nav_'+y+'_'+x).addClass('current'); 
   if(initialitem.length==1)
	{
		nextCaseHtml='<div class="currentCase" style="text-align:center;"><img src="'+initialImgPath+'" alt="'+imageArray[0].heading+'" title="'+imageArray[0].heading+'" /></div>';
	}//add new case
	else
	{
		var initalMarginTop=-initialitem.length*55/2+"px";
		var initialThumbnailItem='<img class="currentThumb" src="'+initialitem[0].item+'" alt="1" title="1"/>';
		for(var i=1;i<initialitem.length;i++)
		{
			initialThumbnailItem+='<img src="'+initialitem[i].item+'" alt="'+(i+1)+'" title="'+(i+1)+'" />';
		}
		nextCaseHtml='<div class="currentCase"><div class="imgArea"><img src="'+initialImgPath+'" alt="'+imageArray[0].heading+'" title="'+imageArray[0].heading+'" /></div><div class="thumbnail" style="margin-top:'+initalMarginTop+'">'+initialThumbnailItem+'</div></div>';
	}
   gallery.append(nextCaseHtml);//initialization load 
   var currentCase=$(pageID).find(".currentCase");
   currentCase.hide();
   var initialImg = new Image();
   var appname = navigator.appName.toLowerCase();
   if (appname.indexOf("netscape") == -1){   //ie
	initialImg.onreadystatechange =  function() {if (initialImg.readyState == "complete"||initialImg.complete === true) {loader.hide(); currentCase.show();showDesc(0);}}	
   }
   else {//firefox
     initialImg.onload = function () {if(initialImg.complete == true){loader.hide();currentCase.show();showDesc(0);}}
   }
   initialImg.src=initialImgPath;
 }

  function arrayToMap(JSONarray) {
	var X=0; 
    var Y=0; 
    button.empty();
    var myMap=new Array(4);
    for (var i=0; i <6; i++){
        myMap[i]=new Array(4) ;
	}

    for(var i=0;i<JSONarray.length && i<35;i++) {
        myMap[Y][X] = JSONarray[i];
        button.append('<span id="nav_'+Y+'_'+X+'">.</span>');
        if (X<4) { X++; } else { Y++; X=0; }
     } 

    return myMap;
   }
  
  //change current map button
  function move_around(who) {	
      $(pageID).find('.current').removeClass('current').addClass('viewed');
      who.removeClass('viewed').addClass('current');
    }
  function scrolldTo(direction) {	 
     switch (direction) {
        case 'right':
            if (x >= 0 && $(pageID).find('#nav_'+y+'_'+(x+1)).length == 1) { x++; } else {  x = 0; }
        break;
        case 'left':
             if (x > 0 && $(pageID).find('#nav_'+y+'_'+(x-1)).length == 1) { x--; } else {
                for (i=0; $(pageID).find('#nav_'+y+'_'+i).length == 1; i++) {}; x = (i-1);
             }
        break;
        case 'up':
            if (y > 0 && $(pageID).find('#nav_'+(y-1)+'_'+x).length == 1) { y--; } else {
                for (i=0; $(pageID).find('#nav_'+i+'_'+x).length == 1; i++) {}; y = (i-1);
            }
        break;
        case 'down':
            if (y>=0 && $(pageID).find('#nav_'+(y+1)+'_'+x).length == 1) {
                y++;
            } else {
                y=0;
            }
        break;
    }
    move_around($(pageID).find('#nav_'+y+'_'+x));
	nextCaseHtml=buildNexthtml(imageArray,y,x);
  }

  function buildNexthtml(imageArray,y,x){
   detailItem=imageArray[y*5+x].path;
   var thumbnailItem="";
   if(detailItem.length==1)
	{
		nextCaseHtml='<div class="nextCase" style="text-align:center;"><img src="'+detailItem[0].item+'" alt="'+imageArray[y*5+x].heading+'" title="'+imageArray[y*5+x].heading+'" /></div>';
	}//add new case
	else
	{
		var marginTop=-(detailItem.length*50/2+30)+"px";
		thumbnailItem='<img class="currentThumb" src="'+detailItem[0].item+'" alt="1" title="1"/>';
		for(var i=1;i<detailItem.length;i++)
		{
			thumbnailItem+='<img src="'+detailItem[i].item+'" alt="'+(i+1)+'" title="'+(i+1)+'" />';
		}
		nextCaseHtml='<div class="nextCase"><div class="imgArea"><img src="'+detailItem[0].item+'" alt="'+imageArray[y*5+x].heading+'" title="'+imageArray[y*5+x].heading+'" /></div><div class="thumbnail" style="margin-top:'+marginTop+'">'+thumbnailItem+'</div></div>';
	}
	return nextCaseHtml;
	  //choose thumbnail	
  }

	
  changeCurrentCase=function(){
	  $(pageID).find(".currentCase").remove();	
	  $(pageID).find(".gallery .nextCase").removeClass("nextCase").addClass("currentCase");
	  gallery.css({top:"0",left:"0"});
	  flag=1;
     }
  function slideRight(){gallery.animate({left:"0"},500,changeCurrentCase);}
  function slideLeft(){gallery.animate({left:"-960px"},500,changeCurrentCase);}
  function slideUp(){gallery.animate({top:"-600px"},500,changeCurrentCase);}
  function slideDown(){gallery.animate({top:"0"},500,changeCurrentCase);}

  //hide the loading image and slide the case
  function finishLoad(y,x,fx){
	flag=0;
	var img = new Image();
	
	var appname = navigator.appName.toLowerCase();
	if (appname.indexOf("netscape") == -1){//IE
       img.onreadystatechange=function(){		 
	     if(img.readyState == "complete"||img.complete === true){loader.hide();fx();showDesc(y*5+x);}
       }
	}
	else {//firefox
       img.onload = function () {if(img.complete == true){loader.hide();fx();}showDesc(y*5+x);}
    }
	var imgitem=imageArray[y*5+x].path;
	img.src=imgitem[0].item;
   }
   
  function imageSlideRight(y,x,htmlcontent){
	loader.show();
	$(pageID).find(".currentCase").after(htmlcontent);
	$(pageID).find(".gallery .currentCase,.gallery .nextCase").css("float","left");

	finishLoad(y,x,slideLeft); 
  }

  function imageSlideLeft(y,x,htmlcontent){
	loader.show();
	$(pageID).find(".currentCase").before(htmlcontent);
	$(pageID).find(".gallery .currentCase,.gallery .nextCase").css("float","left");
	gallery.css("left","-960px");
	finishLoad(y,x,slideRight);
  }
  function imageSlideUp(y,x,htmlcontent){
	loader.show();
	$(pageID).find(".currentCase").before(htmlcontent);
	$(pageID).find(".gallery .currentCase,.gallery .nextCase").css("float","none");
	gallery.css("top","-600px");
	finishLoad(y,x,slideDown);
   }
  function imageSlideDown(y,x,htmlcontent){
	loader.show();
	$(pageID).find(".currentCase").after(htmlcontent);
	$(pageID).find(".gallery .currentCase,.gallery .nextCase").css("float","none");

	finishLoad(y,x,slideUp);
  }
 
  //description tooltip
  function showDesc(num){
	function over(){							   
	 $(this).find("li").html("");
	 if(imageArray[num].weblink)
	 {
		 $(this).find("li").html('<h2>'+imageArray[num].heading+'</h2><p>'+imageArray[num].text+'</p><a href="http://'+imageArray[num].weblink+'" target="_blank" class="weblink">'+imageArray[num].weblink+'</a>');
	 }
	 else
	 {
	     $(this).find("li").html('<h2>'+imageArray[num].heading+'</h2><p>'+imageArray[num].text+'</p>');
	 }
	 
	 $(this).find("li").stop().animate({height:"100px",width:"250px"});			
	}
	function out(){
	 $(this).find("li").html("");
	 $(this).find("li").stop().animate({height:"18px",width:"35px"},function(){$(this).html("DETAILS")});	
	}
    $(pageID).find(".desc_tip").hover(over,out);
  }
  
  function getYX(who){	
	var coords = who.id.replace(/nav_/g,'');
	coords = coords.split('_'); /* y,x */
	return coords;
  }
  
    $(pageID).find(".thumbnail").find("img").live('click',function(){																  															   
	   thumbIndex=parseInt($(this).attr("title"))-1;
	   $(pageID).find(".currentCase .imgArea img").attr("src",detailItem[thumbIndex].item);
	   $(pageID).find(".currentCase .imgArea img").attr("alt",detailItem[thumbIndex].heading);
	   $(pageID).find(".currentCase .imgArea img").attr("title",detailItem[thumbIndex].heading);
	   $(pageID).find(".currentThumb").removeClass("currentThumb");
	   $(this).addClass("currentThumb");
	   return false;
	});
		
  $(pageID).find(".btn_right").click(function(){if(flag==0){return;}else{scrolldTo('right');imageSlideRight(y,x,nextCaseHtml);}});
  $(pageID).find(".btn_left").click(function(){if(flag==0){return;}else{scrolldTo('left');imageSlideLeft(y,x,nextCaseHtml);}});
  $(pageID).find(".btn_top").click(function(){if(flag==0){return;}else{scrolldTo('up');imageSlideUp(y,x,nextCaseHtml);}});
  $(pageID).find(".btn_bottom").click(function(){if(flag==0){return;}else{scrolldTo('down');imageSlideDown(y,x,nextCaseHtml);}});
  $(pageID).find(".button span").click(function(){											
	if(flag==0){return;}
	else{			
	 y=Number(getYX(this)[0]);
	 x=Number(getYX(this)[1]);
	
	 var currentY=Number(getYX($(pageID).find('.current')[0])[0]);
	 var currentX=Number(getYX($(pageID).find('.current')[0])[1]);
 
	/* var clickCaseHtml='<div class="nextCase"><img src="'+imageArray[y*5+x].path+'" alt="'+imageArray[y*5+x].heading+'" title="'+imageArray[y*5+x].heading+'" /></div>';//add new case*/
	var clickCaseHtml=buildNexthtml(imageArray,y,x);
	 if(y==currentY){	
	      if(x>currentX){imageSlideRight(y,x,clickCaseHtml);}
	      else if(x<currentX){imageSlideLeft(y,x,clickCaseHtml);}
		  else if(x==currentX){return;}
	 }
	 else if(y>currentY){imageSlideDown(y,x,clickCaseHtml);}
	 else{imageSlideUp(y,x,clickCaseHtml);}
	 move_around($(this));
    }
	 	
  });
}

$.ajax({
		  url: 'json.json',
		  dataType: 'json',
		  success: function(data){
		  $(".link02").click(function(){loadPage("#block02",data.web);});
		  //
		  $(".link04").click(function(){loadPage("#block04",data.colourcorrection);});
		  //
          $(".link03").click(function(){loadPage("#block03",data.graphic);});
		}
	});
});