var map
//var editMarker
var currentClues = $H();
var updateId = ""
var currentClueID = ""
var changableMarkerOptions
var controller
var USE_SCROLLING = 0;
var canAuthor = false;
var appeardelay = 0;
var maplat = 51.542919
var maplng = -0.061669
var mapzoom = 15
    

var W3CDOM = (document.createElement && document.getElementsByTagName);

function initFileUploads() {
	if (!W3CDOM) return;
	var fakeFileUpload = document.createElement('div');
	fakeFileUpload.className = 'fakefile';
	var image = document.createElement('img');
	image.src='../images/browse.gif';
    image.className='browseimg';
	fakeFileUpload.appendChild(image);
    var fakeinput = document.createElement('input')
    fakeinput.className='fake';
    fakeFileUpload.appendChild(fakeinput);
	var x = document.getElementsByTagName('input');
	for (var i=0;i<x.length;i++) {
		if (x[i].type != 'file') continue;
		if (x[i].parentNode.className != 'fileinputs') continue;
		x[i].className = 'file';
		var clone = fakeFileUpload.cloneNode(true);
		x[i].parentNode.appendChild(clone);
		x[i].relatedElement = clone.getElementsByTagName('input')[0];
		x[i].onchange = x[i].onmouseout = function () {
			this.relatedElement.value = this.value;
		}
	}
}


var Clue = Class.create({
  initialize: function(name, question, image_url, marker, line, id) {
    this.name = name;
    this.question = question;
    this.image_url = image_url;
    this.marker = marker;
    this.line = line;
    this.id = id;
    this.fn = makeSurrogate(id);
    positonSurrogate(this.id, this.marker)

  },
  info: function() {
    return this.name;
  },
  position: function() {
    positonSurrogate(this.id, this.marker)
  },
  
    finalise: function() {
    delSurrogate(this.id, this.fn);
    map.removeOverlay(this.marker);
    if (this.line != null){
        this.line.each(function(line) {map.removeOverlay(line);});
    }
    this.marker = 0;
    this.line = 0;
  }
});

function setFocus(id)
{
    $(id).focus()
}

/*---------- virtual for use by iPhone -----------*/
function makeSurrogate(id)
{
    return null
}

function delSurrogate(id, fn)
{

}

function positonSurrogate(id, marker)
{

}

function addMoveEvent()
{
    google.maps.Event.addListener(map, "moveend", function() {
        updateMarkers();
        hideClue();
        putEditMarkerPosIntoForm();
      });
}

/*----------  -----------*/

function load() 
{
  if (google.maps.BrowserIsCompatible()) 
  {
  
    map = new google.maps.Map2(document.getElementById("map"));
    map.setCenter(new google.maps.LatLng( maplat, maplng), mapzoom);

    // Create our "tiny" marker icon
    if (USE_SCROLLING == 1){
        //makes a surface controller for use by iphones
        enableTwoFingerScrolling()
        
        }
    var clueIcon = new GIcon();
    clueIcon.image = "../images/blueclue.png";
    clueIcon.shadow = "../images/blueclueshadow.png";
    clueIcon.iconSize = new GSize(24, 24);
    clueIcon.shadowSize = new GSize(16, 16);
    clueIcon.iconAnchor = new GPoint(12, 12);
    clueIcon.infoWindowAnchor = new GPoint(12, 12);


    changableMarkerOptions = { icon:clueIcon };
    
    
    //initEditMarker(editClueIcon)
      
      

    google.maps.Event.addListener(map, "dragstart", function() {
        hideClue();
        //sendStatusMessage("dragstart")
      });

    google.maps.Event.addListener(map, "resize", function() {
        hideClue();
      });
    google.maps.Event.addListener(map, "mousedown", function() {
        hideClue();
        //sendStatusMessage("mousedown")
      });
      
      
    addMoveEvent()

    //map.addOverlay(editMarker);

    updateMarkers()
    hideSpinner()
    $("modal").hide()
    $("clue").hide()
    setTimeout(function(){window.scrollTo(0, 1);}, 100); 
    checkLogin()
    initEdit()
    specificInit()

    tryToDesaturateMap()
  }
}

function setSelected(index)
{
    $("clue_previous_clue_id").selectedIndex = index
}

function zoomin()
{

    map.zoomIn();
    putEditMarkerPosIntoForm()
}


function onResizeWindow(event)
{
    $('map').style.height = parseInt(document.viewport.getHeight()) + "px";
}


function zoomout()
{

    map.zoomOut();
    putEditMarkerPosIntoForm()
}

function specificInit()
{
    $('map').style.height = parseInt(document.viewport.getHeight()) + "px";
    Event.observe(window, 'resize', onResizeWindow)
    $('helpdiv').hide()
}

function initEdit()
{
    $("editdiv").hide()
    new Draggable('editdiv', { onEnd: function() {
        enddrag();
      }});
}

function enddrag()
{
    putEditMarkerPosIntoForm()
}



function login(layout)
{
    new Ajax.Request('/login/login',
          {
            method:'get',
            parameters: "layout=" + layout
          });
}


function tryToDesaturateMap()
{
    var e = walkTo("map", [1,1,2,1])
    e.style.opacity = 0.8
}


function walkTo(fromid, directions)
{
    var first;
    var index;
    var walkingElement = $(fromid);
    for(var i=0; i<directions.length; i++)
    {
        first = walkingElement.down()
        index  = directions[i]
        
        if (index > 1)
        {
            walkingElement = first.next(index-2)
        }
        else
        {
           walkingElement = first
        }
    }
    return walkingElement
}



//<span class="login" onmousedown="new Ajax.Request('/login/login?layout=world', {asynchronous:true, evalScripts:true, method:'get'})">LOGIN</span>

function checkLogin()
{
    new Ajax.Request('checkLogin',
          {
            method:'get'
          });
}


function loginUpdate()
{
    updateAllMarkers()
}



function newkrumm()
{
    hideModal();
    positionEditDiv(map.getCenter());
    //setMarkersVisibility("edit")
    
    $("clueform").style.left = parseInt(document.viewport.getWidth() - 290) + "px";
    $("clueform").style.top = "80px";
    $("clueform").show();
    
    new Ajax.Request('new_clue',
          {
            method:'get'
          });
}


function positionEditDiv(latLng)
{

    var position = map.fromLatLngToContainerPixel(latLng);
    var style = $("editdiv").style;
    style.left = parseInt(position.x - 24) + "px";
    style.top = parseInt(position.y - 24) + "px";
    
}


function editClue(id)
{
    showSpinner();
    new Ajax.Request('edit_clue',
          {
            method:'get',
            onComplete: function(){ hideSpinner();},
            parameters: "clue=" + id
          });

}



function startModifyClue(id)
{
    var clue = currentClues.get(id);
    positionEditDiv(clue.marker.getLatLng());
    clue.marker.hide();
    setMarkersVisibility("edit");
    initFileUploads();
    putEditMarkerPosIntoForm();
    
    
    var pos = $("show_clue").cumulativeOffset() ;
    var top = 0;
    
    
    if (document.viewport.getHeight() < pos.top + $("clueform").getHeight() + 10)
    {
        top = document.viewport.getHeight()-($("clueform").getHeight() + 10);
        
        if (top < 10){
        top = 10
        }
        
        $("clueform").style.top = parseInt(top) + "px";
     
    }
    else
    {
        $("clueform").style.top = parseInt(pos.top) + "px";
    }


    
    $("clueform").style.left = parseInt(pos.left) + "px";


    hideClue()
    $("clueform").show();
    $("clue_name").focus();
}


function startEditClue()
{

    setMarkersVisibility("edit");
    initFileUploads();
    putEditMarkerPosIntoForm();
    hideClue()
    $("clueform").show();
    $("clue_name").focus();
}


function enableTwoFingerScrolling()
{
    controller = new MapSurfaceController(map);
}
    
function rollOverId(id)
{
    var e = document.getElementById(id)
    e.style.backgroundColor = "#a8e2fd"
    document.body.style.cursor = 'pointer';
}

function rollOutId(id)
    {
    var e = document.getElementById(id)
    e.style.backgroundColor = "#eeeeee"
    document.body.style.cursor = 'default';
    }

function setExpiresForm()
{

    var e = $("clue_expires_enum")
    choice = e.selectedIndex;
    if (choice == 0)replaceDivAndKeepName("expires-none", "expires_current")
    if (choice == 1)replaceDivAndKeepName("expires-time", "expires_current")
    if (choice == 2)replaceDivAndKeepName("expires-solutions", "expires_current")
}


function replaceDivAndKeepName(contentName, targetName)
{
    var sourceParent = $(contentName).parentNode;
    var newNode = sourceParent.removeChild($(contentName))
    var oldNode = $(targetName).replaceChild(newNode, get_firstchild($(targetName)));
    sourceParent.appendChild(oldNode)
}

function showModal()
{
    var k = $('krummz')
    k.style.WebkitBorderBottomLeftRadius = "0px"
	k.style.WebkitBorderBottomRightRadius = "0px"
    k.style.BorderBottomLeftRadius = "0px"
	k.style.BorderBottomRightRadius = "0px"
	k.style.MozBorderRadiusBottomleft = "0px"
	k.style.MozBorderRadiusBottomright = "0px"

    $("modal").show()
    hideClue()
    $("clueform").hide();
    $("helpdiv").hide();

}

function hideModal()
{
    var k = $('krummz')
    k.style.WebkitBorderBottomLeftRadius = "5px"
	k.style.WebkitBorderBottomRightRadius = "5px"
    k.style.BorderBottomLeftRadius = "5px"
	k.style.BorderBottomRightRadius = "5px"
	k.style.MozBorderRadiusBottomleft = "5px"
	k.style.MozBorderRadiusBottomright = "5px"
    $("modal").hide();
    $("helpdiv").hide();
    hideClue()
    $("clueform").hide();
    setMarkersVisibility("clues")
}

function showhelp()
{
    $("helpdiv").show();
}


function testtest()
{
    alert("test")
}


function get_firstchild(n)
{

var x=n.firstChild;
if (x == null)
while (x.nodeType!=1)
  {
  x=x.nextSibling;
  }
return x;
}

function removeOneMarker(id)
{
    
    var clue = currentClues.get(id)
    clue.marker.hide()
    clue.finalise()
    currentClues.unset(id)
}

function updateAllMarkers()
{
  
    setMarkersVisibility("clues")
    currentClues.keys().each(function(id) {removeOneMarker(id);});
    updateMarkers()

}

function hideClueAfterSolve()
{
    setTimeout(function(){hideClue();}, 2000);
}


function positionmarkers()
{
    //alert(currentClues.keys())
    currentClues.keys().each(function(id) {currentClues.get(id).position();});
}

function updateMarkers()
{
    //if(editMarker.isHidden())
//{
    
    var center = map.getCenter()
    var clat = center.lat()
    var clng = center.lng()
    var zoom = map.getZoom()
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    
    var north = northEast.lat();
    var south = southWest.lat();
    var east = northEast.lng();
    var west =  southWest.lng();    
    
    positionmarkers();
    
    showSpinner();
    new Ajax.Request('get_clues',
      {
        method:'get',
        onSuccess: function(transport){
          var response = transport.responseText || "no response text";
          var clues = eval(response);
          processClues(clues);
          hideSpinner();
          
        },
        parameters: "north=" + north + "&south=" + south + "&east=" + east + "&west=" + west  + "&lat=" + clat + "&lng=" + clng + "&zoom=" + zoom,
        onFailure: function(){ alert('Something went wrong...') }
      });
      //}
}

function updateOneMarker(id)
{
    
    showSpinner();
    if(currentClues.get(id)){removeOneMarker(id);}

    new Ajax.Request('get_one_clue',
      {
        method:'get',
        onSuccess: function(transport){
          var response = transport.responseText || "no response text";
          //alert("Success! \n\n" + response);
          var clues = eval("[" + response + "]");
          //lert(clues)
          currentClues.set(id, makeAClue(clues[0]))
          setMarkersVisibility("clues")
          hideSpinner();
        },
        parameters: "clue=" + id,
        onFailure: function(){ alert('Something went wrong...') }
      });
}


function processClues(clues)
{
    //alert(clues)
    //alert(clues.length.toString())
    var newHash = $H();
    
    
    
    
    for(var i=0; i<clues.length; i++)
    {
        id = clues[i].id
        //alert(currentClues.keys())
        if(currentClues.get(id))
            {
            clue = currentClues.get(id)
            newHash.set(id, clue)
            currentClues.unset(id)
            }
        else
            {
            //alert("making")
            newHash.set(id, makeAClue(clues[i]))
            //alert("made")
            }
    }
    //alert("helloww")
    currentClues.keys().each(function(id) {removeOneMarker(id);});
    //currentClues = []
    currentClues = newHash
    
    //alert(currentClues.keys())
    //setMarkersVisibility("clues")
}


function makeAClue(clue)
{
            name = clue.name
            //alert("adding " + name)
            question = clue.question
            image_url = clue.image_url
            line = clue.line
            id = clue.id
            if (clue.solved)
            {
                var marker_url = clue.solved_url
            }
            else
            {
                var marker_url = clue.marker_url
            }
            //alert("make " + clue.name)
            //alert (clue.location_lat.toString() + clue.location_long.toString() + id.toString() + marker_url)
            //marker = makeMarker(clue.location_lat, clue.location_long, id, marker_url)
            marker = makeMarker(clue.posx, clue.posy, id, marker_url)
            //alert(marker)
            if (line){
                //a/lert("hello")
                line = makePolyLine(line[0], line[1], line[2], line[3])
            }
            return new Clue(name, question, image_url, marker, line, id)
}



function getChildNodeWithID(e, id)
{
    if(!(e.hasChildNodes()))return undefined
    var firstchild = e.firstChild
    if (firstchild.id == id)return firstchild
    var x = getChildNodeWithID(firstchild, id)
    if(x)return x
    var sib = firstchild.nextSibling
    while(sib)
        {
        if (sib.id == id)return sib
        x = getChildNodeWithID(sib, id)
        if(x)return x
        sib = sib.nextSibling
        }
    return undefined
}



    

function cancelNewClue()
{
    hideClue()
    setMarkersVisibility("clues")
}


function hideClue()
{
    //Effect.Fade('clue', { duration: 0.1 });
    browserSpecificFade('clue', 0.1)
    appeardelay = 100
    setTimeout(function(){appeardelay = 0}, 100); 
}

function browserSpecificFade(id, dur)
{
    if(Prototype.Browser.IE)
    {
      $(id).hide()
    }
    else{
      Effect.Fade(id, { duration: dur });
    }
}

function browserSpecificAppear(id, dur)
{
    if(Prototype.Browser.IE)
    {
        $(id).show()
    }
    else{
    
        Effect.Appear(id, { duration: dur });
    }
}


    
function showClue(id)
{

    var clue = currentClues.get(id);
    $("clueform").hide()
    var point = map.fromLatLngToContainerPixel(clue.marker.getLatLng());
    var mapw = $("map").getWidth() ;
    var maph = $("map").getHeight() ;
    var xoffset = 362;
    var yoffset = 186;
    var rl = "left"
    var tmb = "mid"
    mappos = $("map").cumulativeOffset() 
    
    if (point.x > 0 &&  point.x + mappos.left <= 372)
    {rl = "right";
    xoffset = 0;
    }
    if (point.x > mapw/2 &&  (mapw - point.x) + mappos.left >= 372)
    {rl = "right";
     xoffset = 0;
    }
    if (point.y <= 190){
    tmb = "top";
    yoffset = 0;
    }
    if (point.y > maph-190 &&  point.y <= maph){
    tmb = "bottom";
    yoffset = 372;
    }
    
    var x = point.x + mappos.left - xoffset
    var y = point.y + mappos.top - yoffset
    
    if(clue)
        {
        new Ajax.Request('show_clue',
          {
            method:'get',
            onSuccess: function(transport){
                setMarkersVisibility("clues")
                //hideSpinner();
                style = getStyleObject("clue")
                style.left = parseInt(x) + "px"
                style.top = parseInt(y) + "px"
                if (appeardelay)
                {
                setTimeout(function(){browserSpecificAppear('clue', 0.2);}, appeardelay); 
                }
                else
                {
                browserSpecificAppear('clue', 0.2)
                }
            },
            parameters: "clue=" + id + "&rl=" + rl + "&tmb=" + tmb,
            onFailure: function(){ alert('Something went wrong...') }
          }); 
        }
}


function resetClue(id)
{
        setTimeout(function(){showClue(id)}, 2000); 
    }

    function getStyleObject(objectId) {
    // cross-browser function to get an object's style object given its
    if(document.getElementById && document.getElementById(objectId)) {
    // W3C DOM
    return document.getElementById(objectId).style;
    } else if (document.all && document.all(objectId)) {
    // MSIE 4 DOM
    return document.all(objectId).style;
    } else if (document.layers && document.layers[objectId]) {
    // NN 4 DOM.. note: this won't find nested layers
    return document.layers[objectId];
    } else {
    return false;
    }
} // getStyleObject


function solveClue(id)
{
    showSpinner();
    //alert(currentClues.keys())
    //clue = currentClues[id]
    var clue = currentClues.get(id)
    var answer = ""
    if ($('answergiven')){
    answer = $('answergiven').value
    }

    //alert("showclue")
    
    if(clue)
        {
        new Ajax.Request('solve_clue',
          {
            method:'post',
            onSuccess: function(transport){
                hideSpinner();
            },
            parameters: "clue=" + id + "&answer=" + answer,
            onFailure: function(){ alert('Something went wrong...') }
          }); 
        }
}


function goToClue(lat, lng, level)
{
    if (level){
        maplevel = level
    }
    else{
    maplevel = map.getZoom()
    }
    map.setCenter(new google.maps.LatLng(lat, lng), maplevel);
}



function setLandscape(layout)
{
    showSpinner();
    var e = $("select_landscape")
    var choice = e.value

    if(choice)
        {
        new Ajax.Request('set_landscape',
          {
            method:'get',
            onSuccess: function(transport){
                updateMarkers()
                hideSpinner();
            },
            parameters: "landscape=" + choice + "&layout=" + layout,
            onFailure: function(){ alert('Something went wrong...') }
          }); 
        }
}


function setMarkersVisibility(state)
{

    if(state == "edit")
    {
        $("editdiv").show()
        
        currentClues.each(function(pair) {
                                      if (pair.value.line){
                                        pair.value.line.each(function(line) {line.hide();})
                                        }
                                    });
    }
    else
    {

        currentClues.each(function(pair) {
                                      pair.value.marker.show();
                                      if (pair.value.line){
                                          pair.value.line.each(function(line) {line.show();})
                                          }
                                    });
        $("editdiv").hide()
        //alert("clue")
    }
    //hideShowNav(state)

}

function hideShowNav(state)
{


}

function sendStatusMessage(msg)
{
    $("message").update(msg)
    Effect.Appear('messagediv', { duration: 0.2 });
    
    setTimeout(function(){Effect.Fade('messagediv', { duration: 0.1 });}, 4000); 
    

}

function showEdit(id)
    {
    hideModal();
    //editMarker.setLatLng(currentClues.get(id).marker.getLatLng())
    setMarkersVisibility("edit")
    setExpiresForm()
    $("clueform").show()
    
    }
    

    
function setMapHeight(pixels)
{
    $middle.height = pixels;

}
    

function putEditMarkerPosIntoForm()
    {
    
    if($("clue_location_lat"))
    {
        mappos = $("map").cumulativeOffset()
        dragpos = $("editdiv").cumulativeOffset() 

        var x = (dragpos.left - mappos.left) + 24
        var y = (dragpos.top -  mappos.top) + 24


        var pixel = new GPoint(x, y)

        var position = map.fromContainerPixelToLatLng(pixel)
        $("clue_location_lat").value = position.lat().toString()
        $("clue_location_long").value = position.lng().toString()
        $("clue_maplevel").value = map.getZoom().toString()
    }
    }
    
    
function makeMarker(latitude, longtitude, id, marker_url) 
    {
      //alert(marker_url)
      changableMarkerOptions.icon.image = marker_url
      var point = new google.maps.LatLng(latitude, longtitude);
      var marker = new google.maps.Marker(point, changableMarkerOptions);
      google.maps.Event.addListener(marker, "mousedown", function() {
        showClue(id)
      });
      map.addOverlay(marker);
      
      return marker
    }
    
function makePolyLine(latitude1, longtitude1, latitude2, longtitude2) 
    {
      //alert("making a line")
      var point1 = new google.maps.LatLng(latitude1, longtitude1);
      var point2 = new google.maps.LatLng(latitude2, longtitude2);
      var line = new google.maps.Polyline([point1, point2], "#ffffff", 8, 0.5);
      var line2 = new google.maps.Polyline([point1, point2], "#01aefe", 6, 0.6);
      map.addOverlay(line);
      map.addOverlay(line2);
      return [line, line2]
    }
    


function showhide(show, hide)
{
    $(show).style.visibility = "visible"
    $(hide).style.visibility = "hidden"

}

function showSpinner()
{
    //$('spinner').style.visibility="visible";
}

function hideSpinner()
{
  //$('spinner').style.visibility="hidden";
}
    
function forgot()
{
    $("lost").value = "yes"
    $('login').onsubmit()
    return false;

}

function resetWindow(){

}