function ImagePreloader(arr, opts) {
  var o = this;
  this.images = arr;
  var _queue = arr.slice(0); //copy the array for the queue
  var _opts = {
    maxReqs: 4,
    complete: null,
    allComplete: null
  };
  var opts = $.extend({}, _opts, opts);
  var loadCount = 0;
  this.start  = function() {
    for (var i in _queue) {
      _queue[i].index = i;
    }
    for (var i = 0; i < opts.maxReqs; i++) {
      loadImage(_queue.shift());
    }
  }
  function loadImage(nxtImg) {
    nxtImg = nxtImg;
    var img = new Image();
    var fullSizeSrc = nxtImg.src.split('/');
    fullSizeSrc.splice(fullSizeSrc.length - 1, 0, 'fullsize');
    fullSizeSrc = fullSizeSrc.join('/');
    var link = '<a href="' + fullSizeSrc + '"></a>';
    
    $(img).load(function(){
      if (_queue.length) {
        loadImage(_queue.shift());
      }
      if (typeof(opts.complete) == 'function') {
        opts.complete(nxtImg.index, img, link);
      }
      loadCount++;
      if (loadCount == o.images.length){
        if (typeof(opts.allComplete) == 'function') {
         opts.allComplete();
        }
        //console.log('load complete');
      }
    }).attr('src', nxtImg.src).attr('rel', fullSizeSrc).attr('alt', nxtImg.caption);
  } 
}

$(document).ready(function(){
  for (var i in slides) {
    var newDiv = '<div style="width: '+ slides[i].scaleX +'px; height: '+ slides[i].scaleY +'px" class="slide loading">\
		<div class="caption">\
			<div class="caption_overlay" style="width: '+ slides[i].scaleX +'px;"></div>\
			<p class="caption_text" style="width: '+ (slides[i].scaleX - 36) +'px;"></p>\
		</div>\
	</div>';
    $('#slides').append(newDiv);
  }
  var preload = new ImagePreloader(slides, {
    complete: function(index, img, link) {
		var $img = $(img),
			caption = $(img).attr('alt');
			
		$img.css({
			'width' : slides[index].scaleX + 'px',
			'height' : slides[index].scaleY + 'px',
			'display' : 'none'
		});
		
      //$(img).css('width', slides[index].scaleX + 'px').css('height', slides[index].scaleY + 'px').css('display', 'none');
	  
      var a = $(link).append(img).fancybox({
        overlayShow: true,
        overlayOpacity: 0,
        transitionIn: 'elastic',
        transitionOut: 'elastic',
        hideOnContentClick: true,
        showCloseButton: false,
		titleShow : false,
        onStart: function() {
          $(".scroll-bar").slider('disable');
        },
        onCancel: function() {
          $(".scroll-bar").slider('enable');
        },
        onCleanup: function() {
          $(".scroll-bar").slider('enable');
        },
        onClosed: function() {
          $(".scroll-bar").slider('enable');
        }
      }).hover(
	  	function() {
			$(this).parents('.slide').find('div.caption').css('visibility', 'visible');
		},
		function() {
			$(this).parents('.slide').find('div.caption').css('visibility', 'hidden');
		}
	  );
	  
	  var $slide = $('#slides .slide').eq(index).removeClass('loading');
	  
	  // Caption stuff
	  if (caption != '') {
		  // Set the caption text
		  var $captionText = $('.caption_text', $slide).html(caption);
		  
		  // Setup the overlay
		  $('.caption_overlay', $slide).css({
			  'opacity' : 0.50,
			  'height' : $captionText.outerHeight()
		  });
	  }
	  
	  // Add the image
	  $slide.append(a).find('a img').fadeIn(500);
    },
    /*allComplete : function(){
    }*/
  });
  preload.start();
  
  $('div.caption').hover(
	function() {
		$(this).css('visibility', 'visible');
	},
	function() {
		$(this).css('visibility', 'hidden');
	}
  );
  
  //////////////////////////////
  var contentWidth = 0;
  $('.scroll-content').children('div').filter(":last").css('margin-right', '0px');
  $('.scroll-content').children('div').each(function(){
    contentWidth += $(this).outerWidth(true);
  });
  $('.scroll-content').width(contentWidth+2);
  
  //$('#log').append('<p>Scroll content width:'+contentWidth);
 	
 	//scrollpane parts
	var scrollPane = $('.scroll-pane');
	var scrollContent = $('.scroll-content');
  scrollPane.css('overflow', 'hidden');
	//build slider
	var scrollbar = $(".scroll-bar").slider({
		slide:function(e, ui){
		  var newMargin = 0;
			if ( scrollContent.width() > scrollPane.width()) { 
			  newMargin = Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px';
			}
			scrollContent.stop().animate({'margin-left': newMargin });
		},
		change: function(e, ui) {
		  var newMargin = 0;
			if ( scrollContent.width() > scrollPane.width()) { 
			  newMargin = Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px';
			}
			scrollContent.stop().animate({'margin-left': newMargin });
			//console.log(ui);
		},
		animate: true
	});
	scrollPane.find('.ui-slider-handle:eq(0)').wrap('<div class="ui-handle-helper-parent"></div>');
	var handleHelper = scrollPane.find('.ui-handle-helper-parent:eq(0)');
	function sizeScrollbar() {
	  handleHelper.width(handleHelper.parent().width()).width(handleHelper.width() - scrollbar.find('.ui-slider-handle').width());
    var val = $('.scroll-bar').slider('value');
    $('.scroll-bar').slider('value', val);
	}
	sizeScrollbar();
	$(window).resize(function(){
	  sizeScrollbar();
	});
	
});