function wheel(event){
  if (Layout.isOverSearchPane)
  {
	  var delta = 0;
	  if (!event) event = window.event;
	  if (event.wheelDelta) {
		  delta = event.wheelDelta/120; 
		  if (window.opera) delta = -delta;
	  } else if (event.detail) {
		  delta = -event.detail/3;
	  }
	  if (delta)
		  Scroller.scroll(delta);
    if (event.preventDefault)
      event.preventDefault();
    event.returnValue = false;
  }
}

if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

// Layout Manager
var Layout = {
  // Initialization
  init : function (leftPaneWidth, showVerticalSizeBar) {
    this.isMaximized = false;
    this.isResultsVisible = false;
    this.hasQueryDataBeenResetFlag = true;
    this.showVerticalSizeBar = showVerticalSizeBar;
    this.IE = navigator.appName.indexOf('Microsoft')>-1?1:0;
    this.FF = navigator.appName.indexOf('Microsoft')>-1?0:1;
    this.imgArrowLeft = new Image();
    this.imgArrowLeft.src = 'images/arrow_left.gif';
    this.imgArrowRight = new Image();
    this.imgArrowRight.src = 'images/arrow_right.gif';
    this.imgArrowUp = new Image();
    this.imgArrowUp.src = 'images/arrow_up.gif';
    this.imgArrowDown = new Image();
    this.imgArrowDown.src = 'images/arrow_down.gif';
    
    this.defaultMargin = 10;
    this.scrollBarWidth = 20;
    this.resizeDim = this.defaultMargin;
    this.leftPaneWidth = leftPaneWidth;
    this.resultHeight = 200;
    this.minMapHeight = 200;
    this.isOverSearchPane = false;
    
    this.cityHeader = document.getElementById('cityHeader');
    
    this.leftPane = document.getElementById('leftPane');
    this.searchPane = document.getElementById('searchPane');
    this.leftPane.resize = function (width, height) { Layout.leftPane.style.width = width<0?0:width + 'px'; Layout.searchPane.style.width = width<0?0:(width - (Layout.FF*2)) + 'px'; Layout.leftPane.style.height = height<0?0:height + 'px'; }
    this.leftPane.move = function(left, top) { Layout.leftPane.style.left = left<0?0:left + 'px'; Layout.leftPane.style.top = top<0?0:top + 'px'; }
    this.leftPane.attachEvent('onmouseenter', function() { Layout.isOverSearchPane = true; });
    this.leftPane.attachEvent('onmouseleave', function() { Layout.isOverSearchPane = false; });
    
    this.scrollThumb = document.getElementById('scrollThumb');
    this.scrollBar = document.getElementById('scrollBar');
    this.scrollBar.resize = function(width, height) { Layout.scrollBar.style.width = Layout.scrollBarWidth + 'px';Layout.scrollBar.style.height = height<0?0:height + 'px'; }
    this.scrollBar.move = function(left, top) { Layout.scrollBar.style.left = left<0?0:left + 'px'; Layout.scrollBar.style.top = top<0?0:top + 'px'; }
    this.scroller = document.getElementById('scroller');
    this.scroller.style.width = this.scrollBarWidth + 'px';
    
    this.resizerHorz = document.getElementById('resizerHorz');
    this.resizerHorz.style.display = 'block';
    this.imgResizeArrowHorz = document.getElementById('imgResizeArrowHorz');
    this.resizePaneHorz = document.getElementById('resizePaneHorz');
    this.resizePaneHorz.resize = function (width, height) { Layout.resizePaneHorz.style.width = width<0?0:(width + (Layout.FF*2)) + 'px';  Layout.resizePaneHorz.style.height = height<0?0:parseInt(height + Layout.IE*2) + 'px'; Layout.resizerHorz.style.top = parseInt(height / 2 - 6) + 'px';  }
    this.resizePaneHorz.move = function(left, top) { Layout.resizePaneHorz.style.left = left<0?0:left + 'px'; Layout.resizePaneHorz.style.top = top<0?0:top + 'px'; }
   
    this.mapPane = document.getElementById('mapPane');
    this.mapPane.resize = function (width, height) { Layout.mapPane.style.width = width<0?0:(width + (Layout.FF*2)) + 'px'; Layout.mapPane.style.height = height<0?0:height + 'px'; }
    this.mapPane.move = function(left, top) { Layout.mapPane.style.left = left<0?0:left + 'px'; Layout.mapPane.style.top = top<0?0:top + 'px'; }
    
    this.resizerVert = document.getElementById('resizerVert');
    this.resizerVert.style.display = 'block';
    this.txtResizeThumbVert = document.getElementById('txtResizeThumbVert');
    this.imgResizeArrowVert = document.getElementById('imgResizeArrowVert');
    this.resizePaneVert = document.getElementById('resizePaneVert');
    document.getElementById('resizePaneVert').style.display = showVerticalSizeBar?'block':'none';
	  
    this.resizePaneVert.resize = function (width, height) { Layout.resizePaneVert.style.width = width<0?0:(width + (Layout.FF*4)) + 'px';  Layout.resizePaneVert.style.height = height<0?0:parseInt(height) + 'px'; Layout.resizerVert.style.left = parseInt(width / 2 - 5) + 'px';  }
    this.resizePaneVert.move = function(left, top) { Layout.resizePaneVert.style.left = left<0?0:left + 'px'; Layout.resizePaneVert.style.top = top<0?0:top + 'px'; }
    
    this.gridPane = document.getElementById('gridPane');
    this.gridPane.style.display = 'block';
    this.gridPane.resize = function(width, height) { Layout.gridPane.style.width = width<0?0:width + 'px'; Layout.gridPane.style.height = height<0?0:height + 'px'; }
    this.gridPane.move = function(left, top) { Layout.gridPane.style.left = left<0?0:left + 'px'; Layout.gridPane.style.top = top<0?0:top + 'px'; }
        
    this.infoPane = document.getElementById('infoPane');
    this.infoPane.resize = function (width, height) { Layout.infoPane.style.width = width<0?0:width + 'px'; Layout.infoPane.style.height = height<0?0:height + 'px'; }
    this.infoPane.move = function(left, top) { Layout.infoPane.style.left = left<0?0:left + 'px'; Layout.infoPane.style.top = top<0?0:top + 'px'; }
    
    this.loading = document.getElementById('loading');
    this.loading.resize = function (width, height) { Layout.loading.style.width = width<0?0:width + 'px'; Layout.loading.style.height = height<0?0:height + 'px'; }
    this.loading.move = function(left, top) { Layout.loading.style.left = left<0?0:left + 'px'; Layout.loading.style.top = top<0?0:top + 'px'; }
    
    this.leftPane.move(this.defaultMargin, this.cityHeader.clientHeight + this.defaultMargin);
    this.scrollBar.move(leftPaneWidth, this.cityHeader.clientHeight + this.defaultMargin);
    this.resizePaneHorz.move(leftPaneWidth + Layout.scrollBarWidth + Layout.FF, this.cityHeader.clientHeight + this.defaultMargin);
    this.mapPane.move(leftPaneWidth + Layout.scrollBarWidth + this.resizeDim + Layout.FF, this.cityHeader.clientHeight + this.defaultMargin);
    
    resizePaneLeft = leftPaneWidth + Layout.scrollBarWidth + this.resizeDim + Layout.FF;
    resizePaneTop = this.cityHeader.clientHeight + this.defaultMargin + this.leftPane.clientHeight;
    this.resizePaneVert.move(resizePaneLeft, resizePaneTop);
    this.gridPane.move(resizePaneLeft, resizePaneTop + this.resizeDim);
    this.infoPane.move(this.defaultMargin, this.cityHeader.clientHeight + this.defaultMargin + this.resizePaneHorz.clientHeight);
    
    this.leftPane.style.visibility = 'visible';
    this.resizePaneHorz.style.visibility = 'visible';
    this.mapPane.style.visibility = 'visible';
    this.gridPane.style.visibility = 'hidden';
    this.infoPane.style.visibility = 'visible';
  },
  dispose : function() {
    this.IE = null;
    this.FF = null;
    this.imgResizeArrowHorz = null;
    this.imgResizeArrowVert = null;
    this.imgArrowRight = null;
    this.imgArrowLeft = null;
    this.imgArrowUp = null;
    this.imgArrowDown = null;
    this.leftPaneWidth = null;
    this.defaultMargin = null;
    this.scrollBarWidth = null;
    this.infoPane = null;
    this.mapPane = null;
    this.gridPane = null;
    this.scrollBar = null;
    this.resizePaneHorz = null;
    this.resizePaneVert = null;
    this.resizerHorz = null;
    this.resizerVert = null;
    this.leftPane = null;
    this.cityHeader = null;
    this.isResultsVisible = null;
    this.isMaximized = null;
  },
  // Gets the window client area dimensions
  getWindowSize : function() {
    var e = new Object();
    if (window.self && self.innerWidth) {
      e.width = self.innerWidth;
      e.height = self.innerHeight;
    } else {
      if (document.documentElement && document.documentElement.clientHeight) {
        e.width = document.documentElement.clientWidth;
        e.height = document.documentElement.clientHeight;
      } else {
        e.width = document.body.clientWidth;
        e.height = document.body.clientHeight;
      }
    }
    return e;
  },
  toggleView : function(resizeBar)
  {
    if (resizeBar) 
    {
      var mapLeft = null;
      switch (resizeBar.id)
      {
        case 'resizePaneHorz' :
          this.isMaximized = !this.isMaximized;
          this.leftPane.style.display = this.isMaximized?'none':'';
          this.scrollBar.style.display = this.leftPane.style.display;
          this.imgResizeArrowHorz.src = this.isMaximized?this.imgArrowRight.src:this.imgArrowLeft.src;
          this.resizePaneHorz.title = this.isMaximized?'Show Search':'Hide Search';
          
        break;
        case 'resizePaneVert' :
          this.isResultsVisible = !this.isResultsVisible;
          this.imgResizeArrowVert.src = this.isResultsVisible?this.imgArrowDown.src:this.imgArrowUp.src;
          this.txtResizeThumbVert.innerHTML = this.isResultsVisible?'Hide Results':'Show Results';
          this.resizePaneVert.title = this.isResultsVisible?'Hide Results':'Show Results';
          this.gridPane.style.visibility = this.isResultsVisible?'visible':'hidden';
          if (Map.searchCriteria)
            Map.showPerformQueryFirstMessage(false);
          else
            Map.showPerformQueryFirstMessage(true);
          break;
      }
      
      if (this.isMaximized) {
        this.resizePaneHorz.move(0, parseInt(this.resizePaneHorz.style.top));
        this.mapPane.move(this.resizePaneHorz.clientWidth, parseInt(this.mapPane.style.top));
      } else {
        this.resizePaneHorz.move(this.leftPaneWidth + this.scrollBarWidth + this.FF, this.cityHeader.clientHeight + this.defaultMargin);
        this.mapPane.move(this.leftPaneWidth + this.scrollBarWidth + this.resizeDim + Layout.FF, this.cityHeader.clientHeight + this.defaultMargin);
      }
      this.redraw();
      var s = Layout.getMapPaneSize(); 
      mapVE.Resize(s.width, s.height);
      
    }
    else
      alert('Parameter resizeBar cannot be null.');
    return false;
  },
  // Forces the layout to adjust based on client area
  redraw : function() {
    var ws = this.getWindowSize();
    if (ws.width < this.cityHeader.clientWidth) 
      ws.width = this.cityHeader.clientWidth;
    if (ws.height < 200)
      ws.height = 200;
      
    var maxControlHeight = ws.height - (this.cityHeader.clientHeight + this.infoPane.clientHeight + (this.defaultMargin*2) + this.resizeDim )+1;
    var mapPaneHeight = maxControlHeight - (this.isResultsVisible?this.resultHeight:0);
    if (this.isMaximized) {
      var mapPaneWidth = ws.width - (this.resizePaneHorz.clientWidth + this.defaultMargin - (Layout.FF*2));
      this.mapPane.resize(mapPaneWidth, mapPaneHeight);
    }
    else
    {  
      this.leftPane.resize(this.leftPaneWidth - this.defaultMargin, maxControlHeight);
      this.scrollBar.resize(Layout.scrollBarWidth, this.leftPane.clientHeight-1);
      var mapPaneWidth = ws.width - (this.leftPane.clientWidth + this.resizePaneHorz.clientWidth + this.scrollBar.clientWidth + (this.defaultMargin * 2) + (Layout.FF * 2));
      this.mapPane.resize(mapPaneWidth, mapPaneHeight);
      Scroller.resize();
    }
    this.resizePaneHorz.resize(this.resizeDim-2, mapPaneHeight+(Layout.FF*2));
    this.loading.move((mapPaneWidth / 2) - (this.loading.clientWidth / 2), (this.mapPane.clientHeight / 2) - (this.loading.clientHeight / 2));    
    
    var resizePaneVertLeft = parseInt(this.mapPane.style.left);
    var resizePaneVertTop = this.cityHeader.clientHeight + this.defaultMargin + this.mapPane.clientHeight + 1;
    var infoPaneTop = parseInt(this.leftPane.style.top) + parseInt(this.leftPane.style.height) + this.defaultMargin;
    
    this.resizePaneVert.move(resizePaneVertLeft, resizePaneVertTop);
    this.resizePaneVert.resize(mapPaneWidth, this.resizePaneVert.clientHeight);
    
    this.gridPane.move(resizePaneVertLeft, resizePaneVertTop + this.resizePaneVert.clientHeight);
    this.gridPane.resize(mapPaneWidth + (Layout.FF*2), infoPaneTop - (resizePaneVertTop + this.resizeDim * 3));
    
    this.infoPane.move(this.defaultMargin, infoPaneTop);
    this.infoPane.resize(ws.width - (this.defaultMargin*2) - (Layout.FF*2), this.infoPane.clientHeight);
    Map.redraw(true);
  },
  getMapPaneSize : function() { var e = new Object(); e.width = this.mapPane.clientWidth; e.height = this.mapPane.clientHeight; return e; }
}

var Scroller = {
  init:   function() {
    Scroller.resize();
    Drag.init(document.getElementById("scroller"),null,0,0,0,Scroller.scrollDist);
    document.getElementById("scroller").onDrag = function (x,y) {
      var scrollY = parseInt(document.getElementById("scroller").style.top);
      if (Scroller.scrollDist != 0) {
        var docY = 0 - (scrollY * (Scroller.docH - Scroller.contH) / Scroller.scrollDist);
        document.getElementById("searchPane").style.top = docY + "px";
      }
    }
  },
  resize: function()
  {
    Scroller.docH = document.getElementById("searchPane").offsetHeight;
    Scroller.contH = document.getElementById("leftPane").offsetHeight;
    Scroller.scrollAreaH = document.getElementById("scrollBar").offsetHeight;
    if (Scroller.docH > 0)
    {
      Scroller.scrollH = (Scroller.contH * Scroller.scrollAreaH) / Scroller.docH;
      document.getElementById("scroller").style.height = Math.round(Scroller.scrollH) + "px";
      
      Scroller.scrollDist = Math.round(Scroller.scrollAreaH-Scroller.scrollH);
      Drag.rescale(document.getElementById("scroller"), 0, Scroller.scrollDist);
      
      var scrollYTop = document.getElementById("scroller").style.top;
      if (scrollYTop.length > 0)
      {
        var scrollY = parseInt(scrollYTop);
        if (Scroller.scrollDist != 0) {
          var docY = 0 - (scrollY * (Scroller.docH - Scroller.contH) / Scroller.scrollDist);
          document.getElementById("searchPane").style.top = docY + "px";
        }
      }
    }
    
    var scroller = document.getElementById('scroller');
    if (Scroller.scrollDist > 0)
      scroller.style.display = 'block';
    else
    {
		  scroller.style.display = 'none';
      document.getElementById("searchPane").style.top = "0px";
    }
    
    var scrollThumb = document.getElementById('scrollThumb');
    scrollThumb.style.top = (parseInt(scroller.clientHeight) / 2) + 'px';
  },
  scroll : function(delta)
  {
    var scroller = document.getElementById('scroller');
    if (Scroller.scrollDist > 0)
    {
      var topPos = document.getElementById("searchPane").style.top;
      if (topPos.length == 0) topPos = 0;
      var newPos = parseInt(topPos) + (delta * 10);
      if (newPos > 0) newPos = 0;
      var maxPos = Scroller.contH - Scroller.docH;
      if (newPos < maxPos) newPos = maxPos;
      document.getElementById("searchPane").style.top = newPos + "px";
      var scrollY = -(newPos * Scroller.scrollDist / (Scroller.docH - Scroller.contH));
      document.getElementById("scroller").style.top = scrollY + "px";
    }
  },
  scrollIntoView : function(e)
  {
    if (e) {
      var leftPanePos = UI.findPos(document.getElementById('leftPane'));
      var ePos = UI.findPos(e);
      var diff = (ePos.top - leftPanePos.top);
      if (diff < 0 || diff > leftPanePos.top + Scroller.contH)
      {
        var newPos = parseInt(document.getElementById("searchPane").style.top) - diff;
        document.getElementById("searchPane").style.top = newPos + "px";
        var scrollY = -(newPos * Scroller.scrollDist / (Scroller.docH - Scroller.contH));
        document.getElementById("scroller").style.top = scrollY + "px";
      }
    }
    return false;
  },
  reset : function()
  {
    document.getElementById("scroller").style.top = "0px";
    document.getElementById("searchPane").style.top = "0px";
    this.resize();
  }
}

var ScrollerLayers = {
  init:   function() {
    ScrollerLayers.resize();
    Drag.init(document.getElementById("lcsst"),null,0,0,0,ScrollerLayers.scrollDist);
    document.getElementById("lcsst").onDrag = function (x,y) {
      var scrollY = parseInt(document.getElementById("lcsst").style.top);
      if (ScrollerLayers.scrollDist != 0) {
        var docY = 0 - (scrollY * (ScrollerLayers.docH - ScrollerLayers.contH) / ScrollerLayers.scrollDist);
        document.getElementById("lcc").style.top = docY + "px";
      }
    }
  },
  resize: function()
  {
    ScrollerLayers.docH = document.getElementById("lcc").offsetHeight;
    ScrollerLayers.contH = document.getElementById("lc").offsetHeight;
    ScrollerLayers.scrollAreaH = document.getElementById("lcs").offsetHeight;
      
    ScrollerLayers.scrollH = (ScrollerLayers.contH * ScrollerLayers.scrollAreaH) / ScrollerLayers.docH;
    document.getElementById("lcsst").style.height = Math.round(ScrollerLayers.scrollH) + "px";
    
    ScrollerLayers.scrollDist = Math.round(ScrollerLayers.scrollAreaH-ScrollerLayers.scrollH);
    Drag.rescale(document.getElementById("lcsst"), 0, ScrollerLayers.scrollDist);
    
    var scrollYTop = document.getElementById("lcsst").style.top;
    if (scrollYTop.length > 0)
    {
      var scrollY = parseInt(scrollYTop);
      if (Scroller.scrollDist != 0) {
        var docY = 0 - (scrollY * (ScrollerLayers.docH - ScrollerLayers.contH) / ScrollerLayers.scrollDist);
        document.getElementById("lcc").style.top = docY + "px";
      }
    }
    
    var scroller = document.getElementById('lcsst');
    if (ScrollerLayers.scrollDist > 0)
      scroller.style.display = 'block';
    else
    {
      scroller.style.display = 'none';
      document.getElementById("lcc").style.top = "0px";
    }

  },
  scrollIntoView : function(e)
  {
    if (e) {
      var leftPanePos = UI.findPos(document.getElementById('lc'));
      var ePos = UI.findPos(e);
      var diff = (ePos.top - leftPanePos.top);
      if (diff < 0 || diff > leftPanePos.top + Scroller.contH)
      {
        var newPos = parseInt(document.getElementById("lcc").style.top) - diff;
        document.getElementById("lcc").style.top = newPos + "px";
        var scrollY = -(newPos * ScrollerLayers.scrollDist / (ScrollerLayers.docH - ScrollerLayers.contH));
        document.getElementById("lcsst").style.top = scrollY + "px";
      }
    }
    return false;
  }
}