//EDIT THIS NUMBER
var panelsCount = 46;

var theImage = 'image1';
var selectedImage = '';
var i = 1;
var sideNav = '';
var theStyle = '<style>';
var smallScreen = false;
var ieCss = '';
var hidden = '';
$(document).ready(function(){
  

if($(window).height()<845){
	smallScreen=true;
	$("link:first").attr("href",'smallscreen.css');
}

for (i=1;i<=panelsCount;i++)
{

		hidden = hidden + '<div class="image'+i+'"></div>';
	

}
$('#hidden').append(hidden);

i = 0;

$('li:last').css('margin', '0');
$('li:last').css('padding', '0');

for (i=1;i<=panelsCount;i++)
{
	if(smallScreen==false){
		sideNav = sideNav + '<div><img rel="image'+i+'" src="images/big/thumb/'+i+'.jpg" /></div>';
	}else{
		sideNav = sideNav + '<div><img rel="image'+i+'" src="images/small/thumb/'+i+'.jpg" /></div>';
	}

}

i=0;

for (i=1;i<=panelsCount;i++)
{
	if(smallScreen==false){
		theStyle = theStyle + '.image'+i+'{background: url(images/big/full/'+i+'.jpg) no-repeat;}';
	}else{
		theStyle = theStyle + '.image'+i+'{background: url(images/small/full/'+i+'.jpg) no-repeat;}';
	}

}
theStyle = theStyle + '</style>';

$('head').append(theStyle);
if(smallScreen==false){
	ieCss = '<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->';
}else{
	ieCss = '<!--[if IE 8]> <link rel="stylesheet" type="text/css" href="iesmall.css" /><![endif]-->';
}
$('head').append(ieCss);

$('.scrollContainer').prepend(sideNav);
$('.scrollContainer img').click(function (){
	theImage = $(this).attr("rel");
	$('#content').fadeOut('fast', function (){
		$('#content').removeClass().addClass(theImage).fadeIn('fast');
	});
	
});

var $scroll = $('.scroll').css('overflow', 'hidden');

if(smallScreen==false){
$scroll
  .before('<div class="uparrow"><a class="up" href="#"><img src="images/big/layout/uparrow.png" /></a></div>')
  .after('<div class="downarrow"><a class="down" href="#"><img src="images/big/layout/downarrow.png" /></a></div>');
}else{
	$scroll
	  .before('<div class="uparrow"><a class="up" href="#"><img src="images/small/layout/uparrow.png" /></a></div>')
	  .after('<div class="downarrow"><a class="down" href="#"><img src="images/small/layout/downarrow.png" /></a></div>');
}

var $panels = $('.scrollContainer > div');
var $container = $('.scrollContainer');


var horizontal = true;

// float the panels left if we're going horizontal
if (horizontal) {
  $panels.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });

  // calculate a new height for the container (so it holds all panels)


$container.css('height', $panels[0].offsetHeight * $panels.length);
}





// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset.  Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ? 
  $container.css('paddingTop') : 
  $container.css('paddingLeft')) 
  || 0) * -1;


var scrollOptions = {
  target: $scroll, // the element that has the overflow

  // can be a selector which will be relative to the target
  items: $panels,
cycle: false,
margin:true,

  navigation: '.navigation a',

  // selectors are NOT relative to document, i.e. make sure they're unique
  prev: 'a.up', 
  next: 'a.down',

  // allow the scroll effect to run both directions
  axis: 'y',

  //onAfter: trigger, // our final callback

  offset: offset,
exclude:6,

  // duration of the sliding effect
  duration: 500,

  // easing - can be used with the easing plugin: 
  // http://gsgd.co.uk/sandbox/jquery/easing/
  easing: 'linear'
};

// apply serialScroll to the slider - we chose this plugin because it 
// supports// the indexed next and previous scroll along with hooking 
// in to our navigation.
$('#right').serialScroll(scrollOptions);


scrollOptions.duration = 1;

function selectNav() {
 
}

function trigger(data) {
  var el = $('.navigation').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
}


});

$(document).keydown(function(e){
    if (e.keyCode == 38) { 
       $('a.up').click();
       return false;
    }

	if (e.keyCode == 40) { 
       $('a.down').click();
       return false;
    }

//right arrow
	if (e.keyCode == 39) { 
		//count the number of panels we'll need to scroll through
		var panelsCount = $('.scrollContainer > div').length;
		selectedImage = theImage.replace(/image/g,'');
		//if the panel currently showing is less than the number of panels, add one to the number
		if(selectedImage<panelsCount){
			selectedImage=parseInt(selectedImage)+1;
		}else{
			//otherwise reset the number to one
			selectedImage=1;
		}
			theImage = 'image'+selectedImage;
			$('#content').fadeOut('fast', function (){
				$('#content').removeClass().addClass(theImage).fadeIn('fast');
			});
		
       
       return false;
    }

	//left arrow
		if (e.keyCode == 37) { 
			//count the number of panels we'll need to scroll through
			var panelsCount = $('.scrollContainer > div').length;
			selectedImage = theImage.replace(/image/g,'');
			//if the panel currently showing is greater than one, subtract one
			if(selectedImage>1){
				selectedImage=parseInt(selectedImage)-1;
			}else{
				//otherwise reset the number to the number of panels - the highest number
				selectedImage=panelsCount;
			}
				theImage = 'image'+selectedImage;
				$('#content').fadeOut('fast', function (){
					$('#content').removeClass().addClass(theImage).fadeIn('fast');
				});


	       return false;
	    }

});