// when the DOM is ready...
$(document).ready(function () {	
	if($('div.gallery').length > 0){		
		$('#slider .panel:last').after('<div class="panel last"><img width="700" /><p></p></div>');
		var $panels = $('#slider .scroll-container > div.panel');
		$pcount = ($panels.length) - 1;

		// if false, we'll float all the panels left and fix the width 
		// of the container
		var horizontal = true;

		// collect the scroll object, at the same time apply the hidden overflow
		// to remove the default scrollbars that will appear
		var $scroll = $('#slider .scroll').css('overflow', 'hidden');

		// apply our left + right buttons
		if($pcount > 1){
			$('#slide-navigation').css('display','block');
			$('#slide-navigation').append('<span id="count"><em>1</em> of '+$pcount+'</span>');
		}

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

			var $container = $('#slider .scroll-container');
			var $images = $('#slider .panel:not(.grid) img');
			var $captions = $('#slider .panel .caption');
					
		  // calculate a new width for the container (so it holds all panels)
			var accumulated_length = 0;
			for (var i=0; i < $panels.length; i++) {
				$panels[i].id = 'panel_'+i;
				var panel_width = $panels[i].offsetWidth;	
				accumulated_length += $panels[i].offsetWidth;
			};		
		  $container.css('width', accumulated_length);

			// wrap each image in a dark background for the effect of placeholders
			$images.wrap('<div class="image_holder"></div>');

			var $image_holders = $('div.image_holder');
			$image_holders.each(function(i){
				$(this).click(function(){
					$scroll.trigger('next');
				});
				$(this).mouseover(function(){
					$('#next').addClass('on');
					$(this).addClass('on');
				});
				$(this).mouseout(function(){
					$('#next').removeClass('on');
					$(this).removeClass('on');					
				});
				// Force the image holder and the caption to be the right size (IE needs to be forced into being 80% for caption)
				var im = $(this).children('img').get(0);				
				$(this).css('width',im.offsetWidth);
				var cap = $(this).parent(0).children('p').get(0);
				var eightypercent = (im.offsetWidth/10)*8;
				$(cap).css('width',eightypercent);
			});
			
			$images.click(function(){
				$scroll.trigger('next');
			});
			
			// Show first image show placeholders for the rest
			$images.each(function(i){
				if(i==0){
					$(this).fadeIn('slow');			
				} else {
					$(this).css('display','none');
				}
			});
			
			// Show the first caption hide the rest
			$captions.each(function(i){
				if(i==0){
					$(this).fadeIn('slow');
				} else {
					$(this).css("display",'none');				
				}
			});				
			
			// Setup grid navigation
			$grids = $('#grid ul img');
			$grids.each(function(i){
				$(this).click(function(){
					var go = i+1;
					$scroll.trigger('goto',[ go ]);
					$grids.fadeOut('fast');
				});
				$(this).mouseover(function(){
					$(this).fadeTo("fast", 0.5);
				});
				$(this).mouseout(function(){
					$(this).fadeTo("fast", 1);
				});				
			});
		}
		
		// Check to see if second image is completely available before beginning
		it = 0;
		function isComplete(){
			if($images[2].complete || $images[2].complete == undefined || it == 200){				
				$('#slide-navigation').removeClass('loading');
				clearInterval(com);
			} else {
				it += 1;
			}
		};
		com = setInterval(isComplete,10);

		
		$('#back').click(function(){
			$scroll.trigger('goto',[ 0 ]);
		});

		// go find the navigation link that has this target and select the nav
		function trigger(data) {
			// Remove loading graphic from first slide
			var initial = $('div.initial_load').removeClass('initial_load');
			
			// get the current image and caption
			var img = $(data).find('img').get();
			var cap = $(data).find('p').get(0);
			var cur = $(img).closest("div.panel").get(0).id.replace('panel_','');
			if(cur == 0){
				var title = $(data).find('h1').get(0);
			}

			// find the previous and next image and captions
			var prev = $(data).prev()[0];
			
			if(prev == undefined){
				$('#previous').addClass('pend');
				$('#back').addClass('bend')
			} else {
				$('#previous').removeClass('pend');
				$('#back').removeClass('bend')				
			}
			var prev_img = $(prev).find('img').get();
			var prev_cap = $(prev).find('p').get(0);
			var prev_title = $(prev).find('h1').get(0);
			
			var next = $(data).next()[0];			
			if(next == undefined || next.className.search(/last/) != -1){
				$('#next').addClass('nend');
			} else {
				$('#next').removeClass('nend');
			}			
			var next_img = $(next).find('img').get(0);
			var next_cap = $(next).find('p').get(0);
			
			// change number
			$('#count em').html(parseInt(cur)+1);
						
			// fade them out
			if(prev_title != undefined){
				$(prev_title).fadeOut('fast');
			}
			if(prev_img != undefined){
				$(prev_img).fadeOut('fast');	
			}
			$(prev_cap).fadeOut('fast');
			$(next_img).fadeOut('fast');
			$(next_cap).fadeOut('fast');
			
			// fade in current image and caption			
			$(img).fadeIn('slow');
			$(cap).fadeIn('slow');
			if(title != undefined){
				$(title).fadeIn('slow');
			}
		}

		// 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,

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

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

		  onAfter: trigger, // our final callback			
			
		  offset: offset,

		  // duration of the sliding effect
		  duration: 500,
		
			exclude: 1,

		  // easing - can be used with the easing plugin: 
		  // http://gsgd.co.uk/sandbox/jquery/easing/
		  easing: 'swing',
		
			cycle: false,
			
			constant: false
		};

		// 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.
		$('#slider').serialScroll(scrollOptions);

		// now apply localScroll to hook any other arbitrary links to trigger 
		// the effect
		// $.localScroll(scrollOptions);

		// finally, if the URL has a hash, move the slider in to position, 
		// setting the duration to 1 because I don't want it to scroll in the
		// very first page load.  We don't always need this, but it ensures
		// the positioning is absolutely spot on when the pages loads.
		// scrollOptions.duration = 1;
		// $.localScroll.hash(scrollOptions);
	}
});

// Cross browser get window dimensions
function getSize(which) {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return (which=='height' ? myHeight : myWidth);
};

// Stop page going off the top of the screen when resized
function topBlocker(){
	var h = getSize('height');
	var wr = document.getElementById('wrapper');
	if(h <= 635){
		wr.className = 'halt';
	} else {
		wr.className = '';
	}
};


// Window & Loading Events
window.onresize = function(){
	topBlocker();
};

$(document).ready(function () {	
	topBlocker();
})