dojo.requireLocalization("connect", "resources");
dojo.requireLocalization("stratus", "resources");
dojo.require("connect.ConnectApplication");
dojo.require("stratus.MapControl");
dojo.require("stratus.RiaHub");
dojo.require("stratus.util.HeightCalculator");
dojo.require("dojo.fx");
dojo.require("dojo.i18n");
dojo.require("stratus.search.SearchByNearestParameters");
dojo.require("stratus.SearchResultsControl");
dojo.require("stratus.marker.MarkerManager");
dojo.require("connect.help.HelpControl");
var resources = dojo.i18n.getLocalization("connect", "resources");
var widgetsResources = dojo.i18n.getLocalization("stratus", "resources");
var searchResultsControl = null;
var myMap;
var markerManager;

var connectApplication;

//XXX this is the new init method that, together with ConnectApplication and 
//   its helper classes replaces the entire connect JavaScript code. Since 
//   we can't refactor everything at once, we will have to live with a hybrid
//   solution for now. The init() function is intended to be very skinny. It
//   shouldn't contain anything else than a few lines to get ConnectApplication
//   into the right state and a call to ConnectApplication.init().
function init()
{
    var app = new connect.ConnectApplication();
    app.setMapControlContainer(dojo.byId("myMap"));
    app.setLocatorControlContainer(dojo.byId("locator"));
    app.setLocatorResultsControlContainer(dojo.byId("result"));
    app.setSearchResultsControl(searchResultsControl);
    app.setLocatorHistoryContainer(dojo.byId("cacheResultContainer"));
    app.setLocatorControlErrorContainer(dojo.byId("error"));
    app.setPrintControlContainer(dojo.byId("contentLinkPanel"));
    app.setLegendControlContainer(dojo.byId("legend"), dojo.byId("leftPanel"));
    initHelp(dojo.byId("helpLink"));
    app.init();
    connectApplication = app;
}

/**
 * Initialize help link.
 */
function initHelp(containerId)
{
    var language = getLanguageFromLocale();
    var url = 'userguide/' + language + '/userguide.html';
    return new connect.help.HelpControl({url: url},  containerId);
}

/**
 * Return language of the locale.
 */
function getLanguageFromLocale()
{
    var currentLocale = dojo.locale;
    var localeIndex = currentLocale.indexOf('-');
    if(localeIndex > 0)
    {
        currentLocale = currentLocale.substr(0, localeIndex);
    }
    return currentLocale
}

//XXX there shouldn't be any global functions in connect apart from the one
//      dojo.addOnLoad() call.
var expandCContainer = false;
var expandSContainer = false;
var expandFMNContainer = true;
var slider = null;
var sliderIcon = null;
var iconClassName = null;

dojo.addOnLoad(function()
{
    //XXX This control is still created here, moving this out needs
    // lots of work. But showing of this control depends on
    // the existence of the catalog which is done on connectApplication.js
    searchResultsControl = new stratus.SearchResultsControl({},
            dojo.byId("findNearestResults"));

    init();
    dojo.connect(searchResultsControl, "onResultsUpdated",
            "showSearchNearestResults");
    dojo.connect(searchResultsControl, "onSearchResultsRowSelected",
            "showFMNMarkerPopup");
    markerManager = myMap.getMarkerManager();
    
    populatePrintMessage();
});



/**
 * This method expands the FMN container when SearchResultsControl 
 * is populated with the results. 
 */  
function showSearchNearestResults()
{
    // If no results in search results control then do not display clear
    // results link
    var display = searchResultsControl.isEmpty() ? "hidden" : "visible";
    dojo.byId("clearFMNResults").style.visibility = display;
    this.expandFMNContainer = true;
    toggleNearestResultsContainer();
}

/** 
 * When a user selects a findmyNearest result, 
 * this method shows the marker at the center of the map
 * and displays the callout for the marker.
 */
function showFMNMarkerPopup(selectedFeature)
{ 
   var marker = markerManager.getMapMarkerById
           (selectedFeature.properties.stratusid);
   markerManager.showPopupAndRecenterMarker(marker);
}

/* 
 * This function clears the results from the Find Nearest results
 * container and associated markers. 
 */
function clearFindNearestResults()
{
    connectApplication.clearMarkers();
    dojo.byId("clearFMNResults").style.visibility = "hidden";
    this.expandFMNContainer = false;
    toggleNearestResultsContainer();
}

/*
 * Load all other controls that are depended on map control.
 */
function loadControls(myMap)
{
    if (!markerManager)
    {
        markerManager = myMap.getMarkerManager();
        dojo.connect(markerManager, "onMarkerHighlighted", "highlightSRCRow");
        dojo.connect(markerManager, "onMarkerUnHighlighted", 
                "unHighlightSRCRow");
    }
    
    this.slider = dojo.byId("sliderButton");
    this.sliderIcon = dojo.byId("sliderIcon");
    this.iconClassName = 'sliderIconCollapse';
    dojo.connect(this.slider, "onmouseenter","showHover");
    dojo.connect(this.slider, "onmouseleave","showNormal");
   
    //resizeBrowser();
    new stratus.util.HeightCalculator(dojo.byId('content'),
           [dojo.byId('bannerIFrameContainer')]).updateHeight(); 
    new stratus.util.HeightCalculator(dojo.byId('mapContainer')).updateHeight();

    var listener = dojo.hitch(myMap, myMap.refreshMap);
    new stratus.util.HeightCalculator(dojo.byId('myMap'), 
            [dojo.byId('contentLinkPanel'), dojo.byId('printMessage')], listener)
            .updateHeight();
        
    var f = function()
    {
        myMap.resetCenterAndZoomLevel();
    };
    window.setTimeout(f, 0);
    
    new stratus.util.HeightCalculator(dojo.byId('slider'), null)
        .updateHeight();
        
    new stratus.util.HeightCalculator(dojo.byId('sliderButton'), null)
        .updateHeight();
        
    new stratus.util.HeightCalculator(dojo.byId('leftPanel'), null)
        .updateHeight();
        
    collapseResults();
    
    //showCacheResults();
}

/*FIXME What's all this toggling for? 
Why do we hardcode the container height here?*/
function showResults()
{
    this.expandSContainer = true;
    document.getElementById("result").style.height = "245px";
    
    // hide recent results.
    document.getElementById("cachedAddressContainer").style.visibility  =
            "visible";
    // hide cache results
    expandCContainer = false;
    toggleCacheContainer();
    toggleLocatorContainer();
} 
          
function showCacheResults()
{
    connectApplication.updateLocatorHistory();
    document.getElementById("cachedAddressContainer").style.visibility  =
            "visible";
    toggleCacheContainer();
}
          
function resizeBrowser()
{
    var contentdiv = document.getElementById('myMap');    
    resizeHeight(contentdiv);
    resizeWidth(contentdiv);
    resizeScaler(contentdiv);                    
}

function calculateOffsetTop(mapElement) 
{
    var y = mapElement.offsetTop;  
    var elementParent = mapElement.offsetParent;
    
    while (elementParent != null)
    {
        if(document.all)
        {
            if( (elementParent.tagName.toLowerCase() == "div") )
            {
                y += elementParent.clientTop;
            }
        }
        else // Netscape/DOM
        {
            if(elementParent.tagName.toLowerCase() == "div" )
            {
                var parentBorder = parseInt(elementParent.border);
                if(isNaN(parentBorder))
                {
                    var parentFrame = elementParent.getAttribute('frame');
                    if(parentFrame != null)
                    {
                        y += 1;
                    }
                }
                else if(parentBorder > 0)
                {                                
                    y += parentBorder;
                }
            }
        }
        
        if (elementParent.tagName.toLowerCase() == "div") {
            y += elementParent.offsetTop;
        }
        
        elementParent = elementParent.offsetParent;
    }
    
    return y;
}

function calculateOffsetLeft(mapElement) {
  
    var x = mapElement.offsetLeft;  
    var elementParent = mapElement.offsetParent;
    
    while (elementParent != null)
    {
        if(document.all)
        {
            if( (elementParent.tagName.toLowerCase() == "div") )
            {
                x += elementParent.clientLeft;
            }
        }
        else // Netscape/DOM
        {
            if(elementParent.tagName.toLowerCase() == "div" )
            {
                var parentBorder = parseInt(elementParent.border);
                if(isNaN(parentBorder))
                {
                    var parentFrame = elementParent.getAttribute('frame');
                    if(parentFrame != null)
                    {
                        x += 1;
                    }
                }
                else if(parentBorder > 0)
                {                                
                    x += parentBorder;
                }
            }
        }
        if (elementParent.tagName.toLowerCase() == "div") {
            x += elementParent.offsetLeft;
        }
        
        elementParent = elementParent.offsetParent;
    }
    
    return x;                
}

function resizeHeight(mapElement)
{
    var browserHeight = getBrowserHeight();
    var offsetTopValue = calculateOffsetTop(mapElement) + 20;
    
    if ( browserHeight >= offsetTopValue ) {
        mapElement.style.height = browserHeight - offsetTopValue + "px" ;
    }
}
          
function resizeWidth(mapElement)
{

  var offsetleftValue = calculateOffsetLeft(mapElement) + 20;  
  var browserWidth = getBrowserWidth();
  
  if ( browserWidth >= offsetleftValue ) {
      mapElement.style.width = browserWidth - offsetleftValue + "px";
  }
}
        
function resizeScaler(mapElement) 
{
    var mapHeight = parseInt(mapElement.style.height);
    dojo.byId('slider').style.paddingTop = mapHeight / 2 + "px";
    dojo.byId('slider').style.paddingBottom = mapHeight / 2 + "px";
}

function getBrowserHeight() 
{
    if (window.innerHeight)      
    {
          return window.innerHeight;
    }
    else if (document.documentElement && 
            document.documentElement.clientHeight != 0)
    {
              return document.documentElement.clientHeight;
    }
    else if (document.body)      
    {
        return document.body.clientHeight;
    }
    return 0;
}
         
function getBrowserWidth() 
{
    if (window.innerWidth)      
    {
        return window.innerWidth;
    }
    else if (document.documentElement && 
            document.documentElement.clientWidth != 0)
    {
        return document.documentElement.clientWidth;
    }
    else if (document.body)      
    {
        return document.body.clientWidth;
    }
    return 0;
}
    
function wipeOut() 
{
    var map = dijit.byId('myMap');
    var mapContainer = dojo.byId("mapContainer");
    map.pinTopRight();
    dojo.style(mapContainer, "paddingLeft", "15px");
    var f = function()
    {
      dojo.animateProperty({node: "leftPanel", duration: 1000,
              properties: {width: "0"}}).play();
      dojo.animateProperty({node: "slider", duration: 1000,
              properties: {left: "0"}}).play();
    }
    window.setTimeout(f, 0);
    myMap.refreshMap();
    map.pinTopLeft();
}

function wipeIn() 
{               
    var f = function()
    {
        var map = dijit.byId('myMap');
        var mapContainer = dojo.byId("mapContainer");
        map.pinTopRight();
        dojo.style(mapContainer, "paddingLeft", "300px");
        myMap.refreshMap();
        map.pinTopLeft();
    }
    dojo.animateProperty({node: "leftPanel", duration: 1000, 
            properties: {width: "285"}, onEnd: f}).play();
    dojo.animateProperty({node: "slider", duration: 1000, 
            properties: {left: "285"} }).play();
}

var tog = false;  // TODO: need to replace this with something more dynamic
function toggleSlider(event) {
   //this.slider = dojo.byId("sliderButton"); 
    if (tog == true) {
        wipeIn();
        this.removeClassNames();
        dojo.addClass(this.sliderIcon, "sliderIconCollapse");
        this.iconClassName = 'sliderIconCollapse';
        tog = false;
    } else {
        wipeOut();
        this.removeClassNames();
        dojo.addClass(this.sliderIcon, "sliderIconExpand");
        this.iconClassName = 'sliderIconExpand';
        tog = true;
    }                               
}

function showHover()
{
    if (this.iconClassName == 'sliderIconCollapse')
    {
        this.removeClassNames();
        //dojo.removeClass(this.sliderIcon, "sliderIconCollapse");
        dojo.addClass(this.sliderIcon, "sliderIconCollapseHover");
        this.iconClassName = 'sliderIconCollapseHover';
    }
    else
    {
        this.removeClassNames();
        //dojo.removeClass(this.sliderIcon, "sliderIconExpand");
        dojo.addClass(this.sliderIcon, "sliderIconExpandHover");
        this.iconClassName = 'sliderIconExpandHover';
    }
}

function showNormal()
{
    if (this.iconClassName == 'sliderIconCollapseHover' ||
            this.iconClassName == 'sliderIconCollapse')
    {
        this.removeClassNames();
        //dojo.removeClass(this.sliderIcon, "sliderIconCollapseHover");
        dojo.addClass(this.sliderIcon, "sliderIconCollapse");
        this.iconClassName = 'sliderIconCollapse';
    }
    else
    {
        this.removeClassNames();
        //dojo.removeClass(this.sliderIcon, "sliderIconExpandHover");
        dojo.addClass(this.sliderIcon, "sliderIconExpand");
        this.iconClassName = 'sliderIconExpand';
    }
}

function removeClassNames()
{
    dojo.removeClass(this.sliderIcon, "sliderIconCollapse");
    dojo.removeClass(this.sliderIcon, "sliderIconCollapseHover");
    dojo.removeClass(this.sliderIcon, "sliderIconExpand");
    dojo.removeClass(this.sliderIcon, "sliderIconExpandHover");
}

/* 
 * Resize the map width after the last slide control has finished 
 */
function resizeMapControl()
{
    var mapElement = dojo.byId("myMap");
    resizeWidth(mapElement);
    myMap.refreshMap();                   
}

function expandResults()
{                        
    dojo.animateProperty({node:"result", properties: {height: "245"} }).play();
}

function collapseResults()
{
    dojo.animateProperty({node:"result", properties: {height: "0"} }).play();
}
        
function toggleCacheContainer()
{
    if (this.expandCContainer == true)
    {
        dojo.animateProperty({node:"cacheResultContainer", 
                properties: {height: "210"} }).play();
        this.expandCContainer = false;
    }
    else
    {
        dojo.animateProperty({node:"cacheResultContainer",
                properties: {height: "0"} }).play();
        this.expandCContainer = true;
    }
}

/*
 * Change the images when mouse over on recent selected address accordion
 */          
function changeCacheTreeExpandHover()
{
    if (this.expandCContainer == true )
    {
        document.getElementById("cacheContainer").className =
                "treeExpandPlusHover";
        document.getElementById("cacheContainer").alt = "+";
        document.getElementById("cacheContainer").title = 
                this.resources["accordionShowPanel"];
        document.getElementById("cacheContainer").title = 
                this.resources["accordionShowPanel"];
    }
    else
    {
        document.getElementById("cacheContainer").className =
                 "treeExpandMinusHover";
        document.getElementById("cacheContainer").alt = "-";
        document.getElementById("cacheContainer").title =
                this.resources["accordionHidePanel"];
        document.getElementById("cacheContainer").title =
                this.resources["accordionHidePanel"];
    }
}

/* 
 * Change the images when mouse out from recent selected address accordion
 */          
function changeCacheTreeExpandOut()
{
    if (this.expandCContainer == true)
    {
        document.getElementById("cacheContainer").className = 
                "treeExpandPlus";
        document.getElementById("cacheContainer").alt = "+";
    }
    else
    {
        document.getElementById("cacheContainer").className =
                "treeExpandMinus";
        document.getElementById("cacheContainer").alt = "-";
    }
}

function toggleNearestResultsContainer()
{
    var controlHeight = "210";

    if (this.expandFMNContainer == true)
    {
        dojo.animateProperty({node:"findNearestResultContainer",
                properties: {height: controlHeight} }).play();
        this.expandFMNContainer  = false;
    }
    else
    {
        dojo.animateProperty({node:"findNearestResultContainer", 
                properties: {height: "0"} }).play();
        this.expandFMNContainer  = true;
    }
}

function changeNearestResultsExpandHover()
{
    if (this.expandFMNContainer == true)
    {
        document.getElementById("findNearestContainerIcon").className =
                "treeExpandPlusHover";
        document.getElementById("findNearestContainerIcon").alt = "+";
        document.getElementById("findNearestContainerIcon").title =
                this.resources["accordionShowPanel"];
    }
    else
    {
        document.getElementById("findNearestContainerIcon").className =
                 "treeExpandMinusHover";
        document.getElementById("findNearestContainerIcon").alt = "-";
        document.getElementById("findNearestContainerIcon").title =
                this.resources["accordionHidePanel"];
    }
}

/* 
 * Change the images when mouse out from recent selected address accordion
 */          
function changeNearestResultsExpandOut()
{
    if (this.expandFMNContainer == true)
    {
        document.getElementById("findNearestContainerIcon").className =
                "treeExpandPlus";
        document.getElementById("findNearestContainerIcon").alt = "+";
    }
    else
    {
        document.getElementById("findNearestContainerIcon").className =
                "treeExpandMinus";
        document.getElementById("findNearestContainerIcon").alt = "-";
    }
}

 /* @TODO Vinh - This method seems a little dodgy so we
 * will need to refactor later at some stage
 */
function toggleLocatorContainer()
{
    var h = document.getElementById("result").style.height;
                  
    var resultContainer = 280;
    var resultInner = document.getElementById("result").innerHTML.length;
    if (resultInner > 100) 
    {
          h = parseFloat(h.slice(0, (h.length-2)));                  
          h = h + document.getElementById("locator").offsetHeight;
    } 
    else if ( resultInner == 0 )
    {
          h = 2+document.getElementById("locator").offsetHeight;
    }
    else
    {
          h = 20 + document.getElementById("locator").offsetHeight;
    }
    
    if (document.getElementById("error").innerHTML.length > 0)
    {
        h = 5+document.getElementById("error").offsetHeight +
               document.getElementById("locator").offsetHeight;
        document.getElementById("result").style.height = "0px";
    }
    if (this.expandSContainer == true)
    {
        dojo.animateProperty({node:"resultsContainer", 
                properties: {height: h, unit: "px" } }).play();
        this.expandSContainer = false;
    }
    else
    {
        dojo.animateProperty({node:"resultsContainer",
                properties: {height: "0"} }).play();
        this.expandSContainer = true;
    }
}

/* Change the images when mouse over on search for an address accordion*/ 
function changeAddressTreeExpandHover()
{
    if (this.expandSContainer == true)
    {
        document.getElementById("locationContainer").className =
                "treeExpandPlusHover";
        document.getElementById("locationContainer").alt = "+";
        document.getElementById("locationContainer").title = 
                this.resources["accordionShowPanel"];
    }
    else
    {
        document.getElementById("locationContainer").className =
                "treeExpandMinusHover";
        document.getElementById("locationContainer").alt = "-";
        document.getElementById("locationContainer").title =
                this.resources["accordionHidePanel"];
    }
}

/* Change the images when mouse out from search for an address accordion*/ 
function changeAddressTreeExpandOut()
{
    if (this.expandSContainer == true)
    {
        document.getElementById("locationContainer").className =
                "treeExpandPlus";
        document.getElementById("locationContainer").alt = "+";
    }
    else
    {
        document.getElementById("locationContainer").className =
                "treeExpandMinus";
        document.getElementById("locationContainer").alt = "-";
    }
}

/* Change the images when mouse over on map legend accordion*/ 
function changeMapLegendExpandHover()
{
    document.getElementById("mapLegend").className = "treeExpandMinusHover";
}

/* Change the images when mouse out from map legend accordion*/ 
function changeMapLegendTreeExpandOut()
{
    document.getElementById("mapLegend").className = "treeExpandMinus";
}

function readCookie(name) 
{
    
    var nameEQ = name + "=";
    var cookieSplit = document.cookie.split(';');
    
    for(var i=0;i < cookieSplit.length;i++) {
        
        var cookieName = cookieSplit[i];
                                    
        while (cookieName.charAt(0)==' ') {
            cookieName = cookieName.substring(1,cookieName.length);
        }
            
        if (cookieName.indexOf(nameEQ) == 0) {
        
            return unescape(cookieName.substring(nameEQ.length,
                    cookieName.length));
        }
    }
    return null;
}

function writeCookie(name, value) {
                   
    var cookieString = name + "=" + escape ( value );

    cookieString += "; expires="

    document.cookie = cookieString;
                
    showCacheResults();
    this.expandCContainer = false;
    toggleCacheContainer();
}
           
function selectedLocatorResult(location) {

    try {
    
        var cookieName = "locatorResults";
        var locatorCookieString = readCookie(cookieName);
        var locationNewString = "1:" + location.name + ":" + location.x + ":" +
                location.y + ":" + escapeColon(location.crs) + ";";
        var currentCookie = location.name + ":" + location.x + ":" +
                location.y + ":"+escapeColon(location.crs) + ";";
        if (locatorCookieString == null) {

        // There are no cookies, add the new locator result as number 1
        writeCookie(cookieName, locationNewString)

        }
        else
        {
            var locatorCookieStrings = locatorCookieString.split(";");
            var dup = false;
            for ( var i = 0; i < locatorCookieStrings.length - 1; i++ ) {
    
                if ( i + 2 == 6 ) {
         
                    break;
                }
    
                var splitLocationResult = locatorCookieStrings[i].split(":")
    
                splitLocationResult[0] = i + 2;
                var newCookie =splitLocationResult[1] + ":" + 
                        splitLocationResult[2] + ":" + splitLocationResult[3] + 
                                escapeColon(splitLocationResult[4]) +";";
                if (currentCookie != newCookie )
                {
                        locationNewString += splitLocationResult[0] + ":" +
                                splitLocationResult[1] + ":" +
                                splitLocationResult[2] + ":" + 
                                splitLocationResult[3] + ":" +
                                escapeColon(splitLocationResult[4]) + ";";
                }
                else
                {
                dup = true;
                }
            }
            if (!dup)
            {
                writeCookie(cookieName, locationNewString);
            }
        }
    }
    catch (e)
    {
        
    }
}

/**
 * Escapes colon with unicode string for cookies
 */
function escapeColon(/*String*/ value)
{
    if (value)
    {
        return value.replace(":","\\u003A");
    }
    else 
    {
        return "";
    }
}

/**
 * Unescapes colon with unicode string for cookies
 */
function unescapeColon(/*String*/ value)
{
    if (value)
    {
        return value.replace("\\u003A",":");
    }
    else 
    {
        return "";
    }
}

/**
 * Detect the browser and show browser specifc
 * message for printing map.
 */
function populatePrintMessage()
{
    var div = document.getElementById("printMessage");
	var printLink = this.widgetsResources["print-link"];
	div.innerHTML = dojo.string.substitute(this.resources["print-message"], [printLink]);
}