$(document).ready(function () {
    $("#marquee").marquee(
        {
            yScroll: "top"                          // the position of the marquee initially scroll (can be  
            // either "top" or "bottom") 
           , showSpeed: 850                          // the speed of to animate the initial dropdown of the messages 
           , scrollSpeed: 12                         // the speed of the scrolling (keep number low) 
           , pauseSpeed: 5000                        // the time to wait before showing the next message or  
            // scrolling current message 
           , pauseOnHover: true                      // determine if we should pause on mouse hover 
           , loop: -1                                // determine how many times to loop through the marquees  
            // (#'s < 0 = infinite) 
           , fxEasingShow: "swing"                   // the animition easing to use when showing a new marquee 
           , fxEasingScroll: "linear"                // the animition easing to use when showing a new marquee 

            // define the class statements 
           , cssShowing: "marquee-showing"

            // event handlers 
           , init: null                              // callback that occurs when a marquee is initialized 
           , beforeshow: null                        // callback that occurs before message starts scrolling on screen 
           , show: null                              // callback that occurs when a new marquee message is displayed 
           , aftershow: null                         // callback that occurs after the message has scrolled 
        }
    );
}); 

//$(document).ready(function () {

//    alert("loaded");

//    $("#marquee").marquee({

//        loop: -1
//        // this callback runs when the marquee is initialized
//			, init: function ($marquee, options) {
//			    debug("init", arguments);

//			    // shows how we can change the options at runtime
//			    if ($marquee.is("#marquee2")) options.yScroll = "bottom";
//			}
//        // this callback runs before a marquee is shown
//			, beforeshow: function ($marquee, $li) {
//			    debug("beforeshow", arguments);

//			    // check to see if we have an author in the message (used in #marquee6)
//			    var $author = $li.find(".author");
//			    // move author from the item marquee-author layer and then fade it in
//			    if ($author.length) {
//			        $("#marquee-author").html("<span style='display:none;'>" + $author.html() + "</span>").find("> span").fadeIn(850);
//			    }
//			}
//        // this callback runs when a has fully scrolled into view (from either top or bottom)
//			, show: function () {
//			    debug("show", arguments);
//			}
//        // this callback runs when a after message has being shown
//			, aftershow: function ($marquee, $li) {
//			    debug("aftershow", arguments);

//			    // find the author
//			    var $author = $li.find(".author");
//			    // hide the author
//			    if ($author.length) $("#marquee-author").find("> span").fadeOut(250);
//			}
//    });
//});

var iNewMessageCount = 0;

function addMessage(selector) {
    // increase counter
    iNewMessageCount++;

    // append a new message to the marquee scrolling list
    var $ul = $(selector).append("<li>New message #" + iNewMessageCount + "</li>");
    // update the marquee
    $ul.marquee("update");
}

function pause(selector) {
    $(selector).marquee('pause');
}

function resume(selector) {
    $(selector).marquee('resume');
}