<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Slate</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" src="../../../lib/fusionSF-compressed.js"></script>
<link rel="stylesheet" href="../../../lib/jxLib/themes/delicious/jxtheme.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="slate.css" type="text/css" media="screen" charset="utf-8">
<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css" media="screen" charset="utf-8">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" media="screen" charset="utf-8">
<![endif]-->
<link rel="stylesheet" href="icons.css" type="text/css" media="screen" charset="utf-8">
<script type="text/javascript">
var panel1;
var panel2;
var panel3;
var panelman;
var dOverviewMap;
var COLLAPSED_SIDEBAR_WIDTH = 8;

window.onload = function() {
    Fusion.initializeLocale();  //need to call this first if String.Translate is to be used in the onload

    var main = new Jx.Layout('AppContainer');
    new Jx.Layout('FileMenuContainer', {height: 24, top: 0, bottom: null});
    new Jx.Layout('SplitterArea', {left: 2, right: 2, top: 2, bottom: 23});
    new Jx.Layout('ToolbarContainer', {height: 56, top: 26, bottom: null});
    new Jx.Layout('Map', {left: 0, right: 0, top: 76, bottom: 0});
    new Jx.Layout('StatusbarContainer', {height: 21, left: 0, right: 0, top: null, bottom: 0});
    new Jx.Layout('Statusbar', {height: 21, left: 0, right: 159, top: null, bottom: 0});

    var splitter = new Jx.Splitter('SplitterArea', {
        splitInto:2,
        elements:[$('Sidebar'),$('MapArea')],
        layout:'horizontal',
        containerOptions: [{minWidth:COLLAPSED_SIDEBAR_WIDTH, width: 218}],
        barOptions: [{
            snap: 'before',
            snapElement: $('SidebarCollapse'),
            snapEvents: ['click']
        }]
    });

    panel1 = new Jx.Panel({
        label: OpenLayers.i18n('legendTitle'),
        collapse: true,
        maximize: true,
        contentId: 'Legend'
    });

    panel2 = new Jx.Panel({
        label: OpenLayers.i18n('selectionPanelTitle'),
        collapse: true,
        maximize: true,
        contentId: 'SelectionPanel'
    });

    panel3 = new Jx.Panel({
        label: OpenLayers.i18n('taskPaneTitle'),
        collapse: true,
        maximize: true,
        contentId: 'TaskPane'
    });

    panelman = new Jx.PanelSet({
        parent: splitter.elements[0],
        panels: [panel1, panel2, panel3]
    });

    dOverviewMap = new Jx.Dialog({
        id: 'dialogNavigator',
        label: OpenLayers.i18n('ovmapTitle'),
        modal: false,
        resize: false,
        collapse: false,
        horizontal: 'right -10',
        vertical: 'bottom -10',
        width: 200,
        height: 200
    });
    dOverviewMap.content.id = 'OverviewMap';
    main.addEvent('sizeChange', function(){
      if (dOverviewMap.domObj.getStyle('display') != 'none'){
        dOverviewMap.show();
      }
    });
    main.resize();

    Fusion.registerForEvent(Fusion.Event.FUSION_INITIALIZED, fusionInitialized);
    Fusion.registerForEvent(Fusion.Event.FUSION_ERROR, fusionError);
    Fusion.initialize();

    dOverviewMap.open();
}

var showErrorDialog = function(msg) {
    var errorDialog = new Jx.Dialog({
        label: "Fusion Error",
        image: "images/icons/error.png",
        width: 800,
        height: 400,
        modal: true,
        resize: true,
        move: true,
        content: msg
    });
    errorDialog.show();
};

var fusionError = function(eventId, error) {
    if (error instanceof Fusion.DetailedError) {
        //Case 1: Session Expiry
        //
        //
        if (error.message.indexOf("MgSessionExpiredException") >= 0) {
            var sessionId = Fusion.getQueryParam("Session");
            var map = Fusion.getMapByIndice(0);
            //Graceful reload is only possible if session id was not passed in as a query parameter
            if (sessionId == "") {
                map.message.error(OpenLayers.i18n('sessionExpired') + ' <a href="javascript:window.location.reload()">' + OpenLayers.i18n("reload") + '</a>');
            } else {
                map.message.error(OpenLayers.i18n('sessionExpired'));
            }
            return;
        }
    
        //Default Case: Show a formatted summary of the error
        var fmtStack = "";
        for (var i = 0; i < error.stack.length; i++) {
            var stackFrame = error.stack[i];
            fmtStack += " - " + (stackFrame.func != "" ? stackFrame.func : "?") + " at " + stackFrame.url + " (line: " + stackFrame.line + ")";
            fmtStack += "\n";
        }
        var message = OpenLayers.i18n("detailedErrorTemplateHtml", {
            name: error.name,
            source: error.url,
            message: error.message,
            stacktrace: fmtStack
        });
        showErrorDialog(message);
        console.log('Fusion Error: \n' + message);
    } else {
        var errorMessage = error.toString();
        var readableMessage = '';

        //Case 1: For dealing with Function: convertXML (fusion.js)
        //******************************************
        //        xml2json: function(callback, r, json) {
        //      if (json) {
        //        var o;
        //        eval("o="+r.responseText);
        //        callback(o);
        //      } else {
        //      if (r.status >= 400) {
        //          Fusion.reportError(new Fusion.Error(Fusion.Error.FATAL,
        //              'xml2json: invalid XML document: ' + r.transport.responseText + " : " + r.request.url));
        //          return;
        //      }
        //******************************************
        var tagStart = '<h2>';
        var tagEnd = '</h2>';
        var indexStart = errorMessage.indexOf(tagStart);
        var indexEnd = errorMessage.indexOf(tagEnd, tagStart);
        if (indexStart != -1 && indexEnd != -1) {
            readableMessage = errorMessage.substring(indexStart + tagStart.length, indexEnd);
            readableMessage = readableMessage.replace(/\\n/g, '\n');
            readableMessage = readableMessage.replace(/\\t/g, '\t');
            readableMessage = readableMessage.replace(/\\'/g, '\'');
        }

        if (readableMessage != '') {
            showErrorDialog(readableMessage);
        }
        else {
            showErrorDialog('Fusion Error: \n' + errorMessage);
        }
        console.log('Fusion Error: \n' + errorMessage);
    }
}

var fusionInitialized = function() {
    $('AppContainer').resize({forceResize: true});
    var mapWidget = Fusion.getMapById('Map');
    mapWidget.registerForEvent(Fusion.Event.MAP_LOADED, initPanelHandler);
}

var isTaskPaneRegistered = false;

var initPanelHandler = function() {
    if(isTaskPaneRegistered) return;
    //register this with MAP_LOADED so that the initial layout will remain
    Fusion.registerForEvent(Fusion.Event.TASK_PANE_LOADED, showTaskPane);
    isTaskPaneRegistered = true;
}

var showOverviewMap = function() {
    dOverviewMap.open();
}

var showSidebarIfCollapsed = function() {
    if ($("Sidebar").getWidth() <= COLLAPSED_SIDEBAR_WIDTH)
        $("SidebarCollapse").fireEvent("click");
};

var showTaskPane = function() {
    showSidebarIfCollapsed();
    panelman.maximizePanel(panel3);
}

var showLegend = function() {
    showSidebarIfCollapsed();
    panelman.maximizePanel(panel1);
}

var showSelectionPanel = function() {
    showSidebarIfCollapsed();
    panelman.maximizePanel(panel2);
}

</script>
<!--style type="text/css">
body { overflow: hidden }
#StatusNavigator {
  position: absolute;
  right: 139px;
  padding-top: 2px;
}

#pbmg {
  position: absolute;
  right: 0px;
  padding-top: 2px;
}

</style-->
</head>

<body>

<div id="AppContainer">

  <div id="SplitterArea">
    <div id="Sidebar">
      <!-- Collapse Sidebar -->
      <div id="SidebarCollapse">
        <div id="SidebarCollapseTop"></div>
        <div id="SidebarCollapseContent">
          <a id="SidebarCollapseButton" href="#"></a>
        </div>
        <div id="SidebarCollapseBottom"></div>
      </div>
    </div>
    <div id="MapArea">
      <!-- File Menu -->
      <div id="FileMenuContainer">
        <div id="FileMenu"></div>
        <div id="FileMenuLeft"></div>
        <div id="FileMenuRight"></div>
      </div>
      <!-- /File Menu -->
      <!-- Toolbar -->
      <div id="ToolbarContainer">
        <div id="Toolbar"></div>
        <div id="ToolbarLeft"></div>
        <div id="ToolbarRight"></div>

        <!-- I dont know about this one... -->
        <div id="ToolbarSecondary"></div>
        <div id="ToolbarSecondaryLeft"></div>
        <div id="ToolbarSecondaryRight"></div>
      </div>
      <!-- /Toolbar -->
      <div id="Map">
        <div id="Navigator"></div>
      </div>
    </div>
  </div>
  <!-- /Collapse Sidebar -->

  <!--<div id="OverviewMapContent"></div>-->

  <div id="StatusbarContainer">
    <div id="Statusbar"></div>
    <div id="StatusNavigator"></div>
    <div id="pbmg"><img src="images/pbmg.png" alt=""></div>
  </div>

</div>
<div id="Maptip"></div>

</body>
</html>
