var $j = jQuery.noConflict();
var viewSize = 5;
var imageSize = 100;
var transitionSize = viewSize;
var totalImages;
var thumbMargin = 0;
var wait = 0;

$j(function() {
  totalImages = $j('#imageBoxInside').children().length;  
  handleControls();
  //$j('#currentImage > img').attr("src", $('#imageBoxInside > a').attr("href"));
  $j('#imageBox').css('width', Math.floor((imageSize + thumbMargin) * viewSize)-thumbMargin);  
  $j("#imageBoxInside").css({height: imageSize, width: Math.floor((imageSize+ thumbMargin) * totalImages), left : "0px"});
  $j('#imageBoxInside:Last-Child').css("margin-right", "none");
  

  $j($j('#imageBoxInside')[0].childNodes ).each(function() {if ( this.nodeType == 3 ) $j(this).remove();});
  
  $j("#imageBoxInside a").each(function() {
    var thumb = $j(this).find("img").attr("src");
	  //console.log(thumb);
    $j(this).css({width : imageSize, height: imageSize, paddingRight: thumbMargin});
    $j(this).empty();
    $j(this).append("<div />");    
    $j(this).attr("href","#" + $j(this).attr("href"));
    $j(this).find("div").css({width: imageSize, height: imageSize, background: "url(\"" + thumb + "\") center no-repeat"});
	
  });

  $j('#imageBoxInside a').click(function() {if (wait == 0) changeImage(this.href.split("#")[1])});

  $j("#control-previous").click(function () {
    if (wait == 0 && parseInt($j('#imageBoxInside').css('left')) < 0) {
      wait = 1;
      var t = (imageIndex() < transitionSize)? imageIndex() : transitionSize;
      var sLeft = parseInt($j("#imageBoxInside").css("left")) + ((imageSize + thumbMargin) * t);
      $j("#imageBoxInside").animate({left: sLeft}, 'slow',function() {wait = 0;handleControls();});   
    };
  });
  
  $j("#control-next").click(function () {
    if (wait == 0 && parseInt($j('#imageBoxInside').css("left")) > -(((imageSize + thumbMargin) * totalImages) - ((imageSize + thumbMargin) * viewSize))) { 
      wait = 1;
      var t = ((totalImages - (imageIndex() +  viewSize)) >= viewSize)? transitionSize : totalImages - (imageIndex() +  viewSize);
      var sLeft = parseInt($j("#imageBoxInside").css("left")) - ((imageSize + thumbMargin) * t);
      $j("#imageBoxInside").animate({left: sLeft }, 'slow' ,function() {wait = 0;handleControls()});  
    };
  });
/*--*/
});

function imageIndex() {
  var left = ($j("#imageBoxInside").css("left"))? $j("#imageBoxInside").css("left").replace(/[-, px]/g,"") : 0; // purely for opera.
  return Math.round(left / (imageSize + thumbMargin));
};

function handleControls() {
  var pos = imageIndex();
  if (pos == 0) $j("#control-previous").addClass("disabled-control")
    else $j("#control-previous").removeClass("disabled-control");
  if (pos >= (totalImages - viewSize)) $j("#control-next").addClass("disabled-control");
    else $j("#control-next").removeClass("disabled-control");
};

function showOverlay() {
  var that = $j('#currentImage > img')[0];
  $j('.loading').css({
    top : getPos(that).y,
	left : getPos(that).x,
	width: that.clientWidth,
	height: that.clientHeight
  });
  $j('.loading').show();  
  $j('#currentImage img').css('opacity', '.5');
};

function hideOverlay() {
  $j('#currentImage img').css('opacity', '1');
  $j('.loading').hide(); 
};

function changeImage(url) {
  wait = 1;
  showOverlay();
  var imgBuffer = new Image();
  imgBuffer.src = url;
  var imageLoader = setInterval(function() {
    if( imgBuffer.complete && imgBuffer.height > 0 && imgBuffer.width > 0 ) {
      $j('#currentImage img').fadeOut('slow', function() {   
        $j('#currentImage > img').attr('src', imgBuffer.src);
        $j('#currentImage img').fadeIn('slow', function () {
          hideOverlay();
          wait = 0;
        });
      }); 	   
      clearInterval(imageLoader);
     };
  }, 1000);
};

function getPos( el ) {
  var r = {x : 0, y : 0};
  while( el != null ) {
    r.x += el.offsetLeft;
    r.y += el.offsetTop;
    el = el.offsetParent;
  }
  return r;
};