$(function() {
    lShow();
    hideAllImages();
    
    corectMaineBox();
    $('#container').width($(window).width()-60);

});

$(window).load(function(){
    correctImageSize();

  
    if ($('#img-box img.st_preview').length > 1) {
        $('#img-caption').html($('#img-box').children('img:first').attr('title')).animate({
            opacity:1
        });
        $('#img-box').children('img:first').fadeIn(800);
        startSlideshow();
    } else if ($('#img-box img.st_preview').length == 1) {
        $('#img-box').children('img:first').fadeIn(800);
        $('#img-caption').html($('#img-box img.st_preview:eq('+currentSlide+')').attr('title')).animate({
                opacity:1
            });
    }
initSlider();
});


function  initSlider() {
    if ($('.st_thumbs img').length > 0) {

        $('#slider').each(function(){
           
            var thumbs_wrapper = $(this).find('.st_thumbs_wrapper');
            var thumbs 		= thumbs_wrapper.children(':first');
            
            //each thumb has 180px and we add 3 of margin
            var finalW 			= 0 // thumbs.find('img').length * 180;
           //finalW = 1146;
           thumbs.find('img').each(function(){
            finalW = finalW + $(this).width()+3;
       });
            thumbs.css('width',finalW + 'px');

            //make this element scrollable
            makeScrollable(thumbs_wrapper,thumbs);
        });

        $('#slider').find('.st_thumbs img').bind('click',function(){
            var cur = $(this);
            $('#img-caption').animate({
                opacity:0
            });
            runSl= false;
            lShow();
            replaceMaine($(this).attr('alt'),cur.attr('title'));
//            $('<img class="st_preview"/>').load(function(){
//                var im = $(this);
//
//                var $currImage = $('#img-box img.st_preview:eq('+currentSlide+')');
//                $(this).insertBefore($currImage).hide();
//                lHide();
//
//                correctImageSize();
//                $currImage.fadeOut(800,function(){
//                    $(this).remove();
//                    im.fadeIn(800);
//                    $('#img-caption').html(cur.attr('title')).animate({
//                        opacity:1
//                    });
//                });
//
//            }).attr('src',$(this).attr('alt'));
        });
$('.st_thumbs').animate({
            opacity:100
        });
    }
}
//makes the thumbs div scrollable
//on mouse move the div scrolls automatically
/*
function makeScrollable(outer, inner){
    var extra 			= 0;
    //Get menu width
    var divWidth = outer.width()+22;
    if ($.browser.msie) {
             extra 			= 12;
    }
    //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;
        var left = (e.pageX - outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
        outer.scrollLeft(left);
    });
}
*/

function makeScrollable(outer, inner){
    var extra 			= 10;
    //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;
        var left = (e.pageX - outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
        outer.scrollLeft(left);
    });
}



function hideAllImages(){
    $('#img-box img.st_preview').hide();
    $('#img-caption').css('opacity',0);
}

function corectMaineBox(){
    var extraH = 300;
     if ($('#slider').length == 0) extraH = 200 ;
    $('#img-box').height($(window).height()-extraH).width($(window).width()-300);

}
function correctImageSize(){



    var Height = $('#img-box').height();
    var Width = $('#img-box').width();
    var f = null;
    $('.st_preview').each(function(){
        w = $(this).width();
        h = $(this).height();
        $(this).height( Height);
        $(this).width(Math.round((w/h)*Height));

        if ($(this).width() > Width) {
            w = $(this).width();
        h = $(this).height();
           $(this).width(Width);
          
           $(this).height( Math.round((h/w)*Width));
        }
        if (f == null) f = Math.round((h/w)*Height) ;

              
    });
    initArrows ();
    correctArrowsPosition(f);
    lHide();

}




var slideCount = 0;
var currentSlide = 0;
var runSl = true;
function startSlideshow() {
    slideCount = $('#img-box img.st_preview').length;
    setTimeout(nextSlide, 8000)

}
function nextSlide(){
    if (runSl) {
        $('#img-caption').animate({
            opacity:0
        });
        $('#img-box img.st_preview:eq('+currentSlide+')').fadeOut(800, function(){

            if (currentSlide == (slideCount-1)) {
                currentSlide = 0;
            } else {
                currentSlide=currentSlide+1;
            }
            $('#img-caption').html($('#img-box img.st_preview:eq('+currentSlide+')').attr('title')).animate({
                opacity:1
            });
            $('#img-box img.st_preview:eq('+currentSlide+')').fadeIn(800, startSlideshow);
        });
    }
}

function initLoader(){
    var loader =  $('<div id="loading"><span>Loading </span><img src="/images/loader-white.gif"/></div>');
    loader.appendTo('body');
}
function lHide(){
    $('#loading').hide();
}
function lShow(){
    if ($('#loading').length == 0) initLoader();
    else $('#loading').show();
}


function initArrows (){
    if ($('#arrows').length != 0) $('#arrows').remove();
    if ($('.st_thumbs img').length > 1) {
    $('<div id="arrows"><div id="arr-left"></div><div id="arr-right"></div></div>').css('opacity',0).appendTo('body').animate({'opacity': '1'},5000);



$('#arr-left').click(function(){
        var nextImg = null;
        var currentImg = $('#img-box').children('img:first').attr('src');
        if ($('.st_thumbs img[alt='+currentImg+']').prev('img').attr('alt') != null) {
            nextImg = $('.st_thumbs img[alt='+currentImg+']').prev('img').attr('alt');
            caption = $('.st_thumbs img[alt='+currentImg+']').prev('img').attr('title');
        } else {
            nextImg = $('.st_thumbs img:last').attr('alt');
            caption = $('.st_thumbs img:last').attr('title');
        }
        replaceMaine(nextImg, caption);
    });
    $('#arr-right').click(function(){
        var nextImg = null;
        var currentImg = $('#img-box').children('img:first').attr('src');
        if ($('.st_thumbs img[alt='+currentImg+']').next('img').attr('alt') != null ) {
            nextImg = $('.st_thumbs img[alt='+currentImg+']').next('img').attr('alt');
            caption = $('.st_thumbs img[alt='+currentImg+']').next('img').attr('title');
        } else {
            nextImg = $('.st_thumbs img:first').attr('alt');
            caption = $('.st_thumbs img:first').attr('title');
        }
        replaceMaine(nextImg, caption);
    });
    }
}
function correctArrowsPosition (d){ //console.log($('body').height()); console.log($('window').height());
    $('#arrows').css({
        'top' : ($('#img-box').first('.st_preview').height()+92)+'px' ,
 
	'left': '30px;'
    })
$('#arrows').css("left","30px");
//       'right': ($('#img-box').first('.st_preview').width()+35)+'px'
}


function replaceMaine(src,caption){
    if (src != null) {
//        $('<img class="st_preview"/>').attr('src',src).load(function(){
//            var $this = $(this);
//            var $currImage = $('#img-box').children('img:first');
//            $this.hide();
//            $this.insertBefore($currImage);
//           // loader.hide();
//           correctImageSize();
//            $currImage.fadeOut(800,function(){
//                $(this).remove();
//                $this.fadeIn(400, function(){
//                    initSlider();
//                });
//            });
//        });




            $('<img class="st_preview"/>').load(function(){
                var im = $(this);

                var $currImage = $('#img-box img.st_preview:eq('+currentSlide+')');
                $(this).insertBefore($currImage).hide();
                lHide();

                correctImageSize();
                $currImage.fadeOut(800,function(){
                    $(this).remove();
                    im.fadeIn(800);
                    $('#img-caption').html(caption).animate({
                        opacity:1
                    });
                });

            }).attr('src',src);





}

}