$(document).ready(function(){
    wrap = $('.wrap');
    slider = $('.slider');
    arrowLeft = $('.arrow-left');
    arrowRight = $('.arrow-right');
    imageSmall = $('.images li');
    imageBig = $('.height img');
    v = 4;
    n = 3;
    p = 0;
    w = $(imageSmall).outerWidth();
    t = $(imageSmall).length;
    a = w*t;
    l = v*w;
    s = 400;
    infiniti = true;
    updateWrap();
    //$(wrap).css({width: l + 'px'});
    $(imageSmall).first().addClass('active');
    //$(imageBig).first().fadeIn(s).addClass('active');
    $(imageBig).first().show().addClass('active');
    idBig = $(imageBig).index(this);
    $(imageBig).each(function(idBig){this.id = idBig;});
    $('.width').css({height: 'auto'});
    //$('.width').css({height: $(imageBig).first().height()});
    //$(imageBig).first().css({left: ($('.width').width()-$(imageBig).first().width())/2});

    $(window).resize(function(){
        $('.width').css({height: 'auto'});
        $('.height').css({width: '100%', height: 'auto'});
        updateWrap();
    });

    function updateWrap() {
        width = $(wrap).width();
        var v = Math.round(width / w);
        width = v * w;
    }

    $(imageSmall).click(function(){
        id = $('li').index(this);
/*      if ($('.height #' + id).height() > $('.width').height()) {
            $('.height #' + id).css({width: '100%', height: 'auto'}).addClass('resized');
        } */

        //$('.width').animate({height: $('.height #' + id).height()});
        //$('.height #' + id).css({left: ($('.width').width()-$('.height #' + id).width())/2});
        $('.width').animate({height: $('.height #' + id).height()}, s);
        //$(imageBig).stop().fadeOut({queue:false, duration:s}).removeClass('active');
        //$('.height #' + id).stop().fadeIn({queue:false, duration:s}).addClass('active');
        $(imageBig).hide().removeClass('active');
        $('.height #' + id).show().addClass('active');
        $(imageSmall).removeClass('active');
        $(this).addClass('active');
        imageSmall = this;
    });
    $(arrowRight).click(function(){
        //if ((a+p)-w*v <= 0) {
        if ((a+p)-width <= 0) {
            if (infiniti == true) {
                $(slider).animate({left: '0px'}, s);
                p = 0;
            } else {
                $(slider).css({left: -(a-w*v) + 'px'});
                p = -(a-w*v);
            }
        } else {
            if (t >= v) {
                p -= w*n;
                $(slider).animate({left: p + 'px'}, s);
            } else {
                p = 0;
            }
        }
    });
    $(arrowLeft).click(function(){
        if (p >= 0) {
            if (infiniti == true) {
                if (t <= v) {
                    $(slider).css({left: '0px'});
                } else {
                    $(slider).animate({left: -(a-w*v) + 'px'});
                    p = -(a-w*v);
                }
            } else {
                $(slider).css({left: '0px'});
                p = 0;
            }
        } else {
            p += w*n;
            $(slider).animate({left: p + 'px'}, s);
        }
    });
});