// Menu Bike movement and Page centering calculations


// Get variable from URL for previous page #bike position 'left:' value 
function getValue(varname)
{
  // First, we load the URL into a variable
  var url = window.location.href;
  // Check for ?, if not, add default ?bikePos=-10          ********* DODGY, but works ***********
  if (url.indexOf('?') < 0) 
  {
    var url = window.location.href + "?bikePos=-10";
	//alert(url);
  }
  // Next, split the url by the ?
  var qparts = url.split("?");
  //alert(qparts[1]);
  // Check that there is a querystring, return "" if not
  if (qparts.length == 1) 
  {
	return "";
  }
  // Then find the querystring, everything after the ?
  var query = qparts[1];
  // Split the query string into variables (separates by &s)
  var vars = query.split("&");
  // Initialize the value with "" as default
  var value = "";
  // Iterate through vars, checking each one for varname
  for (i=0;i<vars.length;i++)
  {
    // Split the variable by =, which splits name and value
    var parts = vars[i].split("=");    
    // Check if the correct variable
    if (parts[0] == varname)
    {
      // Load value into variable
      value = parts[1];
      // End the loop
      break;
    }
  }
  // Convert escape code
  value = unescape(value);
  // Convert "+"s to " "s
  value.replace(/\+/g," ");
  // Return the value
  return value;
}

var bikePos = getValue("bikePos");

// Center first portfolio item with margin-left: value
// Called after jquery.wresize.js 
jQuery( function( $ )  
{ 
    function content_resize()  
    { 
        var w = $( window ); 
        var H = w.height(); 
        var W = w.width();
		// #browsable portfolio items div, 950px min screen width, width of #container
		var boxMarginW = ((W-950)/2);
		if (W<=950){ 
			boxMarginW = 0; 
			$('#browsable').css( {width: "950px"} ); 
		} else {
			$('#browsable').css( {width: "100%"} );
		};
        $('#browsable .items').css( {marginLeft: boxMarginW + "px"} );
		// #browsable portfolio items div, 515px min screen height
		var boxMarginH = ((H-780)/2);
		var bodyBGPos = ((H-848)/2 + "px");
		if (boxMarginH <= -85){ boxMarginH = -85; };
		if (bodyBGPos <= 0){ bodyBGPos = 0 };
        $('#browsable').css( {marginTop: boxMarginH + "px"} ); 
		$('body').css( {backgroundPosition: "0 " + bodyBGPos} ); 
		// #container height
		var containerH = (H + "px");  
		if (H<=590) { 
			containerH = ("590px");
			$('.navi-wrapper').hide();
		} else {
			$('.navi-wrapper').show(); 
		};
        $('#container').css( {height: containerH} ); 		
		// #left-arrow #right-arrow 50% of screen height, minus arrow height, 
		// unless narrow screen, then put at bottom in menu
		var arrowMargin = ((H-64)/2 + "px");
		var navWidth = (W-128);
		if (W<=950) {
			$('#menu').css({right:"64px", marginLeft: "64px"}); 
			$('#logo').css({left:"66px"}); 
			// animate in and highlight #right-arrow #left-arrow
			$("#right-arrow").animate({right:"0"}, "slow");
			$("#left-arrow").animate({left:"0"}, "slow");
			$("#nav1").css({marginRight:"0"});
			$("#nav4").css({marginRight:"0"});
			$("#nav8").css({marginRight:"0"});
			$('#left-arrow').css( {top: "auto", bottom:"0%"}); 
			$('#right-arrow').css( {top: "auto", bottom:"0%"});
			$('#nav').css({bottom:"0%"}); 
			$('#browsable').css( {width: "950px"} );
			$('#large-bike').css( {width: "950px"} );
		} 
		else {
			$('#left-arrow').css( {top: arrowMargin} ); 
			$('#right-arrow').css( {top: arrowMargin} );
			// animate in and highlight #right-arrow #left-arrow
			$("#right-arrow").animate({right:"0"}, "slow");
			$("#left-arrow").animate({left:"0"}, "slow");
		};
		if (W<=790) {  // too narrow to fit menu and logo
			$('#logo').css({marginTop: "36px"}); 
			$('.items div.item').css({marginRight: "0px", marginLeft: "0px"});
			$('.item .bottle').css({marginLeft:((W-400)/2) + "px",textAlign:"left",width:"auto"});
			$('.website .img').css({marginLeft:"0px"});
			//alert(W);
		};
		if (W<=666) { // too narrow to fit website image
			$('.website .img img').css({width: (W) + "px", height: "auto"});
			$('.website .img').css({width: (W+8) + "px"});
		};
		if (W<=400) { // too narrow to fit menu and arrows (iPhone)
			$('.items div.item').css({marginRight: "-50px", marginLeft: "0px"});
			$('#left-arrow').css( {top: "0", bottom:"auto"}); 
			$('#right-arrow').css( {top: "0", bottom:"auto"});
			$('#menu').css({right:"auto", left: "0px", marginLeft: "0px"}); 
			$('#logo').css({left:"2px"}); 
			$('.item .logo').css({marginLeft: ((W-298)/2) + "px"}); 
			$('.item .bottle').css({marginLeft:"0px", marginRight:"-15px",textAlign:"left",width:"auto"}); 
			$('.item .bottle img.second-bottle').css({display: "none" }); 
			$('.item .col').css({marginLeft:"16px"});			
		};
		if (H<=500) { // too shallow to fit website (iPhone)
			$('.website .img').css({marginTop: ((H-105)/2) + "px", height: ((W*0.66)+24) + "px"});
			$('.item .bottle img').css({height: (H+(H/12.5)) + "px", width: "auto"});
		};
		// Set #bike position from previous page
		if (bikePosNew < bikePos){		
			$("#bike").attr({ src: "images/Bike2.png" });
		}
		if (boxMarginH <= -85){ $("#bike").css( {width: "0px"}); }
		$("#bike").animate( {left: bikePos}, 0 );

		//alert(bikePos);				 
    } 
    $( window ).wresize( content_resize ); 
    content_resize();
} );



$(document).ready(function() {	
	
	// Add prev page bikePos value to #menu a href
	$("#menu ul li a").click(function(){ 
		var currentHref = $(this).attr('href')
		var newHref = currentHref + "?bikePos=" + bikePosNew
		$(this).attr('href', newHref)
	});
	$("#menu ul li a").hover(function () {
    	$(this).animate({paddingTop:"33px", paddingBottom:"20px"}, 100);
  		}, function () {
    	$(this).animate({paddingTop:"38px", paddingBottom:"15px"}, 200);
  		}
	);

	// #bike position for this page
	//$("#bike").animate({left: bikePosNew}, "slow"); // that must be on every page EXCEPT home 
	// - MOVED to separate file - animate-menu-for-each-page-except-home.js
	
	// not used for now... Arrow up/down inside .item
	//$(".arrow-col-down").click(function(){ 
	//	$(this).parents(".item").animate({top: "-700px"},300)
	//});
	//$(".arrow-col-up").click(function(){ 
	//	$(this).parents(".item").animate({top: "0px"},300)
	//});
});