/*
    DMS 20110610 - Wrote from the ground up and works on the frontpage (index.html) to alternate between
                   defined images in an xml file. Currently, two xml files are employed: rotation-images.xml contains
                   default images to rotate between, and leftmenu-items.xml which contains all the data for the left menu including
                   link title, link url, image to display and infobox data.
                   The two xml files should probably be reduced to one (leftmenu-items.xml).
*/

var sliderOptions = {
    sliderSpeed: 5000,
    transitionSpeedImage: 1000,
    transitionSpeedInfo: 500
};

$(function () {

    //slurp in images from xml file
    $.ajax({ type: "GET", url: "/fileadmin/xml/rotation-images.xml", dataType: "xml", success: function (xml) {
        var sliderDiv = $("div#top-right-rotation-slider");
        if (!$(document).data("sliderImages")) {
            var i = 0, j = 0;
            var sliderImages = new Array();

            // Inject images into canvas
            $(xml).find("image").each(function () {
                var oImg = document.createElement("img");
                oImg.src = $(this).text();
                oImg.id = "rotate-image-" + (++i);

                if (i == 1) {
                    $(oImg).addClass("active");
                }

                oImg.alt = "";
                $("div#top-right-rotation").mouseenter(function () {
                    if ($(document).data("menuItemActive")) {
                        stopSortimoSlide();

                        $($(document).data("menuItemActive")).parent().addClass("active");
                    }
                });
                $("div#top-right-rotation").mouseleave(function () {
                    if ($(document).data("menuItemActive")) {
                        stopSortimoSlide();
                        startSortimoSlide();

                        $($(document).data("menuItemActive")).parent().removeClass("active");
                    }
                });

                sliderImages[j++] = oImg;
                $(document).data("sliderImages", sliderImages)
            });
        }
        sliderDiv.append($(document).data("sliderImages"));
    }
    });

    startSortimoSlide();



    // Creates the links used on the left menu from a XML file

    $.ajax({ type: "GET", url: "index.php?type=1338", dataType: "xml", success: function (xml) {
        if (!$(document).data("leftMenu")) {
            var i = 0;
            var leftMenu = new Array();
            $(xml).find("menuItem").each(function () {
                var newDiv = document.createElement("div");
                $(newDiv).addClass("top-left-menu-item");

                var a = document.createElement("a");
                a.setAttribute("href", $(this).find("menuURL").text());
                a.appendChild(document.createTextNode($(this).find("menuTitle").text()));

                // Attach infobox data to link
                a = $(a);
                a.data("image", $(this).find("image").text());
                a.data("title", $(this).find("menuTitle").text());
                a.data("header", $(this).find("infobox-title").text());
                a.data("subheader", $(this).find("infobox-subtitle").text());
                a.data("text", $(this).find("infobox-text").text());
                a.data("linkText", $(this).find("infobox-linkText").text());
                a.data("linkURL", $(this).find("infobox-linkURL").text());

                var sBackground = a.parent().css("background"); // For restore later
                
                //get image paths and add them to the container
                $("#hover-images").append('<img src="' + $(this).find("image").text() + '" alt="" />');

                a.bind("mouseover", function (e) {
                		
                		//hide old elements if they are displayed
                		$('#hover-images img').hide();
										$("div.top-left-menu-item").removeClass("active");
                		
                    stopSortimoSlide();

                    var p = $(this).parent().addClass("active");

                    // Replace current image with the image attached to the link
                    var sImageSrc = "http://www.sortimo.com/" + $(this).data("image");
                    var oOldImg = $("div#top-right-rotation-slider img.active");
                    oOldImg.removeClass("active").css({ opacity: 0 });

                    $("div#top-right-rotation-slider").find("img").each(function () {
                        if ($(this).attr("src") === sImageSrc) {
                            var oImg = $(this);
                            oImg.addClass("active");
                            oImg.css({ opacity: 1 });
                        }
                    });

                    activeNextImage();

                    $(document).data("menuItemActive", this);   // Flag that we shouldn't go back to slide cycle

                    // Inject data into infobox
                    var oInfoBox = $("div#top-right-rotation-infobox");
                    //oInfoBox.find("h3.headline").text($(this).data("header"));
                    oInfoBox.find("h3.headline").text($(this).data("title"));
                    //oInfoBox.find("span#top-right-rotation-infobox-title").text($(this).data("subheader"));
					oInfoBox.find("span#top-right-rotation-infobox-title").text($(this).data("header"));
                    //oInfoBox.find("div#top-right-rotation-infobox-desc").text($(this).data("text"));
					oInfoBox.find("div#top-right-rotation-infobox-desc").text($(this).data("subheader"));
                    var oLink = oInfoBox.find("div#top-right-rotation-infobox-more a");
                    oLink.attr("href", $(this).data("linkURL"));
                    oLink.find("span").html($(this).data("linkText"));

                    oInfoBox.animate({ opacity: 1 }, sliderOptions.transitionSpeedInfo);
                    
                    //get link index and show hover image with the same index
                    var linkIndex = $(this).parent().prevAll().length; 
                    $('#hover-images img:eq(' + linkIndex + ')').show();                   
                    
                });

                a.bind("mouseout", function (e) {
                    //$(this).parent().removeClass("active");
                    startSortimoSlide();
                });

                $(newDiv).append(a);

                leftMenu[i++] = newDiv;
            });

            $(document).data("leftMenu", leftMenu);

            $("div#top-right-rotation-infobox").css({ opacity: 0 }).css("display", "block");
        }

        $("div#top-left-menu").append($(document).data("leftMenu"));
    }
    });



});

function startSortimoSlide() {
    sortimoSlider = setInterval("sortimoSlide()", sliderOptions.sliderSpeed);
}

function sortimoSlide() {
		//hide elements after the interval
		$('#hover-images img').hide();
		$("div.top-left-menu-item").removeClass("active");
		
    activeNext = activeNextImage();

    activeNext.next.css({ opacity: 0 }).addClass("active").animate({ opacity: 1 }, sliderOptions.transitionSpeedImage, function () { activeNext.active.removeClass("active last-active"); });
    $("div#top-right-rotation-infobox").animate({ opacity: 0 }, sliderOptions.transitionSpeedInfo);

    $(document).data("menuItemActive", false);
}

function activeNextImage() {
    var activeImage = $("div#top-right-rotation-slider img.active");
    if (activeImage.length == 0)
        activeImage = $("div#top-right-rotation-slider img:last");

    var nextImage = (activeImage.next().length) ? activeImage.next() : $("div#top-right-rotation-slider img:first");

    activeImage.addClass("last-active");

    return { active: activeImage, next: nextImage };
}

function stopSortimoSlide() {
    clearTimeout(sortimoSlider)
}