var mutils = new MiscUtils();
var futils;

EventUtil.addEventHandler(window, 'load', onWindowLoad);
EventUtil.addEventHandler(window, 'pageshow', function() {
                                                  oEvent = arguments[0];
                                                  if (oEvent.persisted) onPageShow();
                                              } );

/////////////////////// FUNCTIONS: BEGIN ////////////////////////////////
//--------------------------------------------------------------
function onWindowLoad() {
  onPageShow();
}

//--------------------------------------------------------------
function onPageShow() {

  updateForm(); // reset form elements to correspond to URL - this fixes the problem produced by the browser not changing the radio buttons and other form fields back to their original state

  // set width appropriately6
  var resolution = mutils.getParam('resolution');
  if (resolution == '2000m') {
    var bodyWidth = 650 + 100;
    document.getElementById("body").style.minWidth = bodyWidth + "px";
  } else if (resolution == '1000m') {
    var bodyWidth = 1300 + 100;
    document.getElementById("body").style.minWidth = bodyWidth + "px";
  } else if (resolution == '250m') {
    var bodyWidth = 5200 + 100;
    document.getElementById("body").style.minWidth = bodyWidth + "px";
  } else { // front page
    var bodyWidth = 1300 + 100;
    document.getElementById("body").style.minWidth = bodyWidth + "px";
  }

  if (document.getElementById("usaCompositeForm")) { // front page
    futils = new Form('usaCompositeForm');

    // make sector overlays clickable so that the user can zoom in to the sector view page
    var sectoroverlays = mutils.getElementsByClassName('imageSectorOverlay');
    for (var i=0; i < sectoroverlays.length; i++) {
     EventUtil.addEventHandler(sectoroverlays[i], 'click', getNewPage);
    }

    // reset map overlays (coast and state)
    showHideOverlays();
  } else if (document.getElementById("sectorForm")) { // page that shows individual sectors (zoomed in view)
    futils = new Form('sectorForm');

    // make resolution radio buttons work
    var resolutionRadiobuttons = mutils.getElementsByName('resolution');
     for (var i=0; i < resolutionRadiobuttons.length; i++) {
//      EventUtil.addEventHandler(resolutionRadiobuttons[i], 'change', getNewPage);
      EventUtil.addEventHandler(resolutionRadiobuttons[i], 'click', getNewPage);
    }

    // reset map overlays (coast and state)
    showHideOverlays();
  } else if (document.getElementById("calendarForm")) {  // calendar view of all available dates
    futils = new Form('calendarForm');
  }
  
  // make satellite radio buttons work
  var satelliteRadiobuttons = mutils.getElementsByName('satellite');
  for (var i=0; i < satelliteRadiobuttons.length; i++) {
    EventUtil.addEventHandler(satelliteRadiobuttons[i], 'click', getNewPage);
  }

  // make product radio buttons work
  var productRadiobuttons = mutils.getElementsByName('product');
  for (var i=0; i < productRadiobuttons.length; i++) {
    EventUtil.addEventHandler(productRadiobuttons[i], 'click', getNewPage);
  }
 
  if (!document.getElementById("calendarForm")) {  // as long as not calendar view
    // make map (state, coast ...) overlay checkboxes work
    var overlayCheckboxes = mutils.getElementsByName('overlay');
    for (var i=0; i < overlayCheckboxes.length; i++) {
      EventUtil.addEventHandler(overlayCheckboxes[i], 'click', showHideOverlays);
    }
  
   // make Previous and Next buttons work
    EventUtil.addEventHandler(document.getElementById('previous'), 'click', getNewPage);
    EventUtil.addEventHandler(document.getElementById('next'), 'click', getNewPage);

    // make date drop down menu work
    EventUtil.addEventHandler(document.getElementById('date'), 'change', getNewPage);
  }
}

//--------------------------------------------------------------
function updateForm() {

  // update satellite radio buttons
  var satellite = mutils.getParam('satellite');
  if (satellite == '')  satellite = document.getElementById("satellite_default").value;
  var satelliteRadiobuttons = mutils.getElementsByName('satellite');
  for (var i=0; i < satelliteRadiobuttons.length; i++) {
    if (satelliteRadiobuttons[i].value == satellite)  satelliteRadiobuttons[i].checked = true;
  }

  // update product radio buttons
  var product = mutils.getParam('product');
  if (product == '')  product = document.getElementById("product_default").value;
  var productRadiobuttons = mutils.getElementsByName('product');
  for (var i=0; i < productRadiobuttons.length; i++) {
    if (productRadiobuttons[i].value == product)  productRadiobuttons[i].checked = true;
  }

  if (document.getElementById("calendarForm"))  return;

  // udpate date drop down menu
  var date = mutils.getParam('date');
  if (date == '')  date = document.getElementById("date_default").value;
  var dateMenu = document.getElementById('date');
  if (date != 'NOT_DETERMINED_YET') {
    for (var i=0; i < dateMenu.options.length; i++) {
      if (dateMenu.options[i].value == date)  {
        dateMenu.selectedIndex = i;
        break;
      }
    }
  }
    
  // update resolution radio buttons 
  if (document.getElementById("sectorForm")) { // page that shows individual sectors (zoomed in view)
    var resolution = mutils.getParam('resolution');
    if (resolution == '')  satellite = document.getElementById("resolution_default").value;
    var resolutionRadiobuttons = mutils.getElementsByName('resolution');
    for (var i=0; i < resolutionRadiobuttons.length; i++) {
      if (resolutionRadiobuttons[i].value == resolution)  resolutionRadiobuttons[i].checked = true;
    }
  }
  
}

//--------------------------------------------------------------
function showHideOverlays() {
//  var str = futils.getSelectedCheckBoxValues('overlay');
  var mapoverlays = String(futils.getSelectedCheckBoxValues('overlay')).split(',');
  var imageSectorOverlays = mutils.getElementsByClassName("imageSectorOverlay");
  var state_borders = document.getElementById("state_borders");
  var coastline_borders = document.getElementById("coastline_borders");

  if (!state_borders || !coastline_borders)  return false;  // do nothing because these overlays don't exist

  // determine which map overlays to show and which to hide
  var showSectorOverlay = false;
  var showStateOverlay = false;
  var showCoastlineOverlay = false;
  for (var i=0; i < mapoverlays.length; i++) {
    if (mapoverlays[i] == 'sector')  showSectorOverlay = true;
    if (mapoverlays[i] == 'state')  showStateOverlay = true;
    if (mapoverlays[i] == 'coastline')  showCoastlineOverlay = true;
  }

  // hide map overlays if image not found
  if (document.getElementById("imageNotFound")) {
    showSectorOverlay = false;
    showStateOverlay = false;
    showCoastlineOverlay = false;
  }

  // show/hide sector borders
  if (showSectorOverlay && document.getElementById("usaCompositeForm")) {
    for (var i=0; i < imageSectorOverlays.length; i++) {
      imageSectorOverlays[i].style.borderRight = 'solid 1px rgb(180,180,180)';
      imageSectorOverlays[i].style.borderBottom = 'solid 1px rgb(180,180,180)';
    }
  } else {
    for (var i=0; i < imageSectorOverlays.length; i++) {
      imageSectorOverlays[i].style.borderRight = 'none';
      imageSectorOverlays[i].style.borderBottom = 'none';
    }
  }

  if (document.getElementById("usaCompositeForm")) { // sector page uses images for overlays
    state_borders.style.display = "inline";
    coastline_borders.style.display = "inline";

    // show/hide state borders
    if (showStateOverlay) {
//    state_borders.style.display = "inline";
      state_borders.style.backgroundPosition = "0px 0px";
    } else {
//    state_borders.style.display = "none";	  
      state_borders.style.backgroundPosition = "-2000px -2000px";	  
    }

    // show/hide coastline borders
    if (showCoastlineOverlay) {
//    coastline_borders.style.display = "inline";
      coastline_borders.style.backgroundPosition = "0 0";
    } else {
//    coastline_borders.style.display = "none";	  
      coastline_borders.style.backgroundPosition = "-2000px -2000px";	  
    }
  } else if (document.getElementById("sectorForm")) { // front page uses background images for overlays (because of shitty IE)
   // show/hide state borders
    if (showStateOverlay) {
      state_borders.style.display = "inline";
    } else {
      state_borders.style.display = "none";	  
    }

    // show/hide coastline borders
    if (showCoastlineOverlay) {
      coastline_borders.style.display = "inline";
    } else {
      coastline_borders.style.display = "none";	  
    }
  }

  return true;

}

//--------------------------------------------------------------
function getNewPage() {
  var oEvent = EventUtil.getEvent(); 
  
  // construct the base URL for the new page
  var str = window.location.href.split('?');
  var currentURL = str[0];
  var newURL = '';
  // assume the page is *.php
  if ( currentURL.indexOf('.php') == -1 ) { // URL has no index.php on the end
    if ( currentURL.lastIndexOf('/') == (currentURL.length - 1) ) {  // there is a trailing / in the URL
      newURL = currentURL + 'index.php';
    } else {
      newURL = currentURL + '/index.php';
    }
  } else { // URL has an *.php on the end
    newURL = currentURL;
  }  
  
  var satellite = futils.getCheckedRadioButtonValue('satellite');
  var product = futils.getCheckedRadioButtonValue('product');
//  var product = 'true_color';

  if (document.getElementById("calendarForm")) {    // calendar view
    newURL = newURL + '?satellite=' + satellite + '&product=' + product + '&viewcal=true';
    window.location.href = newURL;
  } else {
    var sector = '';
    var resolution = '';

    if (oEvent.target.className == 'imageSectorOverlay') {
      sector = oEvent.target.getAttribute('id');
      resolution = '2000m';
    } else {
      sector = mutils.getParam('sector');
      resolution = futils.getCheckedRadioButtonValue('resolution');
    }

    var date = '';
    if ( !document.getElementById("calendarForm") ) {
      var dateMenu = document.getElementById("date");
      date = dateMenu.options[dateMenu.selectedIndex].value;
      if (date == 'pick_date')  date = mutils.getParam('date');
    }
    
    // determine what was clicked and then finish constructing the rest of the new URL and load it
    var targetName = oEvent.target.getAttribute('name');
    if ( targetName == 'previous') {
      var previousDate = document.getElementById("previousDate").value;
      if (previousDate == 'CURRENT_DATE_IS_FIRST_DATE' || previousDate == 'CURRENT_DATE_NOT_FOUND') {
        return false;  // do nothing
      } 
      date = previousDate;
    } else if (targetName == 'next') {
      var nextDate = document.getElementById("nextDate").value;
      if (nextDate == 'CURRENT_DATE_IS_LAST_DATE' || nextDate == 'CURRENT_DATE_NOT_FOUND') {
        return false;  // do nothing
      } 
      date = nextDate;
    }

    if (date == '') {
      newURL = newURL + '?satellite=' + satellite + '&product=' + product;
    } else {
      newURL = newURL + '?satellite=' + satellite + '&product=' + product + '&date=' + date;
    }

    // map overlays
    var mapoverlays = String(futils.getSelectedCheckBoxValues('overlay')).split(',');
    var overlay_sector = 'false';
    var overlay_state = 'false';
    var overlay_coastline = 'false';
    for (var i=0; i < mapoverlays.length; i++) {
      if (mapoverlays[i] == 'sector')  overlay_sector = 'true';
      if (mapoverlays[i] == 'state')  overlay_state = 'true';
      if (mapoverlays[i] == 'coastline')  overlay_coastline = 'true';
    }
    newURL = newURL + '&overlay_sector=' + overlay_sector + '&overlay_state=' + overlay_state + '&overlay_coastline=' + overlay_coastline;

    // viewing a sector instead of the usa composite
    if (sector != '')  newURL = newURL + '&sector=' + sector;
    if (resolution != '')  newURL = newURL + '&resolution=' + resolution;
  }

  window.location.href = newURL;

  return true;

}