/*global layout:true, $,  */

$(function () {
    "use strict";
    layout.init();
    etalage.start($('#sliding ul'), 5, {
        navigationArrows: true,
        navigationList: true,
        indicator: true,
        width: 960,
        indicatorWidth: 960
    });
});


layout = ( function () {
    var buttons, mainNav, headerShadow;
    
    buttons = function () {
        $('.btn').each(function(){

            $(this).wrap('<div class="btnWrapper"></div>');
            $(this).append('<span></span><span class="right"></span>');
        });
    };


    mainNav = function () {
        var centerCurrent = (($('#header .nav a.current').width() - 40) / 2) - 5;
        $('#header .nav a.current').append('<span style="margin-left: ' + centerCurrent + 'px;"></span>');
    }

    function styleElements () {
        buttons();
        mainNav();
    }
    
    return {
        init: function () {
            styleElements();
        }
    };
}());

etalage = (function (){
    
    function init (elem, time, props) {
        var length = $(elem).find('li').length, setToCurrent, curSlide = 0,
        oldCur = 0, widthIndicator = 0;
        prop = {};
        if (props === undefined) {
            prop.navigationArrows= true;
            prop.navigationList = true;
            prop.indicator = true;
            prop.width = 900;
            prop.indicatorWidth = 80;
        } else {
            prop = props
        }
        


        $(elem).parent().append('<ol id="etalageModuleNav"></ol><div id="etalageIndicator"></div>');
        $(elem).wrap('<div id="etalageMask"></div>');
        widthIndicator = $('#etalageIndicator').width();

        $(elem).find('li').each(function (i) {
            $(this).css({
                left: (i * prop.width)
            });
        });
        
        $(elem).width(length * prop.width);

        
        
        setToCurrent = function (index) {
            var etalageElem = $(elem).find('li').eq(index);
            $('#etalageModuleNav li').removeClass('current');
            $('#etalageModuleNav li').eq(index).addClass('current');

            if (index >= length - 1){
                $('.etalageNav_right').hide();
            }else {
                $('.etalageNav_right').show();
            }
            if (index <= 0){
                $('.etalageNav_left').hide();
            } else {
                $('.etalageNav_left').show();
            }

            $(elem).stop().animate({
                left: -(index *  prop.width)
            }, 500);
			
        };


        if (prop.navigationList){
            utils.mapArray(length, function (i){
                var cur = i === 0 ? 'current' : '';
                $('#etalageModuleNav').append('<li class="etalage_btn_' + (i + 1) + ' ' + cur + '">' + (i + 1) + '</li>');
            });
            $('#etalageModuleNav li').click(function (){
                curSlide = $(this).index();
                stopIndicator();
                setToCurrent(curSlide);
            });
        }


        if (prop.navigationArrows){
            $(elem).parent().append('<span class="etalageNav_left etalage_arrowNavigation" style="display: none;">&lt;</span><span class="etalageNav_right etalage_arrowNavigation">&gt;</span>');
            $('.etalageNav_left').click(function (){
                curSlide -= 1
                setToCurrent(curSlide);
                stopIndicator();
            });

            $('.etalageNav_right').click(function (){
                curSlide += 1
                setToCurrent(curSlide);
                stopIndicator();
            });
        }

        function stopIndicator () {
            prop.indicator = false;
            $('div#etalageIndicator$').stop();
            $('div#etalageIndicator').hide();
        }
        if (prop.indicator) {
            
            
            function restartNextSlide() {
                $('div#etalageIndicator').width(0);
                $('div#etalageIndicator$').animate({ width: prop.indicatorWidth},
                time * 1000, function (){
                    curSlide = curSlide >= length - 1 ? 0 : curSlide + 1;
                    setToCurrent(curSlide);
                    if  ( prop.indicator ) {
                        restartNextSlide();
                    }
                })
            }
            restartNextSlide();
        } else {
           $('div#etalageIndicator').hide();
        }

        

    }


    return {
        start: function (elem, time, prop){
            init(elem, time, prop);
			$('div#sliding div.center ul li').css('display','block');
        }
    }
}());

utils = (function (){
    return {
        mapArray: function (length, callback){
            var i = 0;
            while (i < length) {
                callback(i);
                i += 1;
            }
        }
    };
}());