var map;
var markers = {};
var listings = [];
var geo_marker = {};
var main_marker = {};

var icon_path = "/images/icons/"
var icon_template = new GIcon({
    shadow : icon_path + "icon_gmap_shadow.png",
    iconSize : new GSize(20, 34),
    shadowSize : new GSize(36, 33),
    iconAnchor : new GPoint(12, 24),
    infoWindowAnchor : new GPoint(8, 10),
    infoShadowAnchor : new GPoint(8, 10)});

var geo_icon = new GIcon(icon_template); 
    geo_icon.image =  icon_path + "icon_gmap_geo.png";
var stay_icon = new GIcon(icon_template); 
    stay_icon.image =  icon_path + "icon_gmap_stay.png";
var eat_icon = new GIcon(icon_template); 
    eat_icon.image =  icon_path + "icon_gmap_eat.png";
var do_icon = new GIcon(icon_template); 
    do_icon.image =  icon_path + "icon_gmap_do.png";

var selectionCallout;

var sorting = new Hash({ column: '', direction: 'asc' });

function toggleMarker(count, checkbox) {
  if (checkbox.checked == true) {
    updateMarker(markers[checkbox.value], 'show', true)
  } else {
    updateMarker(markers[checkbox.value], 'hide', true)
  }
}

function toggleMarkerUsingName(count) {
  checkbox = $("picks_" + count);
  if (checkbox.checked){
    checkbox.checked = true;
  }else{
    checkbox.checked = true;     
  }
toggleMarker(count, checkbox);
}

function toggleAll(thisInput, cbName, action) {
  if (action == ''){
    // need to determine action based on the state of thisInput
    if (thisInput.checked){
      action = 'show'
    }else{
      action = 'hide'
    }
  }
  cbElements = document.getElementsByName(cbName);
  
  toggle(cbElements, action);

  // This is a candidate for some refactoring in conjunction with a refactoring of the toggleAllSelectBoxes() function
  selectBoxes = $$("input.select")
  if (action == "show"){
      for(i = 0; i < selectBoxes.length; i++){
          selectBoxes[i].checked = true;
      }
  } else {
      for(i = 0; i < selectBoxes.length; i++){
          selectBoxes[i].checked = false;
      }
  }
}

function toggleAllSelectBoxes() {
  // check the boxes for the three section header check boxes
  selectBoxes = $$("input.select")
  for(i = 0; i < selectBoxes.length; i++){
      if (selectBoxes[i].checked == false) {
        selectBoxes[i].checked = true;
      } else {
        selectBoxes[i].checked = false;
      }
  }
}

function toggleByCategory(thisInput, category) {
  if (thisInput.checked) {
    action = 'show'
  } else {
    action = 'hide'
  }
  
  cbElements = $$('.list li input.' + category)
  toggle(cbElements, action)
}

function toggle(cbElements, action) {
  var bounds = new GLatLngBounds();
  
  for (i = 0; i < cbElements.length; i++) {
    var id = listings[i].id

    bounds.extend(new GLatLng(listings[i].latitude,listings[i].longitude));
    var newZoom = map.getBoundsZoomLevel(bounds);
    map.setCenter(bounds.getCenter(), newZoom);
    if (action == 'show') {
      updateMarker(markers[id], 'show', false)
      cbElements[i].checked = true;
    } else {
      updateMarker(markers[id], 'hide', false)
      cbElements[i].checked = false;
    }           
  }
  
}

function toggleList(section){
    listId = section.toLowerCase() + "-list";
    headerId = section.toLowerCase() + "-header";
    Effect.toggle(listId, 'blind', { duration: 0.6 });
    if ($(headerId).className == "open"){
      $(headerId).className = "closed";
    }else{
      $(headerId).className = "open";
    }
}

function updateMarker(marker, action, bolPanTo){
  //var bounds = new GLatLngBounds();
  //var newZoom = map.getBoundsZoomLevel(bounds)
  var latLng = marker.getLatLng()
  
  // TODO:it's possible to improve this code
  // TODO: figure out how to get appropriate zoom level
  if (action == 'show') {
    //bounds.extend(latLng)
    //map.setCenter(bounds.getCenter(), newZoom)
    marker.show()
    if (bolPanTo) { map.panTo(latLng) }
  } else {
    marker.hide()
  }
  
}

function sortVenue(what){
  var elements = $$('ul#list li').each(function(e){e.remove()});
  var presorted = elements;
  $$('.ascending').each(function(a){ a.className = "sort"});
  $$('.descending').each(function(b){ b.className = "sort"});
  switch (what){
    case 'checked':
      presort = elements.sort(sortNames);
      sortedElements = presort.sort(sortCheckBoxes);
      break;
    case 'award':
      presort = elements.sort(sortNames);
      sortedElements = presort.sort(sortAwards);
      break;
    case 'name':
      sortedElements = elements.sort(sortNames);
      break;
    case 'location':
      presort = elements.sort(sortNames);
      sortedElements = presort.sort(sortLocations);
      break;
    case 'category':
      presort = elements.sort(sortNames);
      sortedElements = presort.sort(sortCategories);
      break;
  }

  if (sorting.get('column') == what && sorting.get('direction') == 'asc') {
    sorting.set('direction', 'desc');
    $(what + "_sort").className = "descending";
    (sortedElements.reverse()).each(function(x){$('list').appendChild(x)});  
  } else {
    sorting.set('direction', 'asc');
    $(what + "_sort").className = "ascending";
    sortedElements.each(function(x){$('list').appendChild(x)});
  }

  sorting.set('column', what);
}

function sortCheckBoxes(a,b){
  if (b.select('input')[0].checked) {
    return 1;
  } else {
    return -1;
  }
}

function sortAwards(a, b){
  if (b.select('.award')[0].innerHTML == 'true') {
    return 1;
  } else{
    return -1;
  }
}

function sortLocations(a, b){
  if (a.select('.location')[0].innerHTML > b.select('.location')[0].innerHTML){
    return 1;
  } else{
    return -1;
  }
}

// This function is not very pretty and could probably be much shorter...
function sortCategories(a, b){
  aCat = a.select('.category')[0].innerHTML;
  bCat = b.select('.category')[0].innerHTML;
  if (aCat == bCat) {
    return 0;
  }else{
    if (bCat == 'stay'){
      return 1;
    }
    if (bCat == 'do'){
      return -1;
    }
    if (bCat == 'eat' && aCat == 'stay'){
      return -1;
    } else{
      return 1;
    }
  }
}

function sortNames(a, b){
  if (a.select('.name')[0].innerHTML > b.select('.name')[0].innerHTML){
    return 1;
  } else {
    return -1;
  }
}

//used for displaying the correct icon type for a marker
function whichIcon(type){
  switch(type)
  {
  case "stay":
    return stay_icon
    break; 
  case "eat":
    return eat_icon
    break;
  case "do":
    return do_icon
    break;
  }
}

document.observe("dom:loaded", function(){
        MapCallout.instances = [];
        $$('a.map-callout-trigger').each(function(el){
          MapCallout.instances.push(new MapCallout(el, 'ajax-callout'));
        });
});