$(document).ready(function(){
    $('#nav li').hover( function(){$(this).animate({marginLeft:'10px'});},function(){$(this).animate({marginLeft:'0px'});}
            );
    $("#pack_prev").click(function(){
       
        });
    
    $("ul.thumb li").hover(function() {
    $(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
    $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
        .animate({
            marginTop: '-63px', /* The next 4 lines will vertically align this image */ 
            marginLeft: '-63px',
            top: '50%',
            left: '50%',
            width: '136px', /* Set new width */
            height: '85px', /* Set new height */
            padding: '10px'
        }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

    } , function() {
    $(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
    $(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
        .animate({
            marginTop: '0', /* Set alignment back to default */
            marginLeft: '0',
            top: '0',
            left: '0',
            
            width: '106px', /* Set width back to default */
            height: '55px', /* Set height back to default */
            padding: '5px'
        }, 400);
});

    $('DIV#imagesScroll DIV.slideshow').cycle({
        fx: 'scrollHorz',
        speed:900,
        pager:'#nav',
        next:   '#pack_next', 
        prev:   '#pack_prev',
        cleartype: true, 
        cleartypeNoBg: true,
        //pagerEvent: 'mouseover', 
        //pauseOnPagerHover: true,
        pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#nav li:eq(' + idx + ') a'; 
        } 
    });

    var is_image_loaded = function(img) {
/*        // IE
        if(!img.complete) {
            return false;
        } 
        // Others
        if(typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
            return false;
        } */
        return true;
    }

    var first_slide = $('DIV#page DIV#content DIV#container DIV.content DIV.slideshow img:first');
    if(is_image_loaded(first_slide.get(0))) {
        $('DIV#page DIV#content DIV#container DIV.content DIV.slideshow').cycle({
            fx:    'fade', 
            speed:  2500
        });
    } else {
        first_slide.load(function(e) {
            $('DIV#page DIV#content DIV#container DIV.content DIV.slideshow').show().cycle({
            fx:    'fade', 
            speed:  2500
            });
        });
    }

});