$(document).ready(function() {  // do this stuff when the HTML is all ready
   
	var currentFrame; //globals
	window.shadowOpen = 0;
	
	if ($("body#projects").length > 0) {
		startGallery();
		$('.nojs').hide();
		$('.loader').show();
	}
	if ($("body#home").length > 0) {
		categoryClicks();
	}
	shadowRels();
	shadowContact(); //override default bugged shadowbox behaviour


	function shadowRels(){
		$('.shadowbox').attr('rel','shadowbox');
	}
	
	
	function startGallery(){
	/*
	 * Associations
	 * [0] = id
	 * [1] = imghtml
	 * [2] = description_title
	 * [3] = description
 	 * [4] = layouttype
 	 * [5] = contentheight
 	 * [6] = empty 
 	 * [8->up] = closeup thumbs
	 */
		///INIT Fill stage
//		console.log(stageItems[0]);
		
		
		$("#layer").hide();
		$("#layer").append("<div class='item " + stageItems[0][4] + "' id='frame0'><div class='imgContainer'><div class='addon'></div><img src='" + stageItems[0][1] + "' style='height:" + stageItems[0][5] +"px;width:" + stageItems[0][6] +"px' class='illustration' /></div><div class='descriptionContainer'><div class='description'><h2><span>" + stageItems[0][2] + "</span>" +stageItems[0][8]+stageItems[0][9]+stageItems[0][10]+stageItems[0][11]+stageItems[0][12]+"</h2><p>" + stageItems[0][3] + "</p></div></div></div>"); //first frame
		$("#layer").append("<div class='item " + stageItems[1][4] + "' id='frame1'><div class='imgContainer'><div class='addon'></div><img src='" + stageItems[1][1] + "' style='height:" + stageItems[1][5] +"px;width:" + stageItems[1][6] +"px' class='illustration' /></div><div class='descriptionContainer'><div class='description'><h2><span>" + stageItems[1][2] + "</span>" +stageItems[1][8]+stageItems[1][9]+stageItems[1][10]+stageItems[1][11]+stageItems[1][12]+"</h2><p>" + stageItems[1][3] + "</p></div></div></div>"); //second frame
		$("#layer").prepend("<div class='item " + stageItems[stageItems.length - 1][4] + "' id='frame" + String(stageItems.length - 1) + "'><div class='imgContainer'><div class='addon'></div><img src='" + stageItems[stageItems.length - 1][1] + "' style='height:" + stageItems[stageItems.length - 1][5] +"px';width:" + stageItems[stageItems.length - 1][6] +"px' class='illustration' /></div><div class='descriptionContainer'><div class='description'><h2><span>" + stageItems[stageItems.length - 1][2] + "</span>" +stageItems[stageItems.length - 1][8]+stageItems[stageItems.length - 1][9]+stageItems[stageItems.length - 1][10]+stageItems[stageItems.length - 1][11]+stageItems[stageItems.length - 1][12]+"</h2><p>" + stageItems[stageItems.length - 1][3] + "</p></div></div></div>"); //-1 frame

		imageClicks();

		$(window).load(function() {		
			$('.loader').hide();
			$("#layer").show();
			$("#navigation").show();			
			$("#stage").height($('#frame0').height());	// set stage height equal to first item
			$("#layer").animate({"left": '-=625px'}, 0, function(){});
		});
		
		currentFrame = 0;
				
		$(document).keyup(function(e){ //keyboard navigation
			if (e.keyCode == '39') { // right
				if (!Shadowbox.isActive()) { //only react when there is no shadowbox open
					next();
				}
			}
			if (e.keyCode == '37') { //left
				if (!Shadowbox.isActive()) {
					previous();
				}
			}
		});
	
		$("#next").click(function(){
			next();
			return false;
		});
			
		$("#previous").click(function(){
			previous();
			return false;
		});
		

	}
	
		function next(){
			if ($('#layer').is(':animated')) { //do nothing while animating!
				return;
			}

			imageClicks();

			
			currentFrame++; //increase currentframe
			if (currentFrame == stageItems.length) { //circle back
				currentFrame = 0;
			}
			
			$("#stage").animate({
				height: $("#frame" + String(currentFrame)).height()
			}, 'fast'); //set stage height equal to new item

			$("#layer").animate({ //move sideways
				"left": '-=625px'
			}, 'slow', function(){
				loadNext();
			});
			if ($("#frame" + String(currentFrame)).height() - $("#frame" + String(currentFrame - 1)).height() > 20 || $("#frame" + String(currentFrame)).height() - $("#frame" + String(currentFrame - 1)).height() < -20) {
				$("#navigation").effect("bounce", {
					times: 2
				}, 300);
			}
			
			//load new frame
			function loadNext(){
				if (currentFrame == stageItems.length - 1) {
					nextFrame = 0;
				}
				else {
					nextFrame = currentFrame + 1;
				}
				$("#layer").append("<div class='item " + stageItems[nextFrame][4] + "' id='frame" + String(nextFrame) + "'><div class='imgContainer'><div class='addon'></div><img src='" + stageItems[nextFrame][1] + "' style='height:" + stageItems[nextFrame][5] +"px;width:" + stageItems[nextFrame][6] +"px;' class='illustration' /></div><div class='descriptionContainer'><div class='description'><h2><span>" + stageItems[nextFrame][2] + "</span>" +stageItems[nextFrame][8]+stageItems[nextFrame][9]+stageItems[nextFrame][10]+stageItems[nextFrame][11]+stageItems[nextFrame][12]+"</h2><p>" + stageItems[nextFrame][3] + "</p></div></div></div>"); //first frame
				//remove two frames back when animation is completed!
				if (currentFrame - 2 < 0) {
					removeFrame = stageItems.length + (currentFrame - 2);
				}
				else {
					removeFrame = currentFrame - 2;
				}
				$("#frame" + String(removeFrame)).remove();
				$("#layer").animate({
					"left": '+=625px'
				}, 0, function(){
				});
			}
			
		}
	
		function previous(){
			if ($('#layer').is(':animated')) { //do nothing while animating!
				return;
			}

			imageClicks();

			
			currentFrame--; //decrease currentframe
			if (currentFrame == -1) { //circle back
				currentFrame = stageItems.length - 1;
			}
			
			$("#stage").animate({
				height: $("#frame" + String(currentFrame)).height()
			}, 'fast'); //set stage height equal to new item
			$("#layer").animate({
				"left": '+=625px'
			}, 'slow', function(){
				loadNext();
			});
			
			if ($("#frame" + String(currentFrame)).height() - $("#frame" + String(currentFrame - 1)).height() > 20 || $("#frame" + String(currentFrame)).height() - $("#frame" + String(currentFrame - 1)).height() < -20) {
				$("#navigation").effect("bounce", {
					times: 2
				}, 300);
			}
			
			//load new frame
			function loadNext(){
				if (currentFrame == 0) { //circle back
					nextFrame = stageItems.length - 1;
				}
				else {
					nextFrame = currentFrame - 1;
				}
				//$("#layer").prepend("<div class='item' id='frame" + String(nextFrame) + "'><img src='" + stageItems[nextFrame][1] + "' /></div>"); //previous (last) frame		
				$("#layer").prepend("<div class='item " + stageItems[nextFrame][4] + "' id='frame" + String(nextFrame) + "'><div class='imgContainer'><div class='addon'></div><img src='" + stageItems[nextFrame][1] + "' style='height:" + stageItems[nextFrame][5] +"px;width:" + stageItems[nextFrame][6] +"px' class='illustration' /></div><div class='descriptionContainer'><div class='description'><h2><span>" + stageItems[nextFrame][2] + "</span>" +stageItems[nextFrame][8]+stageItems[nextFrame][9]+stageItems[nextFrame][10]+stageItems[nextFrame][11]+stageItems[nextFrame][12]+"</h2><p>" + stageItems[nextFrame][3] + "</p></div></div></div>"); //-1 frame
				//remove two frames back when animation is completed!
				if (currentFrame + 2 > stageItems.length - 1) {
					removeFrame = String(currentFrame - stageItems.length + 2);
					
				}
				else {
					removeFrame = currentFrame + 2;
				}
				$("#frame" + String(removeFrame)).remove();
				$("#layer").animate({
					"left": '-=625px'
				}, 0, function(){
				});
			}
			
		}	
	
	function categoryClicks(){
		$('.category').click(function(){
//			alert($(this).find("a:first-child").attr('href'));
			window.location.href = $(this).find("a:first-child").attr('href');
		});
	}
	
	
	
	function imageClicks(){
/*
			sl = $('.media');
			if($('.media').length>0){
				Shadowbox.setup(sl, {
					gallery: $('.media').attr('rel')
				}); 
				//Shadowbox.clearCache();
				//Shadowbox.init(); // re-init functions
			}
*/
			
			$('.media').click(function(){ //do not rely on shadowbox
				ziel = $(this).attr('id');
				Shadowbox.open(document.getElementById(ziel),{
					gallery: $('.media').attr('rel')
				});
				return false;
			});			
		
			
			ref = $('.media').parents('.item').find('img.illustration:first');
			if (ref.parent().attr('class') == "imgContainer") {
//				ref.wrap('<a href="' + $('.media').attr('href') + '" rel="' + $('.media').attr('rel') + '"></a>');
				ref.click(function(){
					ziel = $(this).parents('.item').find('a.media:first').attr('id');
					Shadowbox.open(document.getElementById(ziel));
					return false;
				});
				ref.css('cursor','pointer');
			}
	}
	
	function shadowContact(){
			$('.shadowcontact').click(function(){ //do not rely on shadowbox
				ziel = $(this).attr('id');
				Shadowbox.open(document.getElementById(ziel));
				return false;
			});
	}	
		
});

///google maps init///
function googleMapInit(whatdiv) {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById(whatdiv));
    map.setCenter(new GLatLng(52.3748028, 4.8953623), 18);
	var point = new GLatLng(52.3745228, 4.8948623); 

   //map.setUIToDefault();
   //map.addControl(new GMapTypeControl());
	map.addControl(new GSmallMapControl());
	map.setMapType(G_HYBRID_MAP); 
	var icon = new GIcon();
	icon.image = "img/lemon_marker.png";
	//icon.shadow = "shadow.png";
	icon.iconSize = new GSize(60, 46);
	//icon.shadowSize = new GSize(91, 62);
	icon.iconAnchor = new GPoint(20, 30);
	icon.infoWindowAnchor = new GPoint(31, 8);
	var marker = new GMarker(point, icon);
	map.addOverlay(marker);
	//alert($("#detail").html());
      GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml('<div style="white-space:nowrap">'+$("#details").html()+'</div></div>');
      });
	marker.openInfoWindowHtml('<div style="white-space:nowrap"><div id="details">'+$("#details").html()+'</div></div>');
  }
}


	function fixRoundies(){
	  DD_roundies.addRule('.subnav', '15px');
	  DD_roundies.addRule('.imgContainer', '15px 15px 15px 0');
	  DD_roundies.addRule('.description', '0 0 15px 15px');	  
	  DD_roundies.addRule('.halfsize .imgContainer', '15px 15px 0 15px');
	  DD_roundies.addRule('.halfsize .description', '0 15px 15px 0');
	  DD_roundies.addRule('.intro', '15px');
	  DD_roundies.addRule('.category', '15px');
	}