(function($) {
    $.fn.carousel3D = function(options) {

    var parentContainer = this;
    var settings = $.extend({
        speed: 350,
        perspectiveZoom : 80,
        sideOffset: 70,
        topOffset:0,
        emClass: "tdc-element",
        secondaryOpacity:0.8,
        states : []
    }, options);

    var emClass = settings.emClass;
    var elements = this.find("."+emClass);
    var mutex = false;
    this.find("."+emClass).css("position","absolute");
    this.find("."+emClass).css("display","block");
    $(this).css("position","relative");
    var lastEm = elements.length - 1;
    //var initW = $(elements[2]).width();
    //var initH = $(elements[2]).height();
    var initW = 350;
    var initH = 318;
    var initWS = initW * settings.perspectiveZoom/100;
    var initHS = initH * settings.perspectiveZoom/100;
    var initWS2 = initW * settings.perspectiveZoom2/100;
    var initHS2 = initH * settings.perspectiveZoom2/100;

    $('.tdc-element img').removeAttr('width');
    $('.tdc-element img').removeAttr('height');
    $('.tdc-element img').css('width','100%');

    settings.states = [
        {height:initHS2, width:initWS2, top:(initH-initHS2)/2+settings.topOffset, left:0, opacity:settings.thirdOpacity, fontSize: '77%'},
        {height:initHS, width:initWS, top:(initH-initHS)/2+settings.topOffset, left:89, opacity:settings.secondaryOpacity, fontSize: '90%'},
        {height:initH, width:initW, top:0, left:204, opacity:100, fontSize: '100%'},
        {height:initHS,width:initWS, top:(initH-initHS)/2+settings.topOffset, left:308, opacity:settings.secondaryOpacity, fontSize: '90%'},
        {height:initHS2,width:initWS2, top:(initH-initHS2)/2+settings.topOffset, left:399, opacity:settings.thirdOpacity, fontSize: '77%'}
    ];

    for(var j=5;j<=lastEm;j++){
        settings.states[j] = {height:0, width:0, top:(initH)/2, left:settings.sideOffset+initW/2, opacity:0, fontSize: '50%'};
    }

    function transit(direction,steps) {
        mutex = true;
        $(elements).each(function(i){
            $(elements[i]).animate(settings.states[direction ? (i == 0 ? lastEm : i - 1) : (i == lastEm ? 0 : i + 1)], settings.speed, 'swing', function(){
                if (i==lastEm){
                    var prevState = elements;
                    elements = [];
                    elements[0] = prevState[direction ? 1 : lastEm];
                    elements[lastEm] = prevState[direction ? 0 : lastEm-1];
                    for(var j=1;j<lastEm;j++)
                        elements[j] = prevState[direction ? j+1 : j-1];

                    $(elements).each(function(){
                       $(elements[2]).css({zIndex: 200});
                       $(elements[1]).css({zIndex: 100});
                       $(elements[3]).css({zIndex: 100});
                       $(elements[0]).css({zIndex: 50});
                       $(elements[4]).css({zIndex: 50});
                       for(var j = 5; j<=lastEm;j++)
                           $(elements[j]).css({zIndex: 1});
                    });
                    mutex = false;
                }
            });
        });

        setTimeout(function(){
            $(elements[0]).css({zIndex: direction ? 50 : 100});
            $(elements[1]).css({zIndex: direction ? 100 : 200});
            $(elements[2]).css({zIndex: 100});
            $(elements[3]).css({zIndex: direction ? 200 : 100});
            $(elements[4]).css({zIndex: direction ? 100 : 50});
            for (var j = 5; j<=lastEm;j++)
                $(elements[j]).css({zIndex: 1});
        }, settings.speed / 2);
        setTimeout(function(){
            if (steps == 2) {
                steps = 1;
                transit(direction,1)
            }
        }, settings.speed * 1.2);
    }

    $(elements).each(function(){
        $(this).click(function(e){
            if(mutex) {
                return;
            }
            if(this === elements[0]) {
                transit(false,2);
            }
            if(this === elements[1]) {
                transit(false,1);
            }
            if(this === elements[3]) {
                transit(true,1);
            }
            if(this === elements[4]) {
                transit(true,2);
            }
            if(this === elements[2]) {
                $(this).find('.prev').click( function() {
                    transit(false,1);
                });
                $(this).find('.next').click( function() {
                    transit(true,1);
                });
            }
            /*else {
                transit(true)
            }*/
        });
    });

    $(elements).each(function(i){
        $(elements[i]).animate(settings.states[i], settings.speed, 'swing')
        $(elements[2]).css({zIndex: 200});
        $(elements[1]).css({zIndex: 100}); $(elements[3]).css({zIndex:100});
        $(elements[0]).css({zIndex: 50}); $(elements[4]).css({zIndex:50});
        for (var j = 5; j<=lastEm;j++)
            $(elements[lastEm]).css({zIndex: 1});
    });

    return this;
};
})(jQuery);
$(document).ready(function(){
    total = $('#carouselthreed .tdc-element').length;
    $('#carouselthreed .tdc-element').each( function(i) {
        $($(this).find('.element-case')[1]).append('<p class="count"><img class="prev" src="/bitrix/templates/adwatch/imgs/carousel/prev.gif" alt=""/> ' + (i + 1) + ' из ' + total + ' <img class="next" src="/bitrix/templates/adwatch/imgs/carousel/next.gif" alt=""/></p>')
    });
    $('#carouselthreed').carousel3D({
        speed: 500,
        perspectiveZoom: 90,
        perspectiveZoom2: 77,
        sideOffset: 80,
        secondaryOpacity: 1,
        thirdOpacity: .35,
        emClass:'tdc-element'
    })
});