var viewportid, imagedivid, image1id, image2id, pantitleid, bearingid, viewportx, viewporty, viewportwidth, viewportheight, movebar, defaulttimeout, loaded, mousestate, moving, mytimer, origimagewidth, origimageheight, imagewidth, imageheight, northposition, horizon;
var positionx, positiony, timedx, timedy, icursorx, icursory, offset, zoomfactor, zoomincrement, plat, plong, panid, peakid, peakname, panelev, bearing, panpeakid, panpeakdistance, islogged;

movebar = 50;   
defaulttimeout = 30; 
zoomfactor = 1.0;
zoomincrement = 1.3;
loaded = false;

mousestate = false;
moving = true;

//window.onload=initpan;

function initpan(){
  viewportid=document.getElementById("viewportdiv");
  imagedivid=document.getElementById("imagediv");
  image1id=document.getElementById("panimage1");
  image2id=document.getElementById("panimage2");

  pantitleid = document.getElementById("pantitle");
  bearingid = document.getElementById("bearing");
  xClip(viewportid,0,viewportwidth,viewportheight,0);
  xShow(viewportid);
  xShow(imagedivid);
  viewportx = xPageX(viewportid);
  viewporty = xPageY(viewportid);
  viewportwidth = xWidth(viewportid);   
  viewportheight = xHeight(viewportid);

//  xAddEventListener(imagedivid, "mousedown", mousedown, true);
//  xAddEventListener(imagedivid, "mouseup", mouseup, true);
  $.post("islogged.php",{ }, function(data){islogged(data);}, "xml");
  loaded = true;
}

function islogged(xml){
  islogged = $("logged", xml).text();
  if( islogged == "true")
    addAdministratorMenu();
  else
    addMouseMenu();
}

function addMouseMenu(){
  var menu = [ 
    {'GE view toward peak':viewC}, 
    {'GE view half way':viewA}, 
    {'GE view at 3 km':viewB}
  ]; 
  $('#viewportdiv').contextMenu(menu);
}

function addAdministratorMenu(){
  var menu = [ 
    {'GE view toward peak':viewC}, 
    {'GE view half way':viewA}, 
    {'GE view at 3 km':viewB},
    $.contextMenu.separator, 
    {'GetPeaks':getPeaksAtBearing}, 
    {'RemovePeak':removePanPeak}, 
    {'SetNorth':setNorthInit},
    {'SetHorizon':setHorizonInit}
  ]; 
  $('#viewportdiv').contextMenu(menu);
}

function setimageparms(pid, pname, pelev, iheight, iwidth, north, horiz, lat, long, author, date){
  peakid = pid;
  peakname = pname;
  panelev = pelev;
  imageheight = iheight;
  imagewidth = iwidth;
  xWidth(image1id, imagewidth);
  xWidth(image2id, imagewidth);
  xHeight(image1id, imageheight);
  xHeight(image2id, imageheight);
  origimageheight = imageheight;
  origimagewidth = imagewidth;
  northposition = north;
  horizon = horiz;
  plat = lat;
  plong = long;
  var text = "<DIV id='paninfo'><br>" + "Panorama from <br>" +  peakname + "<br>" + panelev + " m</DIV>"
  $("#paninfo").replaceWith(text).css({'visibility': 'visible'});
  text = "<DIV id='pancredit'><br>" + "Pan by " +  author + "<br>Date: " + date + "</DIV>"
  $("#pancredit").replaceWith(text).css({'visibility': 'visible'});
}

function mousedown(objEvent){
  var oEvent = new xEvent(objEvent);
}

function mouseup(objEvent){
  var oEvent = new xEvent(objEvent);
}

function peakover(id, name, height, xpos, ypos, lat, long, distance, panid){
  panpeakid = id;
  panpeakdistance = distance;
  var rpos = xpos + viewportx + positionx + 30;
      // if on second image, add imagewidth to position peaktag on the second image
  if(xpos + positionx < 0) rpos += imagewidth;
  var tpos = ypos + viewporty + positiony - 60;
  var text = "<DIV id='peaktag' div style='position: absolute; left: " + rpos + "px; top: " + tpos + "px; '>" + name + "<br>" + height + " m<br>" + distance + " km</DIV>";
  $("#peaktag").replaceWith(text).css({'visibility':'visible'});
  var elev1 = parseFloat(panelev);
  var elev2 = parseFloat(height);
  if(ge != null) showpath(plat, plong, lat, long, elev1, elev2);
  if(panid == 0) 
    ;
//    createPanpeakPlacemark(lat, long, name);
  else
    $("#viewportdiv").css({'cursor' : 'url("http://www.bowvalleysoftware.com/pan/gifs/binocular2.gif"), auto' });
}

function peakoff(){
  $("#viewportdiv").css({'cursor' : 'crosshair' });
  $("#peaktag").css('visibility', 'hidden');
  removepath();
  removePanpeakPlacemark();
}

function mousemove(objEvent){
  var oEvent = new xEvent(objEvent);
  if(oEvent.pageX > viewportx && oEvent.pageX < viewportx + viewportwidth && oEvent.pageY > viewporty && oEvent.pageY < viewporty + viewportheight){
    displayicursorposition(oEvent.pageX, oEvent.pageY);
    if(mousestate != moving){
      if(oEvent.pageX > viewportx + viewportwidth - movebar){
        startmovement(20, 0);
      }else if(oEvent.pageX < viewportx + movebar){
        startmovement(-20, 0);
      }else if(oEvent.pageY > viewporty + viewportheight - movebar){
        startmovement(0, 5);
      }else if(oEvent.pageY < viewporty + movebar){
        startmovement(0, -5);
      }
    }else{
      if(oEvent.pageX < viewportx + viewportwidth - movebar && oEvent.pageX > viewportx + movebar && oEvent.pageY < viewporty + viewportheight - movebar && oEvent.pageY > viewporty + movebar){
        stopmovement();
      }
    }
  }
  if(oEvent.pageX < viewportx || oEvent.pageX > viewportx + viewportwidth || oEvent.pageY < viewporty || oEvent.pageY > viewporty + viewportheight){
    stopmovement();
  }
}

function displayicursorposition(x, y){
  icursorx = x;
  icursory = y;
  offset = x - positionx - viewportx - northposition * zoomfactor;
  bearing = (360.0  / imagewidth) * offset;
  if( bearing < 0.0) bearing += 360.0;
  if( bearing > 360.0) bearing -= 360.0;
  bearingid.value = Math.round(bearing*10)/10;
}

function updateicursorposition(x, y){
  icursorx += x;
  icursory += y;
  offset += x;
  bearing = (360.0  / imagewidth) * offset;
  if( bearing < 0.0) bearing += 360.0;
  if( bearing > 360.0) bearing -= 360.0;
  bearingid.value = Math.round(bearing*10)/10;
}

function positionAtBearing(b){
  var north = northposition * zoomfactor;
  bearing = b;
  bearingid.value = Math.round(bearing);
  var loc = (bearing / 360.0) * imagewidth + north;
  if(loc > imagewidth) loc -= imagewidth;
  if(loc < viewportwidth / 2) loc += imagewidth;
  positionx = -1 * (loc - viewportwidth / 2 );
  xMoveTo(imagedivid, positionx, positiony);
  positionVertically();
  setGECamera(plat, plong, 85.0, 3000.0, parseFloat(bearing));
}

function positionVertically(){
  positiony = viewportheight / 2 - horizon * zoomfactor;
  if (positiony > 0) positiony = 0;
  xMoveTo(imagedivid, positionx, positiony);
}

function startmovement(x, y){
  if(mousestate != moving){
    timedx = x;
    timedy = y;
    mousestate = moving;
    mytimer = setTimeout("moveimage()",defaulttimeout);
  }
}

function stopmovement(){
  clearTimeout(mytimer);
  mousestate = !moving;
}

function moveimage(){
  if (loaded) 
  {
    if (mousestate == moving){
        mytimer = setTimeout("moveimage()",defaulttimeout);
        var deltax = timedx;
        var deltay = timedy;
    }

    if (deltay < 0 && deltay < positiony) {
      deltay = positiony; 
    } else if (deltay > 0 &&  deltay > xHeight(imagedivid) - viewportheight + positiony) {
      deltay = xHeight(imagedivid) - viewportheight + positiony; 
    }
    if(deltax < 0 && deltax < positionx) {
      deltax += imagewidth;
    } else if(deltax > 0 && positionx - deltax < -1 * imagewidth) {
      deltax -= imagewidth;
    }
    positionx -= deltax;
    positiony -= deltay;
    xMoveTo(imagedivid, positionx, positiony);
    updateicursorposition(deltax, deltay);
 }
}

function zoomReset()
{
    if (!loaded) return;
    imagewidth = origimagewidth;
    imageheight = origimageheight;
    xWidth(image1id, imagewidth);
    xWidth(image2id, imagewidth);
    xHeight(image1id, imageheight);
    xHeight(image2id, imageheight);
    positionx = 0.5 * viewportwidth + positionx / zoomfactor - 0.5 * viewportwidth / zoomfactor;
    positiony = 0.5 * viewportheight + positiony / zoomfactor - 0.5 * viewportheight / zoomfactor;
    xMoveTo(imagedivid, positionx, positiony);
    zoomfactor = 1.0;
    $.post("panpeaks.php",{ panid: panid }, function(data){setpanpeaks(data);}, "xml");   
    return;
}
function zoomIn()
{
    if (!loaded) return;
    if(zoomfactor > 3.0) return;
    zoomfactor *= zoomincrement;
    imagewidth = Math.round(zoomincrement * imagewidth);
    imageheight = Math.round(zoomincrement * imageheight);
    xWidth(image1id, imagewidth);
    xWidth(image2id, imagewidth);
    xHeight(image1id, imageheight);
    xHeight(image2id, imageheight);
    positionx = 0.5 * viewportwidth + zoomincrement * positionx - 0.5 * zoomincrement * viewportwidth;
    positiony = 0.5 * viewportheight + zoomincrement * positiony - 0.5 * zoomincrement * viewportheight;
    xMoveTo(imagedivid, positionx, positiony);
    $.post("panpeaks.php",{ panid: panid }, function(data){setpanpeaks(data);}, "xml");   
    return;
}
function zoomOut()
{
    if (!loaded) return;
    if(zoomfactor <= 1.0) return;
    zoomfactor /= zoomincrement;
    imagewidth = Math.round(imagewidth / zoomincrement);
    imageheight = Math.round(imageheight / zoomincrement);
    xWidth(image1id, imagewidth);
    xWidth(image2id, imagewidth);
    xHeight(image1id, imageheight);
    xHeight(image2id, imageheight);
    positionx = 0.5 * viewportwidth + positionx / zoomincrement - 0.5 * viewportwidth / zoomincrement;
    positiony = 0.5 * viewportheight + positiony / zoomincrement - 0.5 * viewportheight / zoomincrement;
    xMoveTo(imagedivid, positionx, positiony);
    $.post("panpeaks.php",{ panid: panid }, function(data){setpanpeaks(data);}, "xml");   
    return;
}