var mainMap = null;
var ctlMainMap = null;
var miniMap = null;
var ctlMiniMap = null;
var mapCheckID;

var timeMapXml = null;

var slidervalue = 0;

var winwidth;
var winheight;
var zoomlevel = 17;

var miniMapElement = null;

var currentYear = new Date().getFullYear();

var sidebarVisible = false;

var flipped = false;


$().ready(function() {

    $(".dropdown").hide().css({ zIndex: 10000 }); ;
    $("#navi li").hover(
         function() {
             $(this).find(".dropdown").show();
         },
         function() {
             $(this).find(".dropdown").hide();
         }
     )
    //show splash screen
    //jQuery.slimbox("Images/splash2.jpg", 'Please email us at <a href="mailto:info@shoothill.com?subject=TimeMap Demo">info@shoothill.com</a>');
    optionsClosed = true;
    //Put in the DIV id you want to display
    ShowSplash('#dialog');

    $("#dialogdemo").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        width: "350px",
        height: "157px"
        /*buttons: { "Ok": function() { $(this).dialog("close"); }}*/
    });

    $('#scope').css("opacity", "0.5");

    //if close button is clicked
    $('.window .close').click(function() {
        $('#mask').hide("fast");
        $('.window').hide("fast");
    });

   

    //if mask is clicked
    //    $('#mask').click(function() {
    //        $(this).hide("fast");
    //        $('.window').hide("fast");
    //    });	

    //map loading
    mapCheckID = setInterval(function() {
        if (velocityList.length > 0) {
            for (var i = 0; i < velocityList.length; i++) {
                if (mainMap == null) {
                    if (velocityList[i].get_controlID() == "VELocityMain") {
                        mainMap = velocityList[i].GetMapInstance();
                        ctlMainMap = velocityList[i];
                    }
                }

                if (miniMap == null) {
                    if (velocityList[i].get_controlID() == "VELocityMini") {
                        miniMap = velocityList[i].GetMapInstance();
                        ctlMiniMap = velocityList[i];
                        miniMap.HideDashboard();
                    }
                }
            }

            //if we've got both maps and the xml
            if (mainMap != null && miniMap != null && timeMapXml != null) {
                clearInterval(mapCheckID);
                setTimeout(function() { initialise(); }, 1000);
            }
        }
    }, 1000);

    //load the timemap xml client-side
    $.ajax({
        url: "timemap.xml",
        dataType: "xml",
        cache: false,
        success: function(xml) {
            timeMapXml = xml;
        }
    });

    //set up the slider on the time window
    $('.slider_bar').slider({
        handle: '.slider_handle',

        start: function(e, ui) {
        },

        stop: function(e, ui) {
        },

        slide: function(e, ui) {
            slidervalue = ui.value;
            setimages();
        }
    });

    //set up the draggable time window
    $('#MiniMapWrapper').draggable({
        //opacity: 0.75,
        handle: '#DragMe',

        delay: 20,

        scroll: false,

        //        start: function(e, ui) {
        //        },

        stop: function(e, ui) {
            $('#scope').animate({ opacity: 0.5 }, 'slow');
            setTimeout(setimages, 200);
        },

        start: function(e, ui) {
            $('#scope').css("opacity", "0.8");

            if (scopeHidden) {
                ToggleScope();
            }

        },

        drag: function(e, ui) {
            DrawMiniMap(e, ui);
            setimages();
        },

        containment: '#VELocityMain'

    });

    //$('#scope').css('opacity', '0.5');

    if (window.attachEvent) {
        window.attachEvent("onresize", PageResize);
        window.attachEvent("onunload", PageUnload);
        window.attachEvent("onscroll", PageScroll);
    } else {
        window.addEventListener("resize", PageResize, false);
        window.addEventListener("unload", PageUnload, false);
        window.addEventListener("scroll", PageScroll, false);
    }

    miniMapElement = document.getElementById('MiniMapWrapper');

    $("#FlipTimescope").click(
        function() {
            flipped = !flipped;
            MapModeToggle({ checked: flipped });
            setTimeout(setimages, 1000);
        }
    );

    $("#TimeDateSliderTool").click(
        function() {
            $("#MiniFooter").toggle();
        }
    );

    //    $(".option_item").toggle(
    //        function() {
    //            $(this).css({ "color": "red" });
    //        },
    //        function() {
    //            $(this).css({ "color": "white" });
    //        }
    //    );

    $('MSVE_obliqueNotifyBeak').css("display", "none");
    $('MSVE_obliqueNotifyContent').css("display", "none");

    //$('#shoothilllogo').appendTo('#VELocityMain');

    $("img[@src$=png]").pngFix();


    setInterval(function() { setimages(); }, 2000);

});

function PageResize() {
    MapResize();
}

function PageScroll(e) {
    document.documentElement.scrollTop ? document.documentElement.scrollTop = 0 : document.body.scrollTop = 0;
    return false;
}

//Clean up all objects
function PageUnload() {
    if (mainMap != null) {
        mainMap = null;
    }
    if (miniMap != null) {
        miniMap = null;
    }
}

function initialise() {

    //debugger;

    miniMap.HideDashboard();

    //Set the current zoom level of the mini-map
    zoomlevel = mainMap.GetZoomLevel();

    //Draw the minimap if user finishes panning or zoomed on the main map
    //    mainMap.AttachEvent("onmouseup", DrawMiniMap);
    mainMap.AttachEvent("onendzoom", onendzoom);
    mainMap.AttachEvent("onendpan", endpan);

    //If Enter into birds eye mode, adjust mini-map to correct level (zoom level 17)
    mainMap.AttachEvent("onchangemapstyle", MapChangeStyle);

    
    //Disable user interaction with the mini-map
    miniMap.AttachEvent("onmousedown", DisableMiniMap);
    //miniMap.AttachEvent("ondoubleclick", DisableMiniMap);
    //miniMap.AttachEvent("onmousewheel", DisableMiniMap);
    miniMap.AttachEvent("ondoubleclick", MiniMapZoom);
    miniMap.AttachEvent("onmousewheel", MiniMapZoom);

    MapResize();

    //remove any nodes that might already be there
    $("#TimeSliderDates").empty();

    //get all the maps declared in the xml, and add them to the timemap application
    if (($.browser.mozilla && $.browser.version.substr(0, 3) == "1.8") || $.browser.safari)
        var maps = timeMapXml.getElementsByTagName("map");
    else
        var maps = timeMapXml.getElementsByTagName("tm:map");

    for (i = 0; i < maps.length; i++) {
        var id = maps[i].getAttribute("id");
        var name = maps[i].getAttribute("name");
        var area = maps[i].getAttribute("area");
        var year = parseInt(maps[i].getAttribute("year"));
        var tilesource = maps[i].getAttribute("tilesource");

        AddMap(id, name, area, year, tilesource);
    }

    var yearNode = document.createElement("div");
    yearNode.setAttribute("id", currentYear);
    yearNode.appendChild(document.createTextNode(currentYear));

    $("#TimeSliderDates").append(yearNode);

    //align the oldest date left, the newest right

    var dates = $("#TimeSliderDates div");

    if (dates.length > 1) {
        $(dates[0]).css("text-align", "left");
        $(dates[dates.length - 1]).css("text-align", "right");
    }
    
    for(i = 0; i < dates.length; ++i) {
        $(dates[i]).css("display", "none");
    }

    //Draw the minimap at its current location and hide dashboard
    DrawMiniMap();
    setTimeout(function() { setimages(); }, 1000);

//    if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//            //IE 6+ in 'standards compliant mode'
//            winwidth = document.documentElement.clientWidth;
//            $('#timebanner')[0].style.width = winwidth;
//            
//        }

    /////////////////////////////////////////////////////////////
    // DEMO HACK
    /////////////////////////////////////////////////////////////

    //Pin here (old lead works in Kingsland, Shrewsbury)
    //52.702447,-2.756576

//    ctlMainMap._enableMouseEvents = false;
//    var mainMapPin = new VEShape(VEShapeType.Pushpin, new VELatLong(52.702447, -2.756576));
//    mainMapPin.SetCustomIcon("images/PP001.png");
//    mainMap.AddShape(mainMapPin);

//    //disable mouse over events to stop pin popup being shown
//    mainMap.AttachEvent("onmouseover", function(e) {
//        if (e.elementID != null && e.elementID == mainMapPin.GetId()) {
//            //mainMap.HideInfoBox();
//            //Cancel default action
//            return true;
//        }
//    });
//    mainMap.AttachEvent("onmouseout", function(e) {
//        if (e.elementID != null && e.elementID == mainMapPin.GetId()) {
//            //mainMap.HideInfoBox();
//            //Cancel default action
//            return true;
//        }
//    });

//    miniMap.ClearInfoBoxStyles();
//    ctlMiniMap._enableMouseEvents = false;
//    var miniMapPin = new VEShape(VEShapeType.Pushpin, new VELatLong(52.702447, -2.756576));
//    miniMapPin.SetCustomIcon("images/PP001_Sepia.png");
//    miniMap.AddShape(miniMapPin);
//    //miniMapPin.SetTitle("test");
//    miniMapPin.SetDescription("<a href=\"http://archive.timesonline.co.uk/\" target=\"_blank\"><img src=\"images/TimesMapPopup.png\" alt=\"\" /></a>");
//    //miniMapPin.SetPhotoURL("images/TimesMapPopup.png");
//    //miniMapPin.SetMoreInfoURL("http://www.shoothill.com");

    /////////////////////////////////////////////////////////////
    // END DEMO HACK
    /////////////////////////////////////////////////////////////

}


function DrawMiniMap(e, ui) {
    //We dont have a minimap in 3d mode fo
    if (mainMap.GetMapMode() == VEMapMode.Mode3D)
        return false;

    var left;
    var top;
    var width;
    var height;

    if (ui == null || ui == undefined) {
        left = miniMapElement.style.pixelLeft;
        top = miniMapElement.style.pixelTop;
        width = miniMapElement.style.pixelWidth;
        height = miniMapElement.style.pixelHeight;
    }
    else {
        left = ui.position.left;
        top = ui.position.top;

        if (ui.size == null || ui.size == undefined) {
            width = miniMapElement.style.pixelWidth;
            height = miniMapElement.style.pixelHeight;
        }
        else {
            width = ui.size.width;
            height = ui.size.height;
        }
    }

    //Add left offset to move minimap left
    left += 250 - ((474 - width) / 2);
    top += 197 - ((442 - height) / 2);

    miniMap.SetCenterAndZoom(mainMap.PixelToLatLong(new VEPixel(left, top)), zoomlevel);
}

function onendzoom() {

    //not happy with this, but developer testing shows that it
    //stops (or at least drastically reduces) the maps getting stuck 
    //in a postback-event loop, constantly zooming and/or panning
    setTimeout(function() {
        zoomlevel = mainMap.GetZoomLevel();
        DrawMiniMap();
        setTimeout(setimages, 200);
    }, 200);

}

function endpan() {

    //not happy with this, but developer testing shows that it
    //stops (or at least drastically reduces) the maps getting stuck 
    //in a postback-event loop, constantly zooming and/or panning
    setTimeout(function() {
        DrawMiniMap();
        setTimeout(setimages, 200);
    }, 200);

}

function setimages() {

    //clear the available years array
    var availableYears = new Array();

    //go through the image array

    var imgArray;
    var otherArray;

    if (flipped) {
        imgArray = $('#VELocityMain .MSVE_ImageTile');
        otherArray = $('#VELocityMini .MSVE_ImageTile');
    } else {
        imgArray = $('#VELocityMini .MSVE_ImageTile');
        otherArray = $('#VELocityMain .MSVE_ImageTile');
    }

    var imgArrayLength = imgArray.length;
    var otherArrayLength = otherArray.length;

    for (var index = 0; index < imgArrayLength; index++) {
        getAvailableYears(imgArray[index], availableYears);
    }

    //sort the available years
    availableYears.sort(function(a, b) {
        return parseInt(a.map.getAttribute("year")) - parseInt(b.map.getAttribute("year"));
    });

    //add the current year as the last available one
    availableYears.push({
        sliderYear: $("#" + currentYear),
        map: null
    });

    var numAvailableYears = availableYears.length;

    //now we have a list of available years, we can set the opacity
    for (var index = 0; index < imgArrayLength; index++) {
        setOpacity(imgArray[index], availableYears, numAvailableYears);
    }

    //hide all the other images
    for (var index = 0; index < otherArrayLength; index++) {
        var image = otherArray[index];
        
        for (var yearIdx = 0; yearIdx < numAvailableYears; yearIdx++) {
            if (availableYears[yearIdx].map != null) {

                if ($.browser.msie && $.browser.version == "6.0" && image.style.filter.indexOf(availableYears[yearIdx].map.getAttribute("id")) > 0) {
                    var filter = image.style.filter.split('opacity');
                    image.style.filter = filter[0] + "opacity = 0)";
                }
                else if (image.src != null && image.src.indexOf(availableYears[yearIdx].map.getAttribute("id")) > 0) {
                    $(image).css('opacity', 0);
                }
            }
        }
    }

    //hide all the years on the slider that aren't in the available list
    var sliderYears = $("#TimeSliderDates div");
    var sliderYearsLength = sliderYears.length;

    for (var yearIdx = 0; yearIdx < sliderYearsLength; yearIdx++) {

        //if this year hasn't already been added
        var available = false;

        if (parseInt(sliderYears[yearIdx].id) == currentYear)
            available = true;
        else {
            for (var j = 0; j < numAvailableYears; j++) {
                if (availableYears[j].map != null && availableYears[j].map.getAttribute("year") == sliderYears[yearIdx].id) {
                    available = true;
                    break;
                }
            }
        }

        if ($(sliderYears[yearIdx]).css("position") != "absolute") {
            $(sliderYears[yearIdx]).css("position", "absolute");
        } 

        if (available) {

            if ($(sliderYears[yearIdx]).css("display") == "none") {
                $(sliderYears[yearIdx]).css("display", "");
                //$(sliderYears[yearIdx]).css("opacity", "0");
                //$(sliderYears[yearIdx]).fadeIn("slow");
            }
        }
        else {
            if ($(sliderYears[yearIdx]).css("display") != "none") {
                //$(sliderYears[yearIdx]).fadeOut("slow", function() { $(sliderYears[yearIdx]).css("display", "none"); });
                $(sliderYears[yearIdx]).css("display", "none");
            } 
        }
    }

    //FFSetWidth(sliderYears, sliderYearsLength, availableYears.length);

    SetupSliderText(sliderYears, sliderYearsLength, availableYears.length);

}

//function FFSetWidth(sliderYears, sliderYearsLength, availableYears) {
//    if ($.browser.mozilla) {
//        for (var yearIdx = 0; yearIdx < sliderYearsLength; ++yearIdx) {
//            if ($(sliderYears[yearIdx]).css("display") != "none") {
//                $(sliderYears[yearIdx]).css("width", 300 / availableYears + "px");
//            }
//        }
//    }
//}

function SetupSliderText(sliderYears, sliderYearsLength, availableYears) {

    var yearIdx = 0
    //set the leftmost visible year to left align
    for (; yearIdx < sliderYearsLength; ++yearIdx) {
        if ($(sliderYears[yearIdx]).css("display") != "none") {
            $(sliderYears[yearIdx]).css("text-align", "left");
            $(sliderYears[yearIdx]).css("left", "5px");
            ++yearIdx;
            break;
        }
    }

    var visYear = 1;
    //set all middle visible years to center align
    for (; yearIdx < sliderYearsLength; ++yearIdx) {
        $(sliderYears[yearIdx]).css("text-align", "center");
        //$(sliderYears[yearIdx]).css("text-align", "left");

        if ($(sliderYears[yearIdx]).css("display") != "none" && availableYears > 1) {
            $(sliderYears[yearIdx]).css("left", ((300 / (availableYears - 1)) * visYear++) + "px");
        }
    }

    //set the rightmost visible year to right align
    for (yearIdx = sliderYearsLength - 1; yearIdx >= 0; --yearIdx) {
        if ($(sliderYears[yearIdx]).css("display") != "none") {
            $(sliderYears[yearIdx]).css("text-align", "right");
            $(sliderYears[yearIdx]).css("right", "10px");
            break;
        }
    }  
}


function getAvailableYears(image, availableYears) {

    //go thorough each map added to timemap
    if (($.browser.mozilla && $.browser.version.substr(0, 3) == "1.8") || $.browser.safari)
        var maps = timeMapXml.getElementsByTagName("map");
    else
        var maps = timeMapXml.getElementsByTagName("tm:map");

    for (i = 0, mapsLength = maps.length; i < mapsLength; i++) {

        var mapid = maps[i].getAttribute("id");

        //if the maps id is present in the tile images src
        if ((image.src != null && image.src.indexOf(mapid) > 0) || ($.browser.msie && $.browser.version == "6.0" && image.style.filter.indexOf(mapid) > 0)) {
            //then we know which map this tile belongs to

            //find the year marker on the slider
            var year = maps[i].getAttribute("year");
            var sliderYear = $("#" + year);

            //if this year hasn't already been added
            var alreadyAdded = false;

            for (var j = 0, availableYearsLength = availableYears.length; j < availableYearsLength; j++) {
                if (availableYears[j].map.getAttribute("id") == mapid) {
                    alreadyAdded = true;
                    break;
                }
            }

            if (!alreadyAdded) {
                //add this info to the available years list
                availableYears.push({
                    sliderYear: sliderYear,
                    map: maps[i]
                });
            }

            break;
        }

    }
}

function setOpacity(image, availableYears, numAvailableYears) {

    for (var yearIdx = 0; yearIdx < numAvailableYears; yearIdx++) {
        if (availableYears[yearIdx].map != null) {
            if ($.browser.msie && $.browser.version == "6.0" && image.style.filter.indexOf(availableYears[yearIdx].map.getAttribute("id")) > 0) {
                var filter = image.style.filter.split('opacity');
                image.style.filter = filter[0] + "opacity = " + calculateOpacity(slidervalue, yearIdx, numAvailableYears) * 100 + ")";
            }
            else if (image.src != null && image.src.indexOf(availableYears[yearIdx].map.getAttribute("id")) > 0) {
                $(image).css('opacity', calculateOpacity(slidervalue, yearIdx, numAvailableYears));
            }
        }
    }
}

function calculateOpacity(value, index, count) {

    /*
    ok, here's the skinny on this mofo:
        
    * value is the value of the slider bar, from 0 to 100
    * index is the zero-based index of the the current item we are calculating
    * count is the total number of items    
    */

    if (count > 0) {

        var valuePerItem = 100 / (count - 1);

        var indexBasedPosition = value / valuePerItem;

        var ratio = Math.abs(indexBasedPosition - index);

        var opacity = 1 - ratio;

        if (opacity < 0)
            opacity = 0;

        return opacity;
    }
    else
        return 1;
}

function MapChangeStyle(e) {
    //have to check if you entered birds eye style on the main map
    if (e.mapStyle == "o") {
        zoomlevel = 17;
        DrawMiniMap();
    }
    //if we change style of main map to anything else, reset the zoom level for mini-map
    else {
        zoomlevel = mainMap.GetZoomLevel();
        DrawMiniMap();
    }
}

function MapResize() {
    var offsetx = -10;
    var offsety = 104;

    if (mainMap != null) {
        if (typeof (window.innerWidth) == 'number') {
            //Non-IE
            winwidth = window.innerWidth - offsetx;
            winheight = window.innerHeight - offsety;
        }
        else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            //IE 6+ in 'standards compliant mode'
            winwidth = document.documentElement.clientWidth - offsetx;
            winheight = document.documentElement.clientHeight - offsety;
        }

        var velMain = $("#VELocityMain");

        velMain.height(winheight);
        velMain.width(winwidth);

        mainMap.Resize(winwidth, winheight);
    }
}

//used to disable map panning and zooming in the mini-map
function DisableMiniMap() {
    return true;
}

function MiniMapZoom(e) {

    switch (e.eventName) {
        case "ondoubleclick":
            mainMap.SetZoomLevel(e.zoomLevel + 1);
            break;
        case "onmousewheel":
            if (e.mouseWheelChange != 0)
                mainMap.SetZoomLevel(e.zoomLevel + (e.mouseWheelChange / Math.abs(e.mouseWheelChange)));
            break;
    }

    return true;
}



function Toggle3D() {
    //mainMap.SetMapMode(VEMapMode.Mode3D);
    DemoWarning();
}



var scopeHidden = false;
function ToggleScope() {
    if (scopeHidden) {
        $('#scope').animate({ opacity: 0.5 }, "slow");
        $('#HideScope').html("Hide Scope");
    }
    else {
        $('#scope').animate({ opacity: 0 }, "slow");
        $('#HideScope').html("Show Scope");
    }
    scopeHidden = !scopeHidden;
}

function HistoricShrewsbury() {
    setTimeout(function() { HistoricZoom(52.702447, -2.756576, 17); }, 500);
}

function HistoricWapping() {
    setTimeout(function() { HistoricZoom(51.513366, -0.099838, 16); }, 500);
}

function HistoricPhotos() {
    setTimeout(function() { HistoricZoom(51.471392, -0.45333, 17); }, 500);
}

function HistoricZoom(lat, lon, zoom) {
    mainMap.SetCenterAndZoom(new VELatLong(lat, lon), zoom);
    setTimeout(function() { DrawMiniMap(); }, 500);
    setTimeout(function() { setimages(); }, 1000);
}

//adds a map to the time map application
function AddMap(id, name, area, year, tilesource) {

    ////////////////////////////////////////
    //add the year to the slider bar legend

    var yearNode = document.createElement("div");
    yearNode.setAttribute("id", year);
    yearNode.appendChild(document.createTextNode(year));

    var existingYears = $("#TimeSliderDates div");

    //if we already have some years added

    if (existingYears.length > 0) {
        var added = false;

        //find the first year greater than this one and insert it
        existingYears.each(function(i) {
            var y = parseInt(this.id);
            if (y > year) {
                $(this).before(yearNode);
                added = true;
                return false;
            }
            return true;
        });

        if (!added)
            $("#TimeSliderDates").append(yearNode);
    }
    else {
        //add the first year
        $("#TimeSliderDates").append(yearNode);
    }

    /////////////////////////////////
    //add the tile source to the maps

    //TODO: At the moment this is just adding the tile sources client side. I suppose we should be using VELocity as the tile server and 
    //      add these tile sources server side, but that would require some changes to VELocity to allow dynamic changes to the tile servers.

    var tileSourceSpec = new VETileSourceSpecification(id, tilesource);

    tileSourceSpec.ZIndex = 100;
    if ($.browser.msie && $.browser.version == "6.0") {
        tileSourceSpec.Opacity = 0.99;
    }
    miniMap.AddTileLayer(tileSourceSpec, true);
    mainMap.AddTileLayer(tileSourceSpec, false);

}

function MapModeToggle(e) {
    //debugger;

    if (e.checked) {
        miniMap.HideAllTileLayers();
        mainMap.ShowAllTileLayers();
    }
    else {
        miniMap.ShowAllTileLayers();
        mainMap.HideAllTileLayers();
    }
}

var optionsClosed = false;
//var historyClosed = false;
function ToggleSidebar(el) {

    var elHeightMin, elLeftMin, elHeightMax, elLeftMax, elTopMin, elTopMax, headerId;
    var element;

    elHeightMin = 34;
    elHeightMax = 213;
    elLeftMin = -77;
    elLeftMax = -145;
    elTopMin = 80;
    elTopMax = 251;

    switch (el) {
        case "MiniSidebar":
            headerId = el + "Header";
            optionsClosed = !optionsClosed;
            break;

//        case "MiniSidebarLower":
//            headerId = "MiniSidebarHeaderLower";
//            historyClosed = !historyClosed;
//            break;
    }

    if ((optionsClosed && el == "MiniSidebar") /*|| (historyClosed && el == "MiniSidebarLower")*/) {
        $("#" + el).animate({ height: elHeightMin /*,height: $("#MiniSidebar").height(),opacity: 'hide'*/ }, "slow", "", function() {
            $("#" + el).animate({ left: elLeftMin, width: 87 /*, height: $("#MiniSidebar").height(),opacity: 'hide'*/ }, "slow");
            $("#" + headerId).animate({ left: elLeftMin, width: 87 /*, height: $("#MiniSidebar").height(),opacity: 'hide'*/ }, "slow", "", function() {
                //if (/*el == "MiniSidebarLower" &&*/optionsClosed) {
                    //$("#MiniSidebarLower").animate({ top: elTopMin /*, height: $("#MiniSidebar").height(),opacity: 'hide'*/ }, "slow");
                    //$("#MiniSidebarHeaderLower").animate({ top: elTopMin /*, height: $("#MiniSidebar").height(),opacity: 'hide'*/ }, "slow");
                //}
            });
        });
    }
    else {

        if (/*el == "MiniSidebarLower" &&*/!optionsClosed) {
            //$("#MiniSidebarLower").animate({ top: elTopMax /*, height: $("#MiniSidebar").height(),opacity: 'hide'*/ }, "slow");
//            $("#MiniSidebarHeaderLower").animate({ top: elTopMax /*, height: $("#MiniSidebar").height(),opacity: 'hide'*/ }, "slow", "", function() {
                $("#" + headerId).animate({ left: elLeftMax, width: 160 /*,height: $("#MiniSidebar").height(),opacity: 'hide'*/ }, "slow", "", function() {
                    $('#' + el).css("left", elLeftMax).css("width", 160);
                    $("#" + headerId).animate({ left: elLeftMax/*, height: $("#MiniSidebar").height(),opacity: 'hide'*/ }, "slow");
                    $("#" + el).animate({ height: elHeightMax /*, height: $("#MiniSidebar").height(),opacity: 'hide'*/ }, "slow");
                });
//            });
        }
        else {
            $("#" + headerId).animate({ left: elLeftMax, width: 160 /*,height: $("#MiniSidebar").height(),opacity: 'hide'*/ }, "slow", "", function() {
                $('#' + el).css("left", elLeftMax).css("width", 160);
                $("#" + headerId).animate({ left: elLeftMax /*, height: $("#MiniSidebar").height(),opacity: 'hide'*/ }, "slow");
                $("#" + el).animate({ height: elHeightMax /*, height: $("#MiniSidebar").height(),opacity: 'hide'*/ }, "slow");
            });
        }
    }
}

function ShowSplash(id) {

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set heigth and width to mask to fill up the whole screen
    $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

    //transition effect		
    //$('#mask').show();
    $('#mask').fadeTo("slow", 0.8);

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top', winH / 2 - $(id).height() / 2);
    $(id).css('left', winW / 2 - $(id).width() / 2);

    //transition effect
    $(id).css("opacity", "0");
    $(id).show();
    $(id).fadeTo("5000", 0.8);

    //make sure the mask stays the size of the page
    $(window).resize(function() {
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
    });
}

function DemoWarning() {
    $("#dialogdemo").dialog("open");
    $("#dialogdemo img").css("opacity", "0");
    $("#dialogdemo img").fadeTo("fast", 0.9);
}