$(
function
() {
var
$loader
= $(
'#st_loading'
);
var
$list
= $(
'#st_nav'
);
var
$currImage
= $(
'#st_main'
).children(
'img:first'
);
$(
'<img>'
).load(
function
(){
$loader
.hide();
$currImage
.fadeIn(3000);
setTimeout(
function
(){
$list
.animate({
'left'
:
'0px'
},500);
},
1000);
}).attr(
'src'
,
$currImage
.attr(
'src'
));
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'
);
var
finalW =
$thumbs
.find(
'img'
).length * 183;
$thumbs
.css(
'width'
,finalW +
'px'
);
makeScrollable(
$thumbs_wrapper
,
$thumbs
);
});
}
$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);
});
$list
.find(
'.st_arrow_up'
).live(
'click'
,
function
(){
var
$this
= $(this);
$this
.addClass(
'st_arrow_down'
).removeClass(
'st_arrow_up'
);
hideThumbs();
});
$list
.find(
'.st_thumbs img'
).bind(
'click'
,
function
(){
var
$this
= $(this);
$loader
.show();
$(
'<img class="st_preview"/>'
).load(
function
(){
var
$this
= $(this);
var
$currImage
= $(
'#st_main'
).children(
'img:first'
);
$this
.insertBefore(
$currImage
);
$loader
.hide();
$currImage
.fadeOut(2000,
function
(){
$(this).remove();
});
}).attr(
'src'
,
$this
.attr(
'alt'
));
}).bind(
'mouseenter'
,
function
(){
$(this).stop().animate({
'opacity'
:
'1'
});
}).bind(
'mouseleave'
,
function
(){
$(this).stop().animate({
'opacity'
:
'0.7'
});
});
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'
);
}
function
makeScrollable(
$outer
,
$inner
){
var
extra = 800;
var
divWidth =
$outer
.width();
$outer
.css({
overflow:
'hidden'
});
var
lastElem =
$inner
.find(
'img:last'
);
$outer
.scrollLeft(0);
$outer
.unbind(
'mousemove'
).bind(
'mousemove'
,
function
(e){
var
containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
var
left = (e.pageX -
$outer
.offset().left) * (containerWidth-divWidth) / divWidth - extra;
$outer
.scrollLeft(left);
});
}
});