/*!
 * Класс для создания карусели
 */
var Carousel = function(options)
{
    if (typeof options === 'object')
    {
        for (var option in options)
        {
            if (option in this)
                this[option] = options[option];
        }
    }
    this.elements_count = this.data.length;
    
    // IE6 fix
    if ($.browser.msie && $.browser.version == '6.0')
        this.preloadImagesForIE6();

    // init
    this.init();
}

Carousel.prototype = {

    data: {},                            // объект с данными для карусели
    range: [0, 5],                       // диапазон вывода элементов
    step: 1,                             // шаг в n-элементов
    big_element_index: null,             // индекс большой картинки
    animate_speed: 500,                  // скорость анимации
    animation_in_progress: false,        // показатель активности анимации
    click_on_carousel: false,            // показатель того, что по карусели кликнули

    element_width: '95px',               // ширина элемента карусели
    list_width: '720px',                 // ширина списка
    big_element_width: '238px',          // ширина большого элемента карусели
    big_list_width: '863px',             // ширина списка, когда в нем есть большой элемент

    path_to_images: '/images/carouselle/',
    $carousel_list: $('#carousel ul')[0],
    templates: {
        element: '<li class="{css_class}" id="{id}"><a href="{url}">' +
                '<strong><img src="{path}{image}" /></strong>' +
                '<em class="bbb"><img src="{path}{image_big}" /></em>' +
                '<span>{name}</span></a>' +
                '</li>',

        carousel: '<a href="#" class="prev" id="prev">Назад</a>' +
            '<div class="list">' +
                '<ul><li></li></ul>' + 
                '<div class="clear"></div>' +
            '</div>' +
        '<a href="#" class="next" id="next">Вперед</a>'
    },

    /**
     * Инициализация
     */
    init: function() 
    {
        var that = this;
        $('#carousel').html(this.templates.carousel);


        // клик по "назад"
        $('#prev').click(function() 
        {
            that.handleNavButtons('prev');
            that.printElements(that.range[0], that.range[1]);

            $('#carousel ul a').click(function() {
                that.click_on_carousel = true;
                return that.showBigPic(this);
            });

            if (that.big_element_index !== null)
            {
                // если в новом ряду нет большой картинки, а ранее она была
                // надо изменить размеры списка
                if (that.big_element_index < that.range[0] || that.big_element_index > that.range[1])
                {
                    $('#carousel ul').removeClass('has_big').css('width', that.list_width);
                    $('#carousel').removeClass('has_big');
                }
                else
                {
                    $('#carousel, #carousel ul').addClass('has_big').css('width', that.big_list_width);
                    $('#carousel').addClass('has_big');
                }
                    
            }

            return false;
        });

        // клик по "вперед"
        $('#next').click(function() 
        {
            that.handleNavButtons('next');
            that.printElements(that.range[0], that.range[1]);
            $('#carousel ul a').click(function() {
                that.click_on_carousel = true;
                return that.showBigPic(this);
            });

            if (that.big_element_index !== null)
            {
                // если в новом ряду нет большой картинки, а ранее она была
                // надо изменить размеры списка
                if (that.big_element_index < that.range[0] || that.big_element_index > that.range[1])
                {
                    $('#carousel ul').removeClass('has_big').css('width', that.list_width);
                    $('#carousel').removeClass('has_big');
                }
                else
                {
                    $('#carousel ul').addClass('has_big').css('width', that.big_list_width);
                    $('#carousel').addClass('has_big');
                }
                    
            }

            return false;
        });

        // document handler
        jQuery('body').bind('click', function(event) 
        {
            that.click_on_carousel = false;
            if (that.big_element_index !== null)
            {
                var t = $('#carousel_element_'+that.big_element_index);
                $('#carousel').removeClass('has_big');
                t
                    .removeClass('big').css('width', that.element_width)
                    .parent().removeClass('has_big').css('width', that.list_width)
                    .find('span').show();

                    that.big_element_index = null;
            }
        });


        // вывод элементов
        this.printElements(this.range[0], this.range[1]);

        // клик по картинке
        $('#carousel ul a').click(function() {
            that.click_on_carousel = true;
            return that.showBigPic(this);
        });
        

    },


    /**
     * Выводит элементы карусели
     * @param {Integer} from
     * @param {Integer} to
     */
    printElements: function(from, to) 
    {
        var str = '';
        var element_template, element;
        var is_big = false, css_class;
        var image;

        for (var i = from; i <= to; i++)
        {
            element = this.data[i];
            is_big = (this.big_element_index == i) ? true : false;
            css_class = (is_big) ? 'big' : '';
            css_class += (i == to) ? ' last' : '';
            image = (is_big) ? element.image_big : element.image; 

            element_template = this.templates.element;
            element_template = element_template
                .replace('{css_class}', css_class)
                .replace('{url}', element.url)
                .replace(/\{path\}/g, this.path_to_images)
                .replace('{image}', element.image)
                .replace('{image_big}', element.image_big)
                .replace('{name}', element.name)
                .replace('{id}', 'carousel_element_'+i);

            str += element_template;
        }
        $('#carousel ul').html(str);

        // навигационные кнопки
        $('#prev, #next').removeClass('unactive');
        if (from - this.step < 0)
            $('#prev').addClass('unactive');

        if (to + this.step >= this.elements_count)
            $('#next').addClass('unactive');

        if ($.browser.msie && $.browser.version == '6.0')
            this.fixIE6Alpha();
    },


    /**
     * Отображает большую картинку 
     * @param {Element} anchor_el 
     */
    showBigPic: function(anchor_el) 
    {
        if (this.animation_in_progress)
            return false;

        var that = this;
        var $li = $(anchor_el).parent();
        var id = parseInt($li.attr('id').replace('carousel_element_', ''));
        var old_big_element_index = this.big_element_index;
        this.big_element_index = id;

        // если клик производится второй раз (имеется установленный класс big), 
        // возвращаем true и браузер переходит по href ссылки
        if ($li.hasClass('big'))
        {
            that.click_on_carousel = 1;
            return true;
        }
            

        // приводим в порядок все элементы
        $('#carousel li').each(function(index, el) {
            $(el).removeClass('big');
            $(el).find('span').show();
        });

        if (!$('#carousel ul').hasClass('has_big'))
        {
            this.animation_in_progress = true;
            $('#carousel ul').animate(
                {width: this.big_list_width}, 
                this.animate_speed,
                function() { that.animation_in_progress = false; }
            );
        }

        // при первом клике не надо "сдвигать" старый элемент
        // соответственно при первом клике индекса "старого" элемента еще не существует
        if (old_big_element_index !== null)
        {
            this.animation_in_progress = true;
            $('#carousel_element_'+old_big_element_index).animate(
                {width: this.element_width}, 
                this.animate_speed, 
                function() { that.animation_in_progress = false; }
            );
        }


        $li.find('span').hide();
        $li.addClass('loading');
        this.animation_in_progress = true;
        $('#carousel').addClass('has_big');
        $li.animate(
            {width: this.big_element_width}, 
            this.animate_speed, 
            function() 
            {
                $li.removeClass('loading');
                $('#carousel ul').addClass('has_big');
                $li.addClass('big');
                that.animation_in_progress = false;
            }
        );

        return false;
    },


    /**
     * Функция-обработчик на нажатие кнопок "вперед" и "назад"
     * @param {} nav_button
     * @return {Boolean}
     */
    handleNavButtons: function(nav_button) 
    {
        var nav_button_el = $('#'+nav_button);

        if ( nav_button_el.hasClass('unactive') || 
            (nav_button == 'prev' && this.range[0]-this.step < 0) || 
            (nav_button == 'next' && this.range[1]+this.step >= this.elements_count) )
        {
            nav_button_el.addClass('unactive');
            return false;
        }

        if (nav_button == 'prev')
        {
            this.range[0] -= this.step;
            this.range[1] -= this.step;
        }
        else if (nav_button == 'next')
        {
            this.range[0] += this.step;
            this.range[1] += this.step;
        }

        return false;
    },
    
    
    hideBigPic: function() {
        console.log('Прячем больную картинке');
    },


    /**
     * Фиксит прозрачность в IE6
     */
    fixIE6Alpha: function()
    {
        var width, height;
        var that = this;
        var $images_preload = $('#images_preload');
        $('#carousel li').each(function(index, el)
        {
            var id = parseInt($(this).attr('id').replace('carousel_element_', ''));
            var filter;
            filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(";
            filter += "src='"+ that.path_to_images + that.data[id].image_big +"'";
            filter += ",sizingMethod='crop')";

            $images_preload.show();
            width = $('#preloaded_image_'+id).attr('width');
            height = $('#preloaded_image_'+id).attr('height');
            $images_preload.hide();

            var $em = $(this).find('em');
            $em.find('img').remove();
            $em.css({
                width: width,
                height: height,
                filter: filter
            });
        });
    },


    /**
     * Подгружает PNG-24 для IE6
     */
    preloadImagesForIE6: function()
    {
        var str = '';
        for (var i = this.range[0]; i <= this.range[1]; i++)
            str += '<img id="preloaded_image_'+ i +'" src="'+ this.path_to_images + this.data[i].image_big +'">';

        try 
        {
            var div = document.createElement('div');
            div.id = 'images_preload';
            div.innerHTML = str;
            document.body.appendChild(div);
        }
        catch(err) {}
    }
};