var image_viewer;
var show_image_list = true;
var map;
var images = getImageList();
var default_image = 0;
var current_image;
var resize_count = 9;
var map_panel_fade_count = 10;
var image_list_fade_count = 10;
var image_viewer_fade_count = 10;
var highlighted_image;
var animating = false;

function IVCreateViewer(host_div) {
  if (!GBrowserIsCompatible()) {
    return;
  }
  if(!document.getElementById(host_div)) {
    return;
  }
  image_viewer = document.getElementById(host_div);
  image_viewer.innerHTML = '<div id="super_container"><div id="map_container"></div><div id="collapse_control"></div><div id="image_list"></div></div><iframe id="info"></iframe>';
  image_viewer.style.padding = '5px';
  image_viewer.style.backgroundColor = '#000000';
  
  document.getElementById('info').style.display = 'none';
  document.getElementById('info').style.color = '#FF0000';
  document.getElementById('info').style.backgroundColor = '#C0C0C0';
  document.getElementById('info').style.opacity = '0.5';
  document.getElementById('info').style.position = 'absolute';
  document.getElementById('info').style.top = '100px';
  document.getElementById('info').style.left = '100px';
  document.getElementById('info').style.width = (IVAvailableWidth() - 200) + 'px';
  document.getElementById('info').style.height = (IVAvailableHeight() - 200) + 'px';
  document.getElementById('info').style.border = '1px solid green';
  document.getElementById('info').addEventListener('click', IVInfoWindowOnClickHandler, false);
  
  document.getElementById('map_container').style.border = '1px solid #404040';
  document.getElementById('map_container').style.padding = '2px';
  document.getElementById('map_container').innerHTML = '<div id="map"></div>';
  IVResize();
  
  document.getElementById('map').style.width = '100%';
  document.getElementById('map').style.height = '100%';
  
  document.getElementById('collapse_control').style.backgroundImage = "url('down.png')";
  document.getElementById('collapse_control').style.backgroundRepeat = 'no-repeat';
  document.getElementById('collapse_control').style.width = '29px';
  document.getElementById('collapse_control').style.height = '16px';
  document.getElementById('collapse_control').style.margin = '2px';
  document.getElementById('collapse_control').addEventListener('click', IVCollapseControlOnClickHandler, false);
  document.getElementById('collapse_control').addEventListener('mouseover', IVCollapseControlOnMouseOverHandler, false);
  
  document.getElementById('image_list').style.width = '100%';
  document.getElementById('image_list').style.height = '130px';
  document.getElementById('image_list').style.backgroundColor = '#000000';
  document.getElementById('image_list').style.color = '#C0C0C0';
  document.getElementById('image_list').style.textAlignment = 'center';
  
  IVBuildImageList();
  IVSetImage(default_image);
}

function IVResize() {
  if(show_image_list) {
    document.getElementById('map_container').style.width = (IVAvailableWidth() - 5) + 'px';
    document.getElementById('map_container').style.height = (IVAvailableHeight() - 200) + 'px';
  } else {
    document.getElementById('map_container').style.width = (IVAvailableWidth() - 5) + 'px';
    document.getElementById('map_container').style.height = (IVAvailableHeight() - 20) + 'px';
  }
  if(map) {
    map.checkResize();
  }
  document.getElementById('info').style.width = (IVAvailableWidth() - 200) + 'px';
  document.getElementById('info').style.height = (IVAvailableHeight() - 200) + 'px';
}

function IVUnload() {
  GUnload();
}

function IVBuildImageList() {
  document.getElementById('image_list').innerHTML = '<table id="image_list_table"></table>';
  var table = document.getElementById('image_list_table');
  for(var ii = table.rows.length; ii > 0; --ii) {
    table.removeChild(table.rows[0]);
  }
  var row = document.createElement("tr");
  row.id = 'image_list_row';
  table.appendChild(row);
  for(var ii = 0; ii < images.length; ++ii) {
    if(images[ii].isDefault) {
      default_image = ii;
    }
    var cell = document.createElement("td");
    cell.id = 'image_list_cell_' + ii;
    row.appendChild(cell);
    cell.innerHTML = '<div id="' + ii + '"></div>';
    
    var div = document.getElementById(ii);
    div.style.textAlign = 'center';
    div.style.padding = '2px';
    div.style.border = '1px solid #404040';
    div.addEventListener('click', IVImageOnClickHandler, false);
    div.addEventListener('mouseover', IVImageOnMouseOverHandler, false);
    div.addEventListener('mouseout', IVImageOnMouseOutHandler, false);
    div.innerHTML = '<img id="image_list_thumb_' + ii + '"><br />' + images[ii].longName + '<span id="image_list_span_' + ii + '"></span>';
    
    var thumb = document.getElementById('image_list_thumb_' + ii);
    thumb.src = images[ii].qtreeName + '.qtree/thumb.png';
    thumb.style.height = '128px';
    thumb.style.width = '128px';
    thumb.style.opacity = '0.35';
    
    var imageSize;
    imageSize = images[ii].width * images[ii].height;
    var imageSizeUnits;
    if(Math.floor(imageSize / 1099511627776) > 0) {
      imageSize = Math.floor(imageSize / 1099511627776);
      imageSizeUnits = 'PetaPixel' + (imageSize > 1?'s':'');
    } else if(Math.floor(imageSize / 1073741824) > 0) {
      imageSize = Math.floor(imageSize / 1073741824);
      imageSizeUnits = 'GigaPixel' + (imageSize > 1?'s':'');
    } else if(Math.floor(imageSize / 1048576) > 0) {
      imageSize = Math.floor(imageSize / 1048576);
      imageSizeUnits = 'MegaPixel' + (imageSize > 1?'s':'');
    } else if(Math.floor(imageSize / 1024) > 0) {
      imageSize = Math.floor(imageSize / 1024);
      imageSizeUnits = 'KiloPixel' + (imageSize > 1?'s':'');
    } else {
      imageSizeUnits = 'Pixel' + (imageSize > 1?'s':'');
    }
    
    var span = document.getElementById('image_list_span_' + ii);
    span.style.fontSize = '50%';
    span.innerHTML = '<br />(' + imageSize + ' ' + imageSizeUnits + ')';
  }
}

function IVGetMosaic(image_id) {
  var copyrights = new GCopyrightCollection('Map data');
  copyrights.addCopyright(new GCopyright(
    'copyright_' + image_id,
    new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
    0,
    images[image_id].copyright));
  
  var tileset = new GTileLayer(copyrights, 0, 4);
  tileset.getTileUrl = function(tile, zoom) {
    var url = images[current_image].qtreeName + '.qtree/r';
    for(var z = zoom - 1; z >= 0; --z) {
      var x = Math.floor(tile.x / Math.pow(2, z)) % 2;
      var y = Math.floor(tile.y / Math.pow(2, z)) % 2;
      url += (x + 2 * y)
    }
    url += '.jpeg';
    return(url);
  };
  tileset.isPng = function() { return true; }
  tileset.getOpacity = function() { return 1.0; }
  
  var proj = new GMercatorProjection(images[image_id].maxZoom + 1);
//  proj.fromLatLngToPixel = function(latlng, zoom) {
//    return new GPoint(latlng.lng(), latlng.lat());
//  };
//  proj.fromPixelToLatLng = function(pixel, zoom, undbounded) {
//    return new GLatLng(pixel.x, pixel.y);
//  };
  proj.getWrapWidth = function(zoom) {
    return Infinity;
  };
  proj.tileCheckRange = function(tile, zoom, tilesize) {
    if(tile.x < 0 || tile.x >= Math.pow(2, zoom) || tile.y < 0 || tile.y >= Math.pow(2, zoom)) {
      return false;
    }
    return true;
  };
  
  var maptype = new GMapType(
    [tileset],
    proj,
    images[image_id],
    {
      shortName:images[image_id].qtreeName,
      tileSize:256,
      maxResolution:images[image_id].maxZoom,
      minResolution:images[image_id].minZoom
    });
  
  return maptype;
}

function IVCollapseControlOnMouseOverHandler() {
  this.style.cursor = 'pointer';
}

function IVCollapseControlOnClickHandler() {
  if(!animating) {
    animating = true;
    IVToggleImageList();
  }
}

function IVImageOnMouseOverHandler() {
  this.style.cursor = 'pointer';
  if(this.id != current_image) {
    var thumb = document.getElementById('image_list_thumb_' + this.id);
    thumb.style.opacity = '1.0';
    highlighted_image = this.id;
  }
}

function IVImageOnMouseOutHandler() {
  if(this.id != current_image) {
    var thumb = document.getElementById('image_list_thumb_' + this.id);
    thumb.style.opacity = '0.35';
    highlighted_image = null;
  }
}

function IVImageOnClickHandler() {
  if(!animating) {
    if(this.id != current_image) {
      current_image = this.id;
      for(var ii = 0; ii < images.length; ++ii) {
        if(ii != current_image) {
          IVSetHighlightImageListDiv(ii, 0);
        }
        if(ii == highlighted_image) {
          document.getElementById('image_list_thumb_' + ii).style.opacity = '1.0';
        }
      }
      IVSetHighlightImageListDiv(current_image, 1);
      animating = true;
      IVFadeOutMapPanel();
    } else {
      IVShowImageInfoWindow(this.id);
    }
  }
}

function IVInfoWindowOnClickHandler() {
  alert('yo');
  if(!animating) {
    animating = true;
    IVFadeInImageViewer();
  }
}

function IVSetImage(image_id) {
  current_image = image_id;
  for(var ii = 0; ii < images.length; ++ii) {
    if(ii != image_id) {
      IVSetHighlightImageListDiv(ii, 0);
    }
    if(ii == highlighted_image) {
      document.getElementById('image_list_thumb_' + ii).style.opacity = '1.0';
    }
  }
  IVSetHighlightImageListDiv(image_id, 1);
  map = new GMap2(document.getElementById("map"), { mapTypes: [IVGetMosaic(current_image)] });
  map.setCenter(new GLatLng(images[image_id].centerY, images[image_id].centerX), images[image_id].defaultZoom);
  map.addControl(new GLargeMapControl());
  document.getElementById('map').style.backgroundColor = '#000000';
}

function IVSetHighlightImageListDiv(image_id, mode) {
  var div = document.getElementById(image_id);
  var thumb = document.getElementById('image_list_thumb_' + image_id);
  if(mode) {
    div.style.borderColor = '#C0C0C0';
    div.style.borderWidth = '2px';
    div.style.padding = '1px';
    thumb.style.opacity = '1.0';
  } else {
    div.style.borderColor = '#404040';
    div.style.borderWidth = '1px';
    div.style.padding = '2px';
    thumb.style.opacity = '0.35';
  }
}

function IVToggleImageList() {
  show_image_list = !show_image_list;
  if(show_image_list) {
    IVShrinkMapPanel();
  } else {
    IVFadeOutImageList();
  }
}

function IVShowImageInfoWindow(image_id) {
  animating = true;
  IVFadeOutImageViewer();
}

function IVFadeOutImageViewer() {
  image_viewer_fade_count--;
  document.getElementById('super_container').style.opacity = image_viewer_fade_count * 0.1;
  if(image_viewer_fade_count >= 3) {
    window.setTimeout(IVFadeOutImageViewer, 10);
  } else {
    document.getElementById('info').style.display = 'block';
    animating = false;
    alert('The info window is not yet working. When it is, this will be replaced with a nice area for extra information about the selected image.');
    IVFadeInImageViewer();
  }
}

function IVFadeInImageViewer() {
  image_viewer_fade_count++;
  document.getElementById('info').style.display = 'none';
  document.getElementById('super_container').style.opacity = image_viewer_fade_count * 0.1;
  if(image_viewer_fade_count < 10) {
    window.setTimeout(IVFadeInImageViewer, 10);
  } else {
    animating = false;
  }
}

function IVShrinkMapPanel() {
  resize_count++;
  document.getElementById('map_container').style.height = (IVAvailableHeight() - 40 - resize_count * 20) + 'px';
  if(resize_count < 8) {
    window.setTimeout(IVShrinkMapPanel, 10);
  } else {
    document.getElementById('collapse_control').style.backgroundImage = "url('down.png')";
    document.getElementById('image_list').style.display = 'block';
    IVFadeInImageList();
  }
}

function IVGrowMapPanel() {
  if(resize_count >= 9) {
    document.getElementById('image_list').style.display = 'none';
  }
  resize_count--;
  document.getElementById('map_container').style.height = (IVAvailableHeight() - 40 - resize_count * 20) + 'px';
  if(resize_count >= 0) {
    window.setTimeout(IVGrowMapPanel, 10);
  } else {
    document.getElementById('collapse_control').style.backgroundImage = "url('up.png')";
    animating = false;
  }
}

function IVFadeOutMapPanel() {
  map_panel_fade_count--;
  document.getElementById('map').style.opacity = map_panel_fade_count * 0.1;
  if(map_panel_fade_count >= 0) {
    window.setTimeout(IVFadeOutMapPanel, 10);
  } else {
    IVSetImage(current_image);
    IVFadeInMapPanel();
  }
}

function IVFadeInMapPanel() {
  map_panel_fade_count++;
  document.getElementById('map').style.opacity = map_panel_fade_count * 0.1;
  if(map_panel_fade_count < 10) {
    window.setTimeout(IVFadeInMapPanel, 10);
  } else {
    animating = false;
  }
}

function IVFadeOutImageList() {
  image_list_fade_count--;
  document.getElementById('image_list').style.opacity = image_list_fade_count * 0.1;
  if(image_list_fade_count >= 0) {
    window.setTimeout(IVFadeOutImageList, 10);
  } else {
    document.getElementById('image_list').style.display = 'none';
    IVGrowMapPanel();
  }
}

function IVFadeInImageList() {
  image_list_fade_count++;
  document.getElementById('image_list').style.opacity = image_list_fade_count * 0.1;
  if(image_list_fade_count < 10) {
    window.setTimeout(IVFadeInImageList, 10);
  } else {
    animating = false;
  }
}

function IVAvailableWidth() {
  if(image_viewer.style.width) {
    if(image_viewer.style.width.match(/\%$/)) {
      return Math.floor(image_viewer.style.width.match(/^(\d+)/)[1] * 0.01 * IVPageWidth());
    } else if(image_viewer.style.width.match(/px$/)) {
      return image_viewer.style.width.match(/^(\d+)/)[1] ;
    }
  }
  return null;
}

function IVAvailableHeight() {
  if(image_viewer.style.height) {
    if(image_viewer.style.height.match(/\%$/)) {
      return Math.floor(image_viewer.style.height.match(/^(\d+)/)[1] * 0.01 * IVPageHeight());
    } else if(image_viewer.style.height.match(/px$/)) {
      return image_viewer.style.height.match(/^(\d+)/)[1];
    }
  }
  return null;
}

function IVPageWidth() {
  if(window.innerWidth) {
    return window.innerWidth;
  } else if(document.body) {
    return document.body.clientWidth;
  }
  return null;
}

function IVPageHeight() {
  if(window.innerHeight) {
    return window.innerHeight;
  } else if(document.body) {
    return document.body.clientHeight;
  }
  return null;
}