var canvas, canvas2, canvas3;
var boxstat = 0;
var faded = 0.3;
var current_thumb = "#t1";
var slide = new Array();
$(function() 
{ 
  
  //ghost thumbnails
  //$('#t1').fadeTo(0, faded, function() { });
  $('#t2').fadeTo(0, faded, function() { });
  $('#t3').fadeTo(0, faded, function() { });
  $('#t4').fadeTo(0, faded, function() { });
  $('#t5').fadeTo(0, faded, function() { });
  $('#t6').fadeTo(0, faded, function() { });
  $('#t7').fadeTo(0, faded, function() { });
  $('#t8').fadeTo(0, faded, function() { });
  $('#t9').fadeTo(0, faded, function() { });
  $('#t10').fadeTo(0, faded, function() { });
  $('#t11').fadeTo(0, faded, function() { });
  $('#t12').fadeTo(0, faded, function() { });
  
  $("#slideme").css('margin-top','80px');
  $("#slideme").css('margin-left','0px');
  
 
  //slides
  for(var i=0; i<12; i++)
  {
    slide[i] = new Image();
    slide[i].src ="./images/slides/slide"+zeropad((i+1),4)+".png";
  }
  
  //flipbook
  //fliparray = new Array();
  //for(var i=0;i<377 ;i++)
  //{
	//  fliparray[i]= "images/flipbook/slide"+zeropad((i+1), 4)+".jpg";
  //} 
  // flipplayer = new Animator(fliparray,80,'flipim');  
  
  
  $("#t1").click(function() {
    fadethumbs();
    $('#t1').fadeTo(0, 1, function() { });
    $('#slidetext').fadeTo("fast", 0, function() {
       $("#slidetext").html(" ");
    });
    $('#slideme').fadeTo("fast", 0, function() { 
       $("#slideme").attr({ src: slide[0].src });
       $("#slideme").css('margin-top','80px');
       $("#slideme").css('margin-left','0px');
    });
    $('#slideme').fadeTo("slow", 1, function() {});
    $('#slidetext').fadeTo("slow", 1, function() {
       $("#slidetext").html("<p>comfortable camping.</p>");
    }); 
    current_thumb = "#t1";
  });
  
  
  //thumbnail roll over
  $("#t1").hover(
    function() {
        $('#t1').fadeTo(0, 1, function() { });
    },
    function() {
      if(current_thumb != "#t1") {
        $('#t1').fadeTo(0, faded, function() { });
      }
    }
  );
  
  
  
  $("#t2").click(function() {
    fadethumbs();
    $('#t2').fadeTo(0, 1, function() { });
    $('#slidetext').fadeTo("fast", 0, function() {
      $("#slidetext").html(" ");
    });
    $('#slideme').fadeTo("fast", 0, function() { 
       $("#slideme").attr({ src: slide[1].src });
       $("#slideme").css('margin-top','80px');
       $("#slideme").css('margin-left','0px');
    });
    $('#slideme').fadeTo("slow", 1, function() { });
    $('#slidetext').fadeTo("slow", 1, function() {
       $("#slidetext").html("<p>ground clearance to go where you want to go!</p>");
    });
     current_thumb = "#t2";
  });
  
   //thumbnail roll over
  $("#t2").hover(
    function() {
        $('#t2').fadeTo(0, 1, function() { });
    },
    function() {
      if(current_thumb != "#t2") {
        $('#t2').fadeTo(0, faded, function() { });
      }
    }
  );
  
  
  $("#t3").click(function() {
    fadethumbs();
    $('#t3').fadeTo(0, 1, function() { });
    $('#slidetext').fadeTo("fast", 0, function() {
      $("#slidetext").html(" ");
    });
    $('#slideme').fadeTo("fast", 0, function() { 
       $("#slideme").attr({ src: slide[2].src });
       $("#slideme").css('margin-top','80px');
       $("#slideme").css('margin-left','0px');
    });
    $('#slideme').fadeTo("slow", 1, function() { });
    $('#slidetext').fadeTo("slow", 1, function() {
       $("#slidetext").html("<p>lakeside cricket.</p>");
    });
     current_thumb = "#t3";
  });
  
   //thumbnail roll over
  $("#t3").hover(
    function() {
        $('#t3').fadeTo(0, 1, function() { });
    },
    function() {
      if(current_thumb != "#t3") {
        $('#t3').fadeTo(0, faded, function() { });
      }
    }
  );
  
  $("#t4").click(function() {
    fadethumbs();
    $('#t4').fadeTo(0, 1, function() { });
    $('#slidetext').fadeTo("fast", 0, function() {
      $("#slidetext").html(" ");
    });
    $('#slideme').fadeTo("fast", 0, function() { 
       $("#slideme").attr({ src: slide[3].src });
       $("#slideme").css('margin-top','80px');
       $("#slideme").css('margin-left','0px');
    });
    $('#slideme').fadeTo("slow", 1, function() { });
    $('#slidetext').fadeTo("slow", 1, function() {
       $("#slidetext").html("<p>cricket in a meadow full of crickets (or were they grasshoppers?)</p>");
    });
     current_thumb = "#t4";
  });
  
   //thumbnail roll over
  $("#t4").hover(
    function() {
        $('#t4').fadeTo(0, 1, function() { });
    },
    function() {
      if(current_thumb != "#t4") {
        $('#t4').fadeTo(0, faded, function() { });
      }
    }
  );
  
  $("#t5").click(function() {
    fadethumbs();
    $('#t5').fadeTo(0, 1, function() { });
    $('#slidetext').fadeTo("fast", 0, function() {
      $("#slidetext").html(" ");
    });
    $('#slideme').fadeTo("fast", 0, function() { 
      $("#slideme").attr({ src: slide[4].src });
      $("#slideme").css('margin-top','80px');
      $("#slideme").css('margin-left','0px'); 
    });
    
    $('#slideme').fadeTo("slow", 1, function() { });
    $('#slidetext').fadeTo("slow", 1, function() {
       $("#slidetext").html("<p>sunset cricket.</p>");
    });
    current_thumb = "#t5";
  });
  
   //thumbnail roll over
  $("#t5").hover(
    function() {
        $('#t5').fadeTo(0, 1, function() { });
    },
    function() {
      if(current_thumb != "#t5") {
        $('#t5').fadeTo(0, faded, function() { });
      }
    }
  );
  
  $("#t6").click(function() {
    fadethumbs();
    $('#t6').fadeTo(0, 1, function() { });
    $('#slidetext').fadeTo("fast", 0, function() {
      $("#slidetext").html(" ");
    });
    $('#slideme').fadeTo("fast", 0, function() { 
      $("#slideme").attr({ src: slide[5].src });
      $("#slideme").css('margin-top','80px');
      $("#slideme").css('margin-left','0px');      
    });
    
    $('#slideme').fadeTo("slow", 1, function() { });
    $('#slidetext').fadeTo("slow", 1, function() {
      $("#slidetext").html("<p>inventor Garrett Finney and cricket looking for snipe.</p>");
    });
    current_thumb = "#t6";
  });
  
   //thumbnail roll over
  $("#t6").hover(
    function() {
        $('#t6').fadeTo(0, 1, function() { });
    },
    function() {
      if(current_thumb != "#t6") {
        $('#t6').fadeTo(0, faded, function() { });
      }
    }
  );
  
  $("#t7").click(function() {
    fadethumbs();
    $('#t7').fadeTo(0, 1, function() { });
    $('#slidetext').fadeTo("fast", 0, function() {
      $("#slidetext").html(" ");
    });
    $('#slideme').fadeTo("fast", 0, function() { 
      $("#slideme").attr({ src: slide[6].src });
      $("#slideme").css('margin-top','80px');
      $("#slideme").css('margin-left','0px'); 
    });
    $('#slideme').fadeTo("slow", 1, function() { });
    $('#slidetext').fadeTo("slow", 1, function() {
      $("#slidetext").html("<p>the kitchen area - cooktop, frig and bath area (usually hidden by a convenient dish towel / curtain).</p>");
    });
    current_thumb = "#t7";
  });
  
   //thumbnail roll over
  $("#t7").hover(
    function() {
        $('#t7').fadeTo(0, 1, function() { });
    },
    function() {
      if(current_thumb != "#t7") {
        $('#t7').fadeTo(0, faded, function() { });
      }
    }
  );
  
  $("#t8").click(function() {
    fadethumbs();
    $('#t8').fadeTo(0, 1, function() { });
    $('#slidetext').fadeTo("fast", 0, function() {
      $("#slidetext").html(" ");
    });
    $('#slideme').fadeTo("fast", 0, function() { 
       $("#slideme").attr({ src: slide[7].src });
       $("#slideme").css('margin-top','0px');
       $("#slideme").css('margin-left','80px');
    });
    $('#slideme').fadeTo("slow", 1, function() { });
    $('#slidetext').fadeTo("slow", 1, function() {
      $("#slidetext").html("<p>the shower / bath area - counter flips up to make space for shower and potti, shower reaches outside.</p>");
    });
     current_thumb = "#t8";
  });
  
   //thumbnail roll over
  $("#t8").hover(
    function() {
        $('#t8').fadeTo(0, 1, function() { });
    },
    function() {
      if(current_thumb != "#t8") {
        $('#t8').fadeTo(0, faded, function() { });
      }
    }
  );
  
  $("#t9").click(function() {
    fadethumbs();
    $('#t9').fadeTo(0, 1, function() { });
    $('#slidetext').fadeTo("fast", 0, function() {
      $("#slidetext").html(" ");
    });
    $('#slideme').fadeTo("fast", 0, function() { 
      $("#slideme").attr({ src: slide[8].src });
      $("#slideme").css('margin-top','80px');
      $("#slideme").css('margin-left','0px'); 
    });
    $('#slideme').fadeTo("slow", 1, function() { });
    $('#slidetext').fadeTo("slow", 1, function() {
      $("#slidetext").html("<p>the big countertop - sink and stove are hidden under that flush glass lid.</p>");
    });
    current_thumb = "#t9";
  });
  
   //thumbnail roll over
  $("#t9").hover(
    function() {
        $('#t9').fadeTo(0, 1, function() { });
    },
    function() {
      if(current_thumb != "#t9") {
        $('#t9').fadeTo(0, faded, function() { });
      }
    }
  );
  
  $("#t10").click(function() {
    fadethumbs();
    $('#t10').fadeTo(0, 1, function() { });
    $('#slidetext').fadeTo("fast", 0, function() {
      $("#slidetext").html(" ");
    });
    $('#slideme').fadeTo("fast", 0, function() { 
      $("#slideme").attr({ src: slide[9].src });
      $("#slideme").css('margin-top','0px');
      $("#slideme").css('margin-left','80px');
    });
    $('#slideme').fadeTo("slow", 1, function() { });
    $('#slidetext').fadeTo("slow", 1, function() {
      $("#slidetext").html("<p>flush glass lid flips up to reveal the sink and burners.</p>");
    });
    current_thumb = "#t10";
  });
  
   //thumbnail roll over
  $("#t10").hover(
    function() {
        $('#t10').fadeTo(0, 1, function() { });
    },
    function() {
      if(current_thumb != "#t10") {
        $('#t10').fadeTo(0, faded, function() { });
      }
    }
  );
  
  $("#t11").click(function() {
    fadethumbs();
    $('#t11').fadeTo(0, 1, function() { });
    $('#slidetext').fadeTo("fast", 0, function() {
      $("#slidetext").html(" ");
    });
    $('#slideme').fadeTo("fast", 0, function() { 
      $("#slideme").attr({ src: slide[10].src });
      $("#slideme").css('margin-top','80px');
      $("#slideme").css('margin-left','0px'); 
    });
    $('#slideme').fadeTo("slow", 1, function() { });
    $('#slidetext').fadeTo("slow", 1, function() {
       $("#slidetext").html("<p>the couch unfolded, room for two, complete with a bedside table.</p>");
    });
    current_thumb = "#t11";
  });
  
   //thumbnail roll over
  $("#t11").hover(
    function() {
        $('#t11').fadeTo(0, 1, function() { });
    },
    function() {
      if(current_thumb != "#t11") {
        $('#t11').fadeTo(0, faded, function() { });
      }
    }
  );
  
  $("#t12").click(function() {
    fadethumbs();
    $('#t12').fadeTo(0, 1, function() { });
    $('#slidetext').fadeTo("fast", 0, function() {
      $("#slidetext").html(" ");
    });
    $('#slideme').fadeTo("fast", 0, function() { 
      $("#slideme").attr({ src: slide[11].src });
      $("#slideme").css('margin-top','0px');
      $("#slideme").css('margin-left','80px');
    });
    $('#slideme').fadeTo("slow", 1, function() { });
    $('#slidetext').fadeTo("slow", 1, function() {
       $("#slidetext").html("<p>the folding couch option, perfect for couples, look out the picture window at your campsite.</p>");
    });
    current_thumb = "#t12";
  });
  
   //thumbnail roll over
  $("#t12").hover(
    function() {
        $('#t12').fadeTo(0, 1, function() { });
    },
    function() {
      if(current_thumb != "#t12") {
        $('#t12').fadeTo(0, faded, function() { });
      }
    }
  );
  
   $("#flip").hover(
    function() {
        //alert(this);
        $("#flip").css('color', '#632e19');
        $("#flip").css('cursor', 'pointer');
    },
    function() {
      $("#flip").css({'cursor': 'default', 'color': '#f15d22'});
    }
  );
  
  //box logic
  $("#flip").click(function(){  
    centerBox();   
    openBox();
    //flipplayer.start(1,23);  
  }); 
  
  
  //Click the x event!  
  $("#boxclose").click(function(){  
    closeBox(); 
    //flipplayer.stop( );   
  }); 
   
  //Click out event!  
  $("#cover").click(function(){  
    closeBox();
    //flipplayer.stop( );    
  }); 
  
  //Press Escape event!  
  $(document).keypress(function(e){  
    if(e.keyCode==27 && boxstat==1){  
    closeBox(); 
    //flipplayer.stop( );   
    }  
  }); 
  
  //splash
  //get canvas element top 
  //  canvas = document.getElementById("splashbanner");
  //
  //  if (canvas.getContext){  
  //    var ctx = canvas.getContext('2d');
  //    
      //paint test with dropshadow
     
  //    ctx.fillStyle    = '#f15d22;';
      
  //    ctx.beginPath();  
  //    ctx.moveTo(30,29);  
  //    ctx.lineTo(72,62);  
  //    ctx.lineTo(92,22);
  //   ctx.lineTo(107,52);
  //    ctx.lineTo(157,2);
  //    ctx.lineTo(154,46); 
  //    ctx.lineTo(224,37);
  //    ctx.lineTo(197,64);
  //    ctx.lineTo(244,93);
  //    ctx.lineTo(194,97);
  //    ctx.lineTo(194,140); 
  //    ctx.lineTo(148,116);
  //    ctx.lineTo(140,153); 
  //    ctx.lineTo(117,123); 
  //    ctx.lineTo(50,181);
  //    ctx.lineTo(68,124);
  //    ctx.lineTo(2,107);
  //    ctx.lineTo(44,79);        
  //      ctx.fill();  
     
  //  }
  //  else
  //  {
  //    alert("Could not get context");
  //  } 
   
});
 
//helper function to create zero padding fo number formating
function zeropad(n, totalDigits) { 
  n = n.toString(); 
  var pd = ''; 
  if (totalDigits > n.length) 
  { 
    for (i=0; i < (totalDigits-n.length); i++) 
    { 
      pd += '0'; 
    } 
  } 
  return pd + n.toString(); 
}  

 
//box functions
function openBox(){  
	if(boxstat == 0){  
		$("#cover").css({  
			"opacity": "0.9"  
		});
		  
		$("#cover").fadeIn("slow");  
		$("#box").fadeIn("slow");  
		boxstat = 1;  
	}  
} 

function closeBox(){  
	if(boxstat == 1){  
		$("#cover").fadeOut("slow");  
		$("#box").fadeOut("slow");  
		boxstat = 0;
	}  
}

 
function centerBox(){   
	//var windowWidth = document.documentElement.clientWidth;  
	//var windowHeight = document.documentElement.clientHeight;
	var windowWidth = $(window).width();
  var windowHeight =$(window).height();

  
	var boxHeight = $("#box").height();  
	var boxWidth = $("#box").width();  
 
	$("#box").css({  
		"position": "fixed",  
		"top": windowHeight/2-boxHeight/2,  
		"left": windowWidth/2-boxWidth/2 
	}); 
	    
}  

function fadethumbs() {
  $('#t1').fadeTo(0, faded, function() { });
  $('#t2').fadeTo(0, faded, function() { });
  $('#t3').fadeTo(0, faded, function() { });
  $('#t4').fadeTo(0, faded, function() { });
  $('#t5').fadeTo(0, faded, function() { });
  $('#t6').fadeTo(0, faded, function() { });
  $('#t7').fadeTo(0, faded, function() { });
  $('#t8').fadeTo(0, faded, function() { });
  $('#t9').fadeTo(0, faded, function() { });
  $('#t10').fadeTo(0, faded, function() { });
  $('#t11').fadeTo(0, faded, function() { });
  $('#t12').fadeTo(0, faded, function() { });
}