/**
   * Note that we have to use window.onload because $(document).ready() fires before images are loaded
   * and ul.innerWidth() - container.outerWidth(); doesn't give the correct width because the width
   * of the UL hasn't expanded out until the images have finished rendering.
   */
  window.onload = function () {
      var container = $('div.sliderGallery');
      var ul = $('ul', container);
var handle = $('.handle');
      
      var itemsWidth = ul.innerWidth() - container.outerWidth();
      
// Remove a terminating '#' off the location window 
if(/\#$/.test(window.location.href)) {
	window.location.href = window.location.href.replace(/\#$/,'');
}

// History
historyRegexp = /\#.*/;
if(historyRegexp.test(window.location.href)) {
	historyImg = window.location.href.match(historyRegexp)[0].replace(/\#/,"");
	$('div#content').image(historyImg);
} else {
	// Make sure the thumbnail navigation is on the page
	if($('#thumbnail_01')[0]) {
		defaultImage = $('#thumbnail_01')[0].parentNode.href.match(historyRegexp)[0].replace(/\#/,"");
		$('div#content').image(defaultImage);	
	}
}

      $('.slider', container).slider({
          min: 0,
          max: itemsWidth,
          handle: '.handle',
          stop: function (event, ui) {
              ul.animate({'left' : ui.value * -1}, 500);
		thumbnailRibbonValue = ui.value*-1;
		handleValue = ui.value*-1;
          },
          slide: function (event, ui) {
              ul.css('left', ui.value * -1);
          }
      });


ul.value = 0;
handle.value = 0;
thumbnailRibbonValue = ul.value;
handleValue = handle.value;
stepValue = 105; //in px
steps = Math.ceil(itemsWidth / stepValue);
handleStepValue = Math.floor(container.outerWidth() / steps);
// console.log("handleStepValue = " + handleStepValue);

$('.thumbnail_left').click(function(){
	// console.log("handleValue = "+handleValue);
	if((thumbnailRibbonValue + stepValue) < 0) {
		thumbnailRibbonValue = thumbnailRibbonValue + stepValue;
		handleValue = handleValue + handleStepValue;
	} else {
		thumbnailRibbonValue = 0;
		// console.log("R\tthandleValue = "+handleValue+" + ("+0+" + "+handleValue+");");
		handleValue = 0;
	}
	// console.log("R\tthumbnailRibbonValue: " + thumbnailRibbonValue + "\thandleValue: "+handleValue);
	ul.animate({'left' : ul.value + thumbnailRibbonValue}, 500);
	handle.animate({'left' : handle.value - handleValue}, 500);
});

$('.thumbnail_right').click(function(){
	if((thumbnailRibbonValue - stepValue)*-1 < itemsWidth) {
		thumbnailRibbonValue = thumbnailRibbonValue - stepValue;
		handleValue = handleValue - handleStepValue;
	} else {
		thumbnailRibbonValue = thumbnailRibbonValue - (itemsWidth + thumbnailRibbonValue);
		// console.log("L\thandleValue = "+handleValue+" - ("+itemsWidth+" + "+handleValue+");");
		handleValue = handleValue - (container.outerWidth() + handleValue - handle.outerWidth());
	}
	// console.log("L\tthumbnailRibbonValue: " + thumbnailRibbonValue + "\thandleValue: "+handleValue);
	ul.animate({'left' : ul.value + thumbnailRibbonValue}, 500);
	handle.animate({'left' : handle.value - handleValue}, 500);
});

$('.image_left').click(function(){
	currentImgNumber = $('#the_image')[0].src.match(/[0-9][0-9]/)[0]
	nextImgNumber = parseFloat(Math.floor(currentImgNumber)) - 1;
	// console.log("nextImgNumber = " + nextImgNumber);
	if(nextImgNumber < 10) {
		nextImgNumber = "0" + nextImgNumber;
		// console.log("nextImgNumber = " + nextImgNumber);
	}
	if($('#thumbnail_'+nextImgNumber)[0]){
		nextImg = $('#thumbnail_'+nextImgNumber)[0].parentNode.href.replace(/\#/,"");
		// console.log("nextImg = " + nextImg);
		$('div#content').image(nextImg);
		$('.image_left')[0].href = $('#thumbnail_'+nextImgNumber)[0].parentNode.href;
	} else {
		nextImg = null;
		// console.log("null");
	}
});

$('.image_right').click(function(){
	currentImgNumber = $('#the_image')[0].src.match(/[0-9][0-9]/)[0];
	// console.log("currentImgNumber = " + currentImgNumber);
	nextImgNumber = parseFloat(Math.floor(currentImgNumber)) + 1;
	// console.log("nextImgNumber = " + nextImgNumber);
	if(nextImgNumber < 10) {
		nextImgNumber = "0" + nextImgNumber;
		// console.log("nextImgNumber = " + nextImgNumber);
	}
	if($('#thumbnail_'+nextImgNumber)[0]){
		nextImg = $('#thumbnail_'+nextImgNumber)[0].parentNode.href.replace(/\#/,"");
		// console.log("nextImg = " + nextImg);
		$('div#content').image(nextImg);
		$('.image_right')[0].href = $('#thumbnail_'+nextImgNumber)[0].parentNode.href;
	} else {
		nextImg = null;
		// console.log("null");
	}
});
  };


$.fn.image = function(src){
	return this.each(function(){
		el = $('#the_image')[0];
		if(el) {
			el.parentNode.removeChild(el);
		}
		var i = new Image();
		i.src = src;
		i.setAttribute("id", "the_image");
		this.appendChild(i);
	});
}