/*
    Портфолио для Креазона
    Компонент* имеет 2 окна:
        - слайдер  ( листает по одной картинке )
        - скроллер ( скроллит картинки при движении на них мышкой )
*/


(function($) {
$.fn.KreazonePortfolio = function(o) {
    // Расширяем инициализируемые данные своими дефолтными переменными.
    o = $.extend({
        btnPrev: null,
        btnNext: null,
        speed: 200,
        easing: null,
        visible: 3,
        start: 0,
        scroll: 1,
        slide2item: 0
    }, o || {});
    
    
    return this.each(function() {
    
            // Основа
            var main = $(this);
            
            // Объявляем переменные (скроллер)
            var scrollContainer  = $('.k-scroller', main);          //область всего скроллера
            var scrollContainerW = scrollContainer.width();         //область всего скроллера //915
            var scrollNumbers = $(".k-scroller-numbers", main);     //область с цифрами
            var scrollBar = $('.k-scroller-bar', main);             //область где содержится бегунок
            var scrollBarW = scrollBar.width();
            var scrollPointer = $('.k-scroller-bar-roller', main);  //бегунок
            
            //Переменные для управления ползунком
            var shift = 0;
            var mouseX = 0;
            
            // Объявляем переменные (слайдер)
            var div = $("div.anyClass", main);
            var btn_prev = $( o.btnPrev , main), btn_next = $( o.btnNext , main);
            
            var ul = $("ul", div), v = o.visible;
            var running = false;
            var li = $("li", ul), itemsCount = li.size(), curr = o.start;
            var liSize = width(li); // 341 для дальнейших расчетов

            var scrollLiW = Math.floor(scrollContainerW / itemsCount * 10)/10 ;                 //Получаем ширину одной Li
            
            var polzunW = scrollLiW * (( itemsCount > 2 ) ?  ( scrollContainerW / liSize ) : itemsCount);

            scrollPointer.css({width: polzunW +"px"});   //Получаем ширину бегунка
            
            var scrollPointerW2 = parseInt(scrollPointer.width() / 2 );     //Сам бегунок и его ширина/2
            
            //Строим линейку в Скроллере из кол-ва картинок в Слайдере
            if (itemsCount > 0)
            {
                //очищаем html для построения новой полоски цифр
                scrollNumbers.html("");
                scrollNumbers.append('<ul></ul>');
                for (var i= 1; i <= itemsCount; i++)
                {
                    scrollNumbers.children('ul').append('<li style="width:'+scrollLiW+'px">' + i + '</li>');
                }

                scrollNumbers.append('<div class="clear"></div>');      //закрываем float-left li чтобы точнее расчитать ширину

                scrollBar.css({width: scrollContainerW+"px"});    //ширина поля с бегунком
                var scrollBarW = scrollBar.width();

                first = true;

                labels = scrollNumbers.find('ul li'); //Переменная в которой хранится указатель на коллекцию li
            
                //Устанавливаем диву ширину, которую вычисляем
                ul.css ( {width: width(li)*itemsCount, position: "absolute" });
                highlight();
            
                /*
                 * СОБЫТИЯ
                */

                //слайдер
                btn_prev.mousedown( function(){
                    return set_left ( liSize  );
                });
            
                btn_next.mousedown( function(){
                    return set_left ( -liSize  );
                });
                
                if ( itemsCount >= 3 )
                {
                    scrollNumbers.mousedown(function(e) {
                        //Вычисляем смещение
                        mouseX = e.pageX - scrollBar.offset().left;
                        var pointerStart = css( scrollPointer, 'left' );
                        var pointerEnd = css( scrollPointer, 'left' ) + (scrollPointerW2*2);

                        if ( mouseX >= pointerStart && mouseX <= pointerEnd )
                        {
                            shift = mouseX - pointerStart;
                        }
                        else
                        {
                            shift = 0;
                        }

                        scroll_slide(e);
                        scrollNumbers.mousemove(function(e){
                            scroll_slide(e);
                         });

                        return false;
                    });

                     //Если отпустили мышу за границами ползунка, то отключаем событие
                     $('body, div').mouseup( function(e){
                        scrollNumbers.unbind('mousemove');
                     });
                     
                     //Если отпускаем мышу на самом ползунке:
                     scrollNumbers.mouseup(function(e){
                        scrollNumbers.unbind('mousemove');
                     });

                 }

            }
            
            slide2item( o.slide2item );
            
            if (curr == 0 && parseInt(scrollPointer.css("left")) > 0 )
            {
                scrollPointer.animate({"left": 0 }, {   duration: 800,
                                                        specialEasing: { left: 'easeOutBounce' }
                                                    } );
            }
            
            
            /*
             * ФУНКЦИИ
            */
            
            function slide2item( num )
            {
                if ( num > 0)
                {
                    var new_left = -(liSize*(num-2));
                    set_left ( new_left - 5 ); // корректировка, чтоб только 3 цифры подсвечивались
                }
            }
            
            function set_left ( new_value )
            {
                if (itemsCount > 2)
                {
                    var current_left = css(ul, 'left');         //Получаем текущее значение left
                    var new_left = current_left + new_value;    //Высчитываем новое знчение
                    
                    //Проверка значений
                    //Если вышли за границы первого элемента - показывать первый элемент
                    if ( new_left > 0  ) { new_left = 0; }
                    
                    //Если вышли за границы последнего элемента, то:
                    //Показываем 2.5 последних элемента
                    //935 фиксированное число удовлетворяющее нашему дизайну
                    if ( new_left < -( itemsCount*liSize - 935 ) ) { new_left = -(itemsCount*liSize - 935); }

                    //Анимируем ul
                    ul.stop().animate( { left: new_left }, o.speed, o.easing );
                    
                    //Формула расчета координат ползунка
                    var pointerPos  = -parseInt ( (new_left * (scrollLiW*itemsCount)) /  ( (ul.width() * (1 + polzunW / (scrollLiW*itemsCount ))  ) - (scrollLiW*itemsCount )  ) ) ;

                    pointerPos = (pointerPos > ( scrollContainerW-  polzunW  )) ? ( scrollContainerW - polzunW ) : pointerPos;
                    scrollPointer.stop().animate( { left: pointerPos }, o.speed, o.easing, function() { highlight(); } );
                }
                return false;
            }
            
            //Функция для прокрутки слайдера
            function show_slide ( id )
            {
                if ( id >= 0 &&  id <= itemsCount - o.visible )
                {
                    
                    //Если мы дошли до последнего слайда то добавляем фиксированую ширину
                    //lastW = (id == itemsCount - o.visible) ?  93 : 0;
                    curr = id;
                    ul.stop();
                    ul.animate( { left: -(curr*liSize)-lastW }, o.speed, o.easing, function(){ highlight(); } );
                    scrollPointer.stop();
                    scrollPointer.animate( { left: scrollLiW*curr }, o.speed, o.easing);
                    //highlight();
                };
            };
            
            //Обработчик при прокрутке мышкой ползунка
            function scroll_slide(event)
            {
                //Устанавливаем смещение на ползунке равное половине Li`шке
                if ( shift == 0) shift = scrollLiW / 2 ;

                // Высчитываем left ползунка
                var pointerPos = event.pageX - scrollBar.offset().left - shift;

                //Ставим стопор на левую границу ползунка
                pointerPos = (pointerPos < 0) ? 0 : pointerPos;

                //На правую границу ползунка
                pointerPos = (pointerPos > ( scrollContainerW-  polzunW  )) ? ( scrollContainerW - polzunW ) : pointerPos;

                //Вычисляем кординаты
                //var value = parseInt( pointerPos * ( (ul.width() * (1 + polzunW / (scrollLiW*itemsCount ))  ) - (scrollLiW*itemsCount )  ) / (scrollLiW*itemsCount), 10) ;
                  
                var value = parseInt( pointerPos * ( (ul.width() * (1 + polzunW / scrollBarW)  ) - scrollBarW  ) / scrollBarW, 10) ;
                
                // Устанавливаем значения для полунка и UL-картинок
                ul.css('left', - value+'px');
                scrollPointer.css({left: pointerPos+"px"});

                highlight();
            };
            
            // Подсвечиваем текущую кнопки влево\вправо и циферки снизу
            function highlight ()
            {
                var first =  Math.floor( -parseInt(ul.css('left')) / liSize);
                var last =  Math.floor( (-parseInt(ul.css('left'))+scrollContainerW) / liSize);
                
                if (itemsCount >= 3)
                {
                    btn_prev.removeClass("disabled");
                    btn_next.removeClass("disabled");
                }

                if (first == 0) btn_prev.addClass("disabled");
                if (first == itemsCount - o.visible ) btn_next.addClass("disabled");

                var i=0;
                labels.each(function ()
                {
                    //Подсветка
                    this.style.color = ( i >= first && i <= last ) ? '#676766' : '#AEAEAE';
                    i+=1;
                });
            };
    });
    
};

function css(el, prop) {
    return parseInt($.css(el[0], prop)) || 0;
};
function width(el) {
    return  parseInt(el.css("width"))   + css(el, 'marginLeft') + css(el, 'marginRight');
};
function height(el) {
    return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
};

})(jQuery);