$(document).ready(function(){
    (function(){
        $.fn.ddMarquee = function(){
	        return this.each(function(){
	            var $control       = $('a.control', this),
	                $channels      = $('a.channel', this),
	                $imageLinks    = $('a.marqueeImage', this),
	                totalChannels  = $channels.length,
	                currentChannel = 1,
	                playing        = true
                ;
                // 1) Highlight the correct channel when the images rotate
	            function gotoChannel(channel){
	            	if (channel > totalChannels) {
	            	    channel = 1;
	                }
	                $channels.removeClass('active').attr("href", "#");
	                $("#m" + channel).addClass('active').removeAttr('href');
	                $imageLinks.addClass('hidden');
	                $("#mi" + channel).removeClass('hidden');
	                currentChannel = channel;
	            }

                // 2. Bind the play/pause control
	            $control.click(function(){
	                if (playing){
	                    $(this).removeClass('active');
	                    playing = false;
	                } else {
	                    $(this).addClass('active');
	                    playing = true;
	                }
	                return false;
	            });

	            // 3. Bind the channel controls
	            $channels.click(function(){
                    playing = true;
                    $control.click();
                    var channel = this.id.replace(/m/, '');
                    gotoChannel(channel);
                    return false;
	            });

	            /**
	             * 3a. Bind the channel selectors
	             * Just in case we ever want to goto from outside this class
	             *
	            $(this).bind('goto', function(event, channel){
	                playing = false;
	                gotoChannel(channel);
	            });
	             */

                // 4. Bind the auto rotation feature
	            $(this).bind('next', function () {
	                if (playing) {
	                    gotoChannel(currentChannel + 1);
	                }
	            });
	        });
	    };
	})(jQuery);

    $(document).ready(function(){
        var autoRotate = true,
            seconds    = 5
        ;
        seconds *= 1000;
        $('#marquee').ddMarquee().mouseover(function(){
        	//autoRotate = false;
        }).mouseout(function(){
        	//autoRotate = true;
        });
        setInterval(function(){
            if (autoRotate) {
                $('#marquee').trigger('next');
            }
        }, seconds);
    });
});