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);
  } 
}

$(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>';
    $('#slides').append(newDiv);
  }
  var preload = new ImagePreloader(slides, {
    complete: function(index, img, link) {
      $(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,
        onStart: function() {
          $(".scroll-bar").slider('disable');
        },
        onCancel: function() {
          $(".scroll-bar").slider('enable');
        },
        onCleanup: function() {
          $(".scroll-bar").slider('enable');
        },
        onClosed: function() {
          $(".scroll-bar").slider('enable');
        }
      });
      $('#slides .slide').eq(index).removeClass('loading').append(a).find('a img').fadeIn(500);
    },
    /*allComplete : function(){
    }*/
  });
  preload.start();
  
  //////////////////////////////
  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();
	});
	
});