var slide = {
   active: false,
   $play: false,
   $pause: false,
   index: 0,
   $items: false,
   init: function(){
      slide.$items = $('#feat').find('.st_thumbs img');
      if (slide.$items.length == 0){
         $('#slide').hide();
         return;
      }
      slide.$play = $('#play');
      slide.$pause = $('#pause');
      slide.$play.bind('click', function(){ slide.start(); });
      slide.$pause.bind('click',function(){ slide.stop(); });
      var tmp, rand;
      for(var i =0; i < slide.$items.length; i++){
        rand = Math.floor(Math.random() * slide.$items.length);
        tmp = slide.$items[i]; 
        slide.$items[i] = slide.$items[rand]; 
        slide.$items[rand] =tmp;
      }
   },
   start: function(){
      slide.active = true;
      slide.$play.hide();
      slide.$pause.show();
      setTimeout(slide.next, 1000);
   },
   stop: function(){
      slide.active = false;
      slide.$pause.hide();
      slide.$play.show();
   },
   next: function(){
      if (!slide.active) {return;}
      $(slide.$items[slide.index]).click();
      slide.index++;
      if (slide.index >= slide.$items.length)
         slide.index = 0;
      setTimeout(slide.next, 7000);
   }
}

$(function() {
//the loading image
var $loader		= $('#st_loading');
//the ul element
var $list		= $('#st_nav');
//the current image being shown
var $currImage 	= $('#st_main').children('img:first');

//let's load the current image
//and just then display the navigation menu
$('<img>').load(function(){
$loader.hide();
$currImage.fadeIn(3000);
//slide out the menu
setTimeout(function(){
$list.animate({'left':'0px'},500);
},
1000);
}).attr('src',$currImage.attr('src'));

slide.init();

//calculates the width of the div element
//where the thumbs are going to be displayed
buildThumbs();

function buildThumbs(){
$list.children('li.album').each(function(){
var $elem 			= $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs 		= $thumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
// each vertical image has a assumed width of 80 (because height is 120)
var vlImgCnt      = $thumbs.find('img.vl').length;
var finalW 			= ($thumbs.find('img').length - vlImgCnt) * 183 + vlImgCnt * 83;

$thumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollable($thumbs_wrapper,$thumbs);
});
}

//clicking on the menu items (up and down arrow)
//makes the thumbs div appear, and hides the current
//opened menu (if any)
$list.find('.st_arrow_down').live('click',function(){
var $this = $(this);
hideThumbs();
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var $elem = $this.closest('li');
$elem.addClass('current').animate({'height':'170px'},200);
var $thumbs_wrapper = $this.parent().next();
$thumbs_wrapper.show(200);
initTN($thumbs_wrapper, $('#feat_info'));
});
$list.find('.st_arrow_up').live('click',function(){
var $this = $(this);
$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});

//clicking on a thumb, replaces the large image
$list.find('.st_thumbs img').bind('click',function(){
var $this = $(this);
var isLandscape = $this.hasClass('vl');
$loader.show();
$('<img class="st_preview"/>').load(function(){
var $this = $(this);
var $currImage = $('#st_main').children('img:first');
$currImage.siblings('.st_preview').each(function(){
   $(this).remove();
});
if (isLandscape){
  $this.insertBefore($currImage);
  $loader.hide();
  $currImage.fadeOut(2000,function(){
  $(this).remove();
});
}
else{
  $this.hide();
  $this.insertAfter($currImage);
  $loader.hide();
  $this.fadeIn(2000,function(){
  $currImage.remove();
});
}
}).attr('src',$this.attr('alt'))
.addClass($this.attr('class'));
}).bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});

//function to hide the current opened menu
function hideThumbs(){
$list.find('li.current')
.animate({'height':'50px'},400,function(){
$(this).removeClass('current');
})
.find('.st_thumbs_wrapper')
.hide(200)
.andSelf()
.find('.st_link span')
.addClass('st_arrow_down')
.removeClass('st_arrow_up');
}

//makes the thumbs div scrollable
//on mouse move the div scrolls automatically
function makeScrollable($outer, $inner){
var extra 			= 800;
//Get menu width
var divWidth = $outer.width();
//Remove scrollbars
$outer.css({
overflow: 'hidden'
});
//Find last image in container
var lastElem = $inner.find('img:last');
$outer.scrollLeft(0);
//When user move mouse over menu
$outer.unbind('mousemove').bind('mousemove',function(e){
var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;

// window.alert('le: ' + lastElem[0].offsetLeft + ' / ow:' + lastElem.outerWidth() + ' / elems:' + ($inner.find('img').length) + ' / img:last: ' + ($inner.find('img:last').length));

var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
// window.alert('scrolling to: ' + left + 'at conWidth ' + containerWidth + ' dW:'+ divWidth + ' / mPos:' + (e.pageX - $outer.offset().left) + ' * b:' + ((containerWidth-divWidth) / divWidth));
$outer.scrollLeft(left);
});
}
});