// page init
jQuery(function() {
	initPopups();
	initScroll();
})

// scroll init
function initScroll() {
	var animSpeed = 500;
	var holders = jQuery('.scroller');
	var body = jQuery.browser.webkit ? body = jQuery('body') : body = jQuery('html');
	holders.each(function() {
		var holder = jQuery(this);
		var scrollHolder = holder.find('.scroller-holder');
		var scroller = holder.find('.gallery');
		var items = scroller.find('li');
		var btnNext = holder.find('.next');
		var btnPrev = holder.find('.prev');
		var btnFirst = holder.find('.first');
		var posLeft = parseInt(holder.find('#content').css('left'));
		var scrollerW = 0;
		var index = 0;
		var animating  = false;
		var maxIndex, maxScroll;
		var size = items.length;
		var itemW = items.eq(0).outerWidth(true);
		scroller.width(size * itemW);
		function switchSlide() {
			if(!animating) {
				animating = true;
				var scrollVal = itemW * index;
				if (scrollVal > maxScroll) {
					scrollVal = maxScroll;
				}
				body.animate({scrollLeft: scrollVal}, {
					duration: animSpeed,
					complete: function() {
						animating = false;
					}
				});
			}
		}
		btnNext.click(function() {
			if(index == maxIndex) index = 0;
			else index++;
			switchSlide();
			return false;
		})
		btnPrev.click(function() {
			if(index == 0) index = maxIndex;
			else index--;
			switchSlide();
			return false;
		})
		btnFirst.click(function() {
			index = 0;
			switchSlide();
			return false;
		})
		
		function calcMaxIndex() {
			maxScroll = (scroller.width() - body.width() + posLeft);
			maxIndex = Math.ceil(maxScroll / itemW);
		}
		calcMaxIndex();
		jQuery(window).resize(calcMaxIndex);
	})
}

// popups init
function initPopups() {
 var thumbs = jQuery('.img-list li');
 var body = jQuery('body');
 var win = jQuery(window);
 var k = 4;
 var winW, winH;
 thumbs.each(function() {
  var thumb = jQuery(this);
  var t;
  var popup = jQuery('<div class="popup" />');
  var content = thumb.html();
  thumb.append(popup);
  
  thumb.bind('mouseover', function() {
   popup.html(content);
   body.find('.popup').hide();
   var img = popup.find('img');
   img.css({width: img.width() * k, height: img.height('auto')});
   
   var posLeft = thumb.offset().left - (popup.width() - thumb.width()) / 2;
   var posTop = thumb.offset().top - (popup.height() - thumb.height()) / 2;
   
   if(posLeft < 0 ) posLeft = 0;
   if(posLeft + popup.width() > winW ) posLeft = winW - popup.width();
   if(posTop < 0 ) posTop = 0;
   if(posTop + popup.height > winH ) posTop = winH - popup.height();
   body.append(popup);
   popup.css({left: posLeft, top: posTop}).show();
  })
  .bind('mouseleave', function() {
   t = setTimeout(hidePopup, 1);
   body.find('.popup').not(popup).hide();
  })
  popup.mousemove(function(e) {
   if(t) clearTimeout(t);
   if(e.pageX < thumb.offset().left || e.pageX > thumb.offset().left + thumb.width() || e.pageY < thumb.offset().top || e.pageY > thumb.offset().top + thumb.height()) {
    body.find('.popup').not(popup).hide();
    hidePopup();
   }
  })
  function hidePopup() {
   popup.empty().hide();
   thumb.append(popup);
  }
 })
 function getWindowSize() {
  winW = win.width();
  winH = win.height();
 }
 win.resize(getWindowSize);
 getWindowSize();
}