$(function(){
    var scrollbar = {
        root: $('#scrollbar'),
        border: {
            leftContents: $('#scrollbar').children('.border-left').children('.bl-contents'),
            rightContents: $('#scrollbar').children('.border-right').children('.br-contents')
        },
        body: {
            main: $('#scrollbar').children('.body'),
            top: $('#scrollbar').children('.body').children('.btop'),
            items: $('#scrollbar').children('.body').children('.bitems'),
            itemsInner: $('#scrollbar').children('.body').children('.bitems').children('.inner'),
            itemsCount: $('#scrollbar').children('.body').children('.bitems').children('.inner').children('.bitem').length,
            bottom: $('#scrollbar').children('.body').children('.bbottom')
        },
        itemHeight: 150,
        itemWidth: 120,
        navUp: $('#scrollbar').children('.body').children('.btop').children('a'),
        navDown: $('#scrollbar').children('.body').children('.bbottom').children('a'),
        itemsData: {
            activeIndex: 0,
            previousIndex: 0,
            maxIndex: 0
        }
    };
    
    scrollbar.itemsData.maxIndex = scrollbar.body.itemsCount - 1;
    
    if (scrollbar.body.itemsCount > 3) {
        bordersHeight = scrollbar.body.itemsCount * 150 + 64;
        scrollbar.border.leftContents.css('height', bordersHeight + 'px');
        scrollbar.border.rightContents.css('height', bordersHeight + 'px');
        scrollbar.body.itemsInner.css('height', (scrollbar.body.itemsCount * 150) + 'px');
    }
    
    scrollbar.body.itemsInner.find('.bitem').each(function(i){
        $(this).attr('id', $(this).attr('class') + '-' + i);
    });
    
    scrollbar.navUp.click(function(){
        moveUp(scrollbar);
    });
    
    scrollbar.navDown.click(function(){
        moveDown(scrollbar);
    });
    
    scrollbar.root.bind('mousewheel DOMMouseScroll', function(e) {
        var delta = 0;
        
        if (e.originalEvent.wheelDelta) {
            delta = e.originalEvent.wheelDelta/120; 
        } else if (e.originalEvent.detail) {
            delta = -e.originalEvent.detail/3;
        }
        if (delta > 0)
            moveUp(scrollbar);
        else
            moveDown(scrollbar);
            
        if (e.preventDefault)
            e.preventDefault();
        e.returnValue = false;
    });
    
    scrollbar.body.itemsInner.find('.play').click(function(){
        mp3 = $(this).attr('id');
        if (mp3.length) {
            flashVars = 'mp3=' + mp3 +
                        '&autoplay=1' +
                        '&autoload=1' +
                        '&width=320' +
                        '&showvolume=1' +
                        '&skin=' + TPL_URL + '/img/flash-player-bg.jpg' +
                        '&loadingcolor=372f2d' +
                        '&bgcolor=372f2d' +
                        '&bgcolor1=372f2d' +
                        '&bgcolor2=372f2d' +
                        '&slidercolor1=f07e04' +
                        '&slidercolor2=f07f03' +
                        '&sliderovercolor=ffffff' +
                        '&buttoncolor=f07e04' +
                        '&buttonovercolor=ffffff'
            flashPlayer = '<object id="fp-object" type="application/x-shockwave-flash" data="' + BASE_URL + '/upload/flash/player_mp3_maxi.swf" width="320" height="20">' +
                                '<param name="movie" value="' + BASE_URL + '/upload/flash/player_mp3_maxi.swf" />' +
                                '<param name="bgcolor" value="#372f2d" />' +
                                '<param name="FlashVars" value="' + flashVars + '" />' +
                           '</object>';
            //console.log(flashPlayer);
            $('.flash-player').children('object').remove();
            $('.flash-player').append(flashPlayer);
            
            setTimeout(function(){
                document.getElementById("fp-object").SetVariable("player:jsPlay", "");
            }, 500);
        }
    });

});

$(window).load(function(){
    addEffect(0);
});

function moveUp(scrollbar) {
    if (scrollbar.itemsData.maxIndex > 2 && scrollbar.itemsData.activeIndex + 2 < scrollbar.itemsData.maxIndex) {
        scrollbar.body.itemsInner.stop(true, true).animate({
            top: '-=' + scrollbar.itemHeight
        });
        scrollbar.border.leftContents.stop(true, true).animate({
            top: '-=' + scrollbar.itemHeight
        });
        scrollbar.border.rightContents.stop(true, true).animate({
            top: '-=' + scrollbar.itemHeight
        });
        scrollbar.itemsData.activeIndex++;
        addEffect(scrollbar.itemsData.activeIndex);
    }
}

function moveDown(scrollbar) {
    if (scrollbar.itemsData.activeIndex > 0) {
        scrollbar.body.itemsInner.stop(true, true).animate({
            top: '+=' + scrollbar.itemHeight
        });
        scrollbar.border.leftContents.stop(true, true).animate({
            top: '+=' + scrollbar.itemHeight
        });
        scrollbar.border.rightContents.stop(true, true).animate({
            top: '+=' + scrollbar.itemHeight
        });
        scrollbar.itemsData.activeIndex--;
        addEffect(scrollbar.itemsData.activeIndex);
    }
}

function addEffect(activeIndex)
{
    $('#scrollbar').children('.body').children('.bitems').children('.inner').find('.bitem').each(function(i){
        if ($(this).find('.play').length) {
            if ($(this).attr('id').split('-')[1] != (activeIndex + 1)) {
                $(this).children('.photo').children('img').pixastic("sepia");

                if ($(this).find('.play').css('display') == 'block') {
                    $(this).find('.play').css('display', 'none');
                }
            } else {
                $(this).find('.play').css('display', 'block');
                Pixastic.revert($(this).find('.image2canvas').get(0));
            }
        }
    });
}