/// <reference path="~/script/libraries/jquery.js" />

var Carousel = {

    timer: null,

    showItem: function($item) {
        $('#latest .selected')
            .stop()
            .toggleClass('selected');

        $item
            .stop()
            .toggleClass('selected');

        Carousel.changeMainPic($item);
    },

    changeMainPic: function($item) {
        var title = $item.find('h3 a').text(),
            src = $item.find('input').val(),
            href = $item.find('h3 a').attr('href'),
            $links = $('#latest .featuredPic a'),
            $current = $links.eq(0);

        if ($current.attr('href') !== href) {
            
            $('#latest .featuredHeading a')
                .stop()
                .attr('href', href)
                .css('opacity', '0')
                .animate({opacity: 1}, 200, 'easeInSine')
                .text(title);
            
            $links
                .stop()
                .not($current)
                .remove();

            var $img = $('<img />').attr({ alt: '', src: src });

            $('<a></a>')
                .attr('href', href)
                .css({ 'zIndex': 10, opacity: 0 })
                .append($img)
                .insertAfter($current)
                .animate({ opacity: 1 }, 500, 'easeOutSine', function() {
                    $(this).css('zIndex', 20)
                });

            $current.animate({ opacity: 0 }, 500, 'easeInSine', function() {
                $(this).remove();
            });
        }
    },

    setTimer: function() {
        this.timer = window.setInterval(this.timerTick, 4000);
    },

    clearTimer: function() {
        window.clearInterval(this.timer);
    },

    timerTick: function() {
        var $item = $('#latest .selected'),
            $next = $item.next();

        if ($next.length === 0) {
            $next = $item.parent().children(':first-child');
        }

        Carousel.showItem($next);
    },

    initialize: function() {

        this.setTimer();

        $('#latest li').mouseenter(function() {
            Carousel.showItem($(this));
        });

        $('#latest').hover(
            function() {
                Carousel.clearTimer();
            },

            function() {
                Carousel.setTimer();
            }
        );
    }
};

$(document).ready(function() {

    Carousel.initialize();

    $('#channels .promo')

        .hover(
            function() {
                $(this).children('div').stop().animate({ height: 158 }, 500, 'easeOutBack');
            },

            function() {
                $(this).children('div').stop().animate({ height: '58' }, 500, 'easeOutBack');
            }
        )

        .click(function(event) {
            var url = $(this).find('h3 a').attr('href');
            if (url) {
                event.preventDefault();
                window.location.href = url;
            }
        });

    var $hbar = $('#hbar a');

    $hbar.click(function(event) {
        event.preventDefault();
        window.open($(this).attr('href'));
    });

    if ($hbar.length > 0) {

        $('body')
            .css('cursor', 'pointer')
            .click(function(event) {

                if (event.target == this || event.target == $('form')[0]) {
                    window.open($hbar.attr('href'));
                }
            });
    }
});