<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TurquoiseYellow</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="turquoiseyellow.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 tab1;
var tab2;
var tab3;
var tabbox1;

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('SplitterArea', {left: 3, right: 3, bottom: 24});
    new Jx.Layout('FileMenu', {height: 34, bottom: null});
    new Jx.Layout('Toolbar', {height: 25, top: 34, bottom: null});
    new Jx.Layout('StatusbarContainer', {height: 21, top: null});
    new Jx.Layout('Statusbar', {height: 21, right: 159, top: null, bottom: 0});
    new Jx.Layout('MapArea', {top: 62});
    new Jx.Layout('ToolbarVertical', {width: 28, right: null});
    new Jx.Layout('Map', {left: 28});
    
    var splitter = new Jx.Splitter('SplitterArea',
                                   {splitInto:2,
                                   elements:[$('Sidebar'),$('Main')],
                                   layout:'horizontal',
                                   containerOptions: [{minWidth: 50, width: 214}, {}],
                                   snappers: [$('SidebarCollapse'),null]});

    var splitter2 = new Jx.Splitter('Sidebar',
                                   {splitInto:2,
                                   elements:[$('Info'),$('Bottom')],
                                   layout:'vertical',
                                   containerOptions: [{}, {height: 214}]});

    tabbox1 = new Jx.TabBox({parent: splitter2.elements[0]});

    tab1 = new Jx.Tab({
        label: OpenLayers.i18n('taskPaneTitle'),
        contentId: 'TaskPane'});

    tab2 = new Jx.Tab({
        label: OpenLayers.i18n('legendTitle'),
        contentId: 'Legend'});

    tab3 = new Jx.Tab({
        label: OpenLayers.i18n('selectionPanelTitle'),
        contentId: 'SelectionPanel'});

    tabbox1.add(tab1, tab2, tab3);

    var tabbox2 = new Jx.TabBox({parent: splitter2.elements[1]});

    var tab4 = new Jx.Tab({
        label: OpenLayers.i18n('ovmapTitle'),
        contentId: 'OverviewMap'});

    tabbox2.add(tab4);

    main.resize();

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

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() {
}

var showTaskPane = function() {
  tab1.setActive(true);
}

var showLegend = function() {
  tab2.setActive(true);
}

var showSelectionPanel = function() {
  tab3.setActive(true);
}

</script>

</head>

<body>

<!--
  Start App Container
  Wraps entire application
-->
<div id="AppContainer">

  <div id="SplitterArea">

    <div id="Sidebar">
      <div id="Info"></div>
      <div id="Bottom"></div>
    </div>

    <div id="Main">
      <div id="FileMenu"></div>
      <div id="Toolbar"></div>
      <div id="MapArea">
          <div id="ToolbarVertical"></div>
          <div id="Map">
            <div id="Navigator"></div>
          </div>
      </div>
    </div>

  </div>

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

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

</body>
</html>
