$(document).ready(function(){
    var scrollStep      = 806;
    var scrollInterval  = 500;
    var scrollLength    = 5;
    var canScroll       = true;
    var scrollCurItem   = null;

    function sizeToNumber(sz){
        return sz == "auto" ? 0 : +sz.replace("px", "");
    }
    function updateDependencyLabels(scroller, noAnimations) {
        var item = scrollCurItem;
        var link = item.find("a:first");
        var play = item.find("a:last");
        var img  = item.find("img:first");

        if ( noAnimations ){
            $(".current-song")
                .text(link.text())
                .attr("href", link.attr("href"));

            $(".current-channel")
                .text(img.attr("alt"))
        }
        else {
            $(".current-song").animate({ opacity: 0.2 }, scrollInterval / 2, function() {
                $(".current-song")
                    .text(link.text())
                    .attr("href", link.attr("href"))
                    .animate({ opacity: 1.0 }, scrollInterval / 2);
            });

            $(".current-channel").animate({ opacity: 0.2 }, scrollInterval / 2, function() {
                $(".current-channel")
                    .text(img.attr("alt"))
                    .animate({ opacity: 1.0 }, scrollInterval / 2);
            });
        }

        $(".media-player img:first")
            .attr("src", play.attr("href"))
    }
    
    function getFirst(scroller)
    {
        var minLeft = 10000000;
        var minNode = null;

        scroller
            .find(".carousel-item")
            .each(function(){
                var left = sizeToNumber($(this).css("left"));
                if ( left < minLeft ){
                    minLeft = left;
                    minNode = $(this);
                }
        });

        return minNode;
    }
    function getLast(scroller)
    {
        var maxLeft = -10000000;
        var maxNode = null;

        scroller
            .find(".carousel-item")
            .each(function(){
                var left = sizeToNumber($(this).css("left"));
                if ( left > maxLeft ){
                    maxLeft = left;
                    maxNode = $(this);
                }
        });

        return maxNode;
    }
    function getNext(scroller, item)
    {
        var itemLeft = sizeToNumber(item.css("left"));
        var nextNode = null;

        scroller
            .find(".carousel-item")
            .each(function(){
                var left = sizeToNumber($(this).css("left"));
                if ( left == itemLeft + scrollStep ){
                    nextNode = $(this);
                }
        });

        return nextNode;
    }
    function getPrev(scroller, item)
    {
        var itemLeft = sizeToNumber(item.css("left"));
        var prevNode = null;

        scroller
            .find(".carousel-item")
            .each(function(){
                var left = sizeToNumber($(this).css("left"));
                if ( left == itemLeft - scrollStep ){
                    prevNode = $(this);
                }
        });

        return prevNode;
    }
    function scrollCarousel(scroller, direction, noAnimation)
    {
        var firstItem = getFirst(scroller);
        var lastItem  = getLast(scroller);

        if ( direction == 1 && scrollCurItem.css("left") ==  firstItem.css("left") ) { 
            var leftSize = sizeToNumber( lastItem.css("left") );

            lastItem.css("left", (leftSize - scrollLength * scrollStep) + "px" );
            scrollCurItem = lastItem;
        }
        else if ( direction == -1 && scrollCurItem.css("left") ==  lastItem.css("left") ) {
            var leftSize = sizeToNumber( firstItem.css("left") );

            firstItem.css("left", (leftSize + scrollLength * scrollStep) + "px" );
            scrollCurItem = firstItem;
        }
        else {
            if ( direction == 1 ){
                scrollCurItem = getPrev( scroller, scrollCurItem );
            }
            if ( direction == -1 ){
                scrollCurItem = getNext( scroller, scrollCurItem );
            }
        }

        updateDependencyLabels(scroller, noAnimation);

        scroller
            .find(".carousel-item")
            .animate({
                left : (direction == 1 ? "+=" : "-=") + scrollStep
                }, noAnimation ? 0 : scrollInterval, function() { canScroll = true; } );
    }
    
    $(".carousel").each(function(){
        try
        {
            var pos = 0;
            $(".carousel-item").each(function(){
                $(this).css("left", pos + "px");
                pos += scrollStep;
            });

            scrollCurItem = $(".carousel-item:first");

			var cur = scrollCurItem;

			var loc  = document.location.toString();
			var lim  = loc.indexOf('/', 10);
			var from = loc.indexOf('/', lim) + 1;
			var to   = loc.indexOf('/', from);
			var src  = loc.substring(from, to);	
			
			$(".carousel-item").each(function(){
				if (src.toLowerCase() == $(this).attr("id").toLowerCase() ){
					cur = $(this);
				}
			});
			
			var stop = 0;
			while ( cur.attr("id") !=  scrollCurItem.attr("id") && stop < 100)
				scrollCarousel($(".carousel"), 1, true), stop++;	
       	}
        catch(e)
        {
			alert(e);
        }
    });

	$(".carousel-items").show();
	
    $(".carousel-left").click(function(){
        if ( !canScroll )
            return false;

        try{
            canScroll = false;

            scrollCarousel($(this).parent(), -1);
        }
        catch(e){
        }
    });
    $(".carousel-right").click(function(){
        if ( !canScroll )
            return false;

        try{
            canScroll = false;

            scrollCarousel($(this).parent(), +1);
        }
        catch(e){
        }
    });


    var balloonHtml =
            "<div class='balloon'>" + 
                "<div class='balloon-center'>" +
                    "<span class='balloon-header'>{0}</span>" +
                    "<span class='balloon-description'>{1}</span>" +
                    "<a class='balloon-contact' href='#'>{2}</a>" +
                "</div>" +
                "<div class='balloon-right'></div>" +
            "</div>";

    var balloon = $(balloonHtml);

    $("#dj-list .dj")
        .each(function(){
            $(this).wrap("<div class='dj-wrapper'></div>");
        });


    balloon
        .mouseout(function(){
            balloon.hide();
        });

    $("#dj-list .dj-wrapper")
        .mouseenter(function(){
            var wrapper = $(this);
            var items = wrapper.find("img").attr("alt").split('|');
            var header = $.trim(items[0]);
            var desc = $.trim(items[1]);
            var mail = $.trim(items[2]);
            var html = balloonHtml.replace("{0}", header).replace("{1}", desc).replace("{2}", mail);

            $("#dj-list .dj-wrapper").css("z-index", "1");
            wrapper.css("z-index", "1000");

            wrapper
                .append(html)
                .find(".balloon")
                    .mouseout(function(){
                        $(".balloon").hide().remove();
                    })
                    .show()
                .end();
        })
        .mouseleave(function() {
            $(".balloon").hide().remove();
        });

    var loginTpl  = "#auth-form";
    var loginTpl  = "#auth-form-user";

    var loginForm = $(loginTpl)
        .hide()
        .mouseleave(function(){
            loginForm.slideUp();
        });

    $("#user-menu")
        .append(loginForm);

    $("#auth-link").click(function(){
        if ( loginForm.is(":visible") )
            loginForm.slideUp("fast");
        else
            loginForm.slideDown("fast");

        return false;
    });


    $(".more").click(function(){
        if ( $("#drop-menu").is(":visible") )
            $("#drop-menu").slideUp("fast");
        else
            $("#drop-menu").slideDown("fast");

        return false;
    });

    $("#drop-menu")
        .mouseleave(function(){
            $(this).slideUp("fast");
        })
        .click(function(){
            $(this).slideUp("fast");
        });

    var speedShow = 300;
    var speedHide = 200;

    $("#logo")
        .empty()
        .append("<div id='logo-1'></div>")
        .append("<div id='logo-2'></div>")
        .find("div")
            .css("width", "154px")
            .css("height", "65px")
            .css("position", "absolute")
            .css("left", "0px")
            .css("top", "0px")
        .end()
        .find("#logo-1")
            .css("opacity", "1.0")
            .css("background-image", "url('/images/logo.png')")
            .css("z-index", "200")
        .end()
        .find("#logo-2")
            .css("opacity", "1.0")
            .css("background-image", "url('/images/logo-hover.png')")
            .css("z-index", "100")
        .end()
        .mouseenter(function(){
            var a = $(this).find("#logo-1");
            var b = $(this).find("#logo-2");
            a.css("z-index", 200);
            b.css("z-index", 100);
            b.stop(1,1).fadeIn(speedShow, function(){ a.fadeOut(speedHide, function(){ a.hide(); b.show(); }); }, "easein");
        })
        .mouseleave(function(){
            var a = $(this).find("#logo-1");
            var b = $(this).find("#logo-2");
            a.css("z-index", 100);
            b.css("z-index", 200);
            a.stop(1,1).fadeIn(speedShow, function(){ b.fadeOut(speedHide, function(){ b.hide(); a.show(); }); }, "easein");
        });
});