var $j = jQuery.noConflict(true);
var panel = window.panel = function ($) {

    $(document).ready(function () {
        $('.highlight-panel').each(function () {
            createPanel($(this));
        });
    });

    function createPanel(panel) {
        var isLinked = false;
        var isPaused = false;
        var isStopped = false

        var timer = setInterval(cycle, 7000);

        $('ul.main-list > li img.productImage', main).each(function () {
            var img = $(this);
//            var pos = img.css('left');
//            if (img.css('left')) { pos.left = img.css('left'); }
//            if (img.css('right')) { pos.right = img.css('right'); }
            img.data('position-left', img.css('left'));
        });

        var main = $('.main', panel);
        var accordion = $('.accordion', panel);
        var controls = $('.controls', panel);

        $('li.active', accordion).addClass('highlight'); //highlight first tab
        $('li:not(.active) div', accordion).height('40'); //initialise all heights
        $('ul.main-list > li:first', main).addClass('activeSplash'); //activate first panel

        //$('.productImage', main).bind(slideProductImage());
        $('ul.main-list', main).bind('mouseenter mouseleave', toggleSwitch);
        $('ul', accordion).bind('mouseenter mouseleave', toggleSwitch)
            .find('li').bind('mouseover', handleListOver);
        $('ul > li:not(.highlight)', accordion).find('div').css({ height: '36px' });

        controls.css('display', 'block');
        $('.control-back', controls).bind('click', initPanelChange);
        $('.control-play', controls).bind('click', playOrPause);
        $('.control-forward', controls).bind('click', initPanelChange);

        function toggleSwitch() {
            (isPaused == false) ? isPaused = true : isPaused = false;
        }

        function cycle() {
            if (isPaused == false && isStopped == false) {
                cycleAccordion();
                fadeOutSplash();
            }
        }

        function cycleAccordion() {
            var active = $('li.highlight', accordion);
            if (isBackClicked) {
                next = active.prev();
                if (next.length === 0) {
                    next = $('li:last', accordion);
                }
            } else {
                next = active.next();
                if (next.length === 0) {
                    next = $('li:first', accordion);
                }
            }

            active.removeClass('highlight');
            next.addClass('highlight');

            closeActiveListItem(active);
            changeActiveListItem(next);
        }

        function handleListOver() {
            if (!$(this).hasClass('highlight')) {
                active = $(this);
                if ($('li', accordion).bind('mouseover', handleListOver)) {
                    $('li', accordion).unbind('mouseover', handleListOver);
                    //$('ul.select li').unbind('click', handleListOver);
                }
                closeActiveListItem(active.siblings('li.highlight'));
                changeActiveListItem(active);
            }
        }

        function closeActiveListItem(list) {
            list.children('div').animate({
                height: '36px'
            }, 400, function () {
                list.removeClass('highlight');
            });
        }

        function changeActiveListItem(current) {
            current.children('div').animate({
                height: '94px'
            }, 400, function () {
                current.addClass('highlight');
                if ($('li', accordion).unbind('mouseover', handleListOver)) {
                    $('li', accordion).bind('mouseover', handleListOver);
                    //$('ul.select li').bind('click', handleListOver);
                }
            });
        }

        /* MAIN PANELS */
        function playOrPause() {
            console.log('play/pause', isStopped ? 'play' : 'pause');
            var button = $('.control-play', controls);
            if (isStopped) {
                isStopped = false;
                button.attr('src', 'images/controls/pause.png');
            } else {
                isStopped = true;
                button.attr('src', 'images/controls/play.png');
            }
            //(isStopped == false) ? isStopped = true : isStopped = false;
        }

        var isForwardClicked = false;
        var isBackClicked = false;
        function initPanelChange() {
            var button = $(this);
            console.log(button);

            $('.control-forward', controls).unbind('click', initPanelChange);
            $('.control-back', controls).unbind('click', initPanelChange);

            if (button.hasClass('control-forward')) {
                isForwardClicked = true;
            } else if (button.hasClass('control-back')) {
                isBackClicked = true;
            }
            console.log('forward', isForwardClicked, 'back', isBackClicked);

            clearInterval(timer);
            timer = setInterval(cycle, 7000);
            fadeOutSplash();

            if (isLinked) {
                cycleAccordion();
            }
        }

        function fadeOutSplash() {
            $('ul.main-list > li.activeSplash', main).animate({
                opacity: 0
            }, 400, function () {
                swapMainDiv()
            });
        }

        function swapMainDiv() {
            var active = $('ul.main-list > li.activeSplash', main)

            if (isBackClicked) {
                next = active.prev();
                if (next.length === 0) {
                    next = $('ul.main-list > li:last', main);
                }
            } else {
                next = active.next();
                if (next.length === 0) {
                    next = $('ul.main-list > li:first', main);
                }
            }
            next.addClass('activeSplash');
            active.removeClass('activeSplash');
            active.css('opacity', 1);
            next.find('p, img, div').css({ opacity: 0 });
            next.find('ul').css({ marginLeft: '-300px' });

            if ($('ul.main-list > li:first', main).length > 0) {
                $('ul.main-list > li:first', main).removeClass('firstMainSplash');
            }
            slideProductImage();
        }

        function slideProductImage() {
            $('ul.main-list > li.activeSplash div', main).animate({ opacity: 1 }, 500)

            var productImage = $('ul.main-list > li.activeSplash img.productImage', main);
            productImage.css({ left: -productImage.width() });
            productImage.animate({
                opacity: 1,
                left: productImage.data('position-left'),
                //right: productImage.data('position-x').right
            }, 500, function () {
                fadeInText();
            });
        }

        function fadeInText() {
            var active = $('ul.main-list > li.activeSplash', main);
            $('.title,.subtitle,.copy', active).animate({
                opacity: 1
            }, 400);
            $('.price', active).animate({
                opacity: 1
            }, 400, function () {
                slideInLinks()
            });
        }

        function slideInLinks() {
            $('ul.main-list > li.activeSplash ul', main).animate({
                opacity: 1,
                marginLeft: '0px'
            }, 400, function () {
                if (isForwardClicked || isBackClicked) {
                    $('.control-forward', controls).delay(400).queue(function () {
                        $('.control-forward', controls).bind('click', initPanelChange);
                        $('.control-back', controls).bind('click', initPanelChange);
                        $(this).dequeue();
                    });
                }
                isForwardClicked = false;
                isBackClicked = false;
            });
        }
    }
} ($j);