// JavaScript Document
$(document).ready(function(){
		$('#history_handle').draggable({axis: 'y', containment:'parent', drag: function() { 
			  var gtop= $('#history_guide').position().top;
			  var htop= $('#history_handle').position().top;
			  var hwrh= $('#hwr').height();
			  var hh= $('#historywr').height();
			  var gh= $('#history_guide').height()-35;
			  var top = htop-gtop;
			  var hratio = top/gh
			  $('#hwr').animate({marginTop:-((hwrh-hh)*hratio)},1);
			}
		 });
// Gloabal variables for mainly counts and positions				   
	  var currentPosition = 0;
	  var currentPositionRows = 0;
	  ck=0;
	  var rows = $('#WRAPPER .arearow');
	  var wrmglft = parseInt($('.contentobject:nth-child(n+2)').css('marginLeft'));
	  var wrmgtop = parseInt( $('.arearow:nth-child(n+2)').css('marginTop') );
	  var wriniposT = parseInt($('#leftright').height());
	  var wriniposL = parseInt($('#updown').width());
	  var slides = $('.arearow:first-of-type .contentobject');
	  var nc = slides.length;
	  var nr = rows.length;
	  var slideWidth = slides.width() + wrmglft;
	  var rowsHeight = rows.outerHeight()+wrmgtop;
// Stash away nav elements
	  $("#tabNav").hide();
	  $("#tabNav .menuWR").hide();
//collapse history contextual navigation
	  $(".story.SPAN.sixthVert ul").css({'max-height' : '28px'});
// Dynamic ids by count base on .arearow (row) and .contentobject (col)
	  $(".arearow").each(		 
		function(i){
			$(this).attr("id" , 'row-'+i)
			childofthis = $(this).find('.contentobject');
			$(childofthis).each(
				function(int){
					addthis = 'col-'+int
					$(this).addClass(addthis);
					}
				);
			int=0;
		   }
		);
// Insert arrow controls in the DOM will show those things visible accoring to manageControls() and manageControlsRows()
	  $('#leftright')
		.prepend('<span class="control COL Left" id="leftControl" title="move one panel left, arrow key works also"></span>')
		.append('<span class="control COL Right" id="rightControl" title="move one panel right, arrow key works also"></span>');
	  $('#updown')
		.prepend('<span class="control ROW UP" id="up" title="move one panel up, arrow key works also"></span>')
		.append('<span class="control ROW DOWN" id="down" title="move one panel down, arrow key works also"></span>');
	  manageControls(currentPosition);	
// On clicking a right or left arrow count is applied limits movement to max count of items in first row, eventuall this should be by each row
	  $('.control.COL')
		.bind('click', function(){
// Determine new position
		currentPosition = $(this).attr('id')=='rightControl' && currentPosition <= nc && $(this).hasClass('BLANK')==false ? currentPosition+1 : currentPosition <= nc && currentPosition != 0 && $(this).hasClass('BLANK')==false ? currentPosition-1 : currentPosition;
	// Hide / show controls
		manageControls(currentPosition);
		// Move .arearow using margin-left
		$('#WRAPPER').animate({'marginLeft' : ((slideWidth)*(-currentPosition))+wriniposL},150);
	  });
	  manageControlsRows(currentPositionRows);
	 // On clicking up or down arrow count is applied limits movement to max count of arearow.	
	  $('.control.ROW')
		.bind('click', function(){
		// Determine new position
		currentPositionRows = $(this).attr('id')=='down' && currentPosition <= nr && $(this).hasClass('BLANK')==false ? currentPositionRows+1 : currentPositionRows <= nr && currentPositionRows != 0 && $(this).hasClass('BLANK')==false ? currentPositionRows-1: currentPositionRows;
		// Hide / show controls
		manageControlsRows(currentPositionRows);
		// Move WRAPPER using margin-top
		$('#WRAPPER').animate({
		'marginTop' : ((rowsHeight)*(-currentPositionRows))+wriniposT},150);
		});
// Navigate with arrow keys
		$(window).unload(function() {
		  ck=0;
		});
		$(document.documentElement).keyup(function (event) {
		  keyindx = [37,100,39,102,38,104,40,98]
		  keyco0 = [37,100];
		  keyco1 = [39,102];
		  keyco2 = [38,104];
		  keyco3 = [40,98]
		  kind = event.keyCode;
		  $.inArray(kind,keyindx) > -1 && ck!=0 ? ck=1 : ck = 0;		
		  mrgltop =parseInt($('#WRAPPER').css('marginTop'));
		  mrgllft =parseInt($('#WRAPPER').css('marginLeft'));
			if (ck != 1 && $.inArray(kind,keyco0) > -1 && currentPosition != 0 && currentPosition <= nc-1 ){ ck=1; currentPosition = currentPosition-1; $('#WRAPPER').animate({ 'marginLeft' : mrgllft+(slideWidth) },150, function(){ck=0;}); manageControls(currentPosition);  };
			if (ck != 1 && $.inArray(kind,keyco2) > -1 && currentPositionRows != 0 && currentPositionRows <=nr-1 ){ck=1; currentPositionRows = currentPositionRows-1;  $('#WRAPPER').animate({ 'marginTop' : mrgltop+rowsHeight },150, function(){ck=0;}); manageControlsRows(currentPositionRows); };
			if (ck != 1 && $.inArray(kind,keyco1) > -1 && currentPosition >= 0 && currentPosition < nc-1 ){ck=1; currentPosition = currentPosition+1; $('#WRAPPER').animate({ 'marginLeft' : mrgllft-(slideWidth) },150, function(){ck=0;}); manageControls(currentPosition);};
			if (ck != 1 && $.inArray(kind,keyco3) > -1 && currentPositionRows >= 0 && currentPositionRows < nr-1){ck=1; currentPositionRows = currentPositionRows+1; $('#WRAPPER').animate({ 'marginTop' : mrgltop-rowsHeight },150, function(){ck=0;}); manageControlsRows(currentPositionRows); };
		});
// On clicking any .menu class item currentPosition and currentPositionRows is set moving *.arearow and #WRAPPER.		  
	  $('.menu')
		.bind('click', function(){
		// Determine new position
		reduceCountColumns = currentPosition - currentPosition;
		reduceCountRows = currentPositionRows - currentPositionRows;
		
		if($(this).attr('class')=='menu weighted LOGO') {
		currentPosition = reduceCountColumns;
		currentPositionRows = reduceCountRows;
		}
		if($(this).attr('class')=='menu fridaybrand') {
		currentPosition = reduceCountColumns;
		currentPositionRows = reduceCountRows+1;
		}
		if($(this).attr('class')=='menu fridaycreative'){
		currentPosition = reduceCountColumns;
		currentPositionRows = reduceCountRows+2;
		}
		if($(this).attr('class')=='menu fridaydev'){
		currentPosition = reduceCountColumns;
		currentPositionRows = reduceCountRows+3;
		}
		if($(this).attr('class')=='menu fridayexhibits'){
		currentPosition = reduceCountColumns;
		currentPositionRows = reduceCountRows+4;
		}
		if($(this).attr('class')=='menu nextShow'){
		currentPosition = reduceCountColumns+2;
		currentPositionRows = reduceCountRows+4;
		};
		// Hide / show controls
		manageControls(currentPosition);
		manageControlsRows(currentPositionRows);
		// Move slideInner using margin-left
		$('#WRAPPER').animate({
		'marginTop' : (wriniposT+(rowsHeight)*(-currentPositionRows)),'marginLeft' : (wriniposL+(slideWidth)*(-currentPosition))
		},650);
	  });
 // manageControls: Hides and Shows controls depending on currentPosition
	function manageControls(position){
	  if(position==0){ $('#leftControl').addClass('BLANK'); } else{ $('#leftControl').removeClass('BLANK');}
	  if(position==nc-1){ $('#rightControl').addClass('BLANK'); } else{ $('#rightControl').removeClass('BLANK');} };
	function manageControlsRows(positionROWS){
	  if(positionROWS==0){ $('#up').addClass('BLANK'); } else{ $('#up').removeClass('BLANK'); }
	  if(positionROWS==nr-1){ $('#down').addClass('BLANK'); } else{ $('#down').removeClass('BLANK'); } };
//Switch the "Open" and "Close" state per click
	$("#tabRight").toggle(function(){
		$(this).css("background-image","url(public/images/tabClose_off.png)");
		$("#tabNav").animate({ height : '285px'},450, function(){$('.menuwr').addClass('active'); });
		}, function () {
		$(this).css("background-image","url(public/images/tabOpen_off.png)");
		$('.menuwr').removeClass('active');
		$("#tabNav").animate({ height : ''},450);
	});
});