dojo.require("dojo.widget.*");
dojo.require("dojo.io.*");
dojo.require("dojo.html.*");
dojo.require("dojo.widget.FloatingPane");

dojo.addOnLoad(getImageGroups);


function getImageGroups() {
  dojo.io.bind({
 	  url: "/ajax/ImageGroups.jsp",
	  load: function(type, data, event, kwArgs){showImageGroups(data);},
	  timeout: function() {alert('timeout');},
	  error: function(type, error) {alert('got error ' + type + ',' + error.toString()); document.body.appendChild(error);},
	  timeoutSeconds: 10,
	  mimetype: "application/xml"
	  });
}

function showImageGroups(xmldoc){
  var fisheye = dojo.widget.byId("menuFisheye");
  var groups  = xmldoc.getElementsByTagName("Group");
  
  for(var i=0; i<groups.length; i++){
    var child = dojo.widget.createWidget("FishEyeListItem",
           { iconSrc: "http://apps.yarki.net/imagetank/" +
                      groups[i].getAttribute("location"),
             caption: groups[i].getAttribute("name")
           });
    var callback = createCallback(requestImageSet, groups[i].getAttribute("tags"), groups[i].getAttribute("name"));
    fisheye.addChild(child);
    dojo.event.connect(child, "onClick", callback);
  }
}

function createCallback(func, param){
  return function(evt) { func(param); };
}

function createCallback(func, p1, p2){
  return function(evt) { func(p1, p2); };
}


function requestImageSet(tags, title){
  var p;
  var b;

  showLoading();

  deleteChildren(mainBody);

  p = document.createElement('p');
  p.className = "galleryTitle";
  b = document.createElement('b');
  b.appendChild(document.createTextNode("Gallery: "));
  p.appendChild(b);
  p.appendChild(document.createTextNode(title));
  mainBody.appendChild(p);

  dojo.io.bind({
    url: "/ajax/ImagesForTag.jsp?type=THUMB&tag=" + tags,
    load: function(type, data, event, kwArgs){showImageSet(data);},
    timeoutSeconds: 10,
    mimetype: "application/xml"
  });
}

function showImageSet(xmldoc){
  var mainBody = dojo.byId("mainBody");
  var images = xmldoc.getElementsByTagName("Image");

  for(var i=0; i<images.length; i++){
    var iixml = images[i].getElementsByTagName("ImageInstance");
    if(iixml.length == 1){
      var icon = document.createElement('img');
      icon.src = "http://apps.yarki.net/imagetank/" +
                 iixml[0].getAttribute("location");

      icon.className = "thumbnail";
      mainBody.appendChild(icon);
      mainBody.appendChild(document.createTextNode(" "));
      dojo.event.connect(icon, "onclick", createCallback(requestImage,
images[i].getAttribute("id")));
    }
  }

  hideLoading();
}

function requestImage(id){
  showLoading();
  hidePhotoFrame();

  dojo.io.bind({
    url: "/ajax/Image.jsp?id=" + id + "&type=NORMAL&maxEdge=640",
    load: function(type, data, event, kwArgs){showImage(data);},
    timeoutSeconds: 10,
    mimetype: "application/xml"
  });
}

function showImage(xmldoc){
  var photo  = dojo.byId("photo");
  var photoTitle = dojo.byId("photoTitle");
  var images = xmldoc.getElementsByTagName("Image");
  var instance = images[0].getElementsByTagName("ImageInstance");
  deleteChildren(photoTitle);
  photoTitle.appendChild(document.createTextNode(images[0].getAttribute("title")));

  var width = parseInt(instance[0].getAttribute("width"));
  var height = parseInt(instance[0].getAttribute("height"));
  
  photo.width = width;
  photo.height = height;
  photo.src = "http://apps.yarki.net/imagetank/" + 
    instance[0].getAttribute("location");

  var frame = document.getElementById("photoFrame");
  
  var totalWidth = width + 60 + 40; // width + border + frame
  var totalHeight = height + 60 + 80; // width + border + frame

  var topEdge = (600 - totalHeight) / 2;
  if(topEdge < 10) topEdge = 10;
  var leftEdge = (750 - totalWidth) / 2;
  if(leftEdge < 10) leftEdge = 10;

  frame.style.width  = totalWidth;
  frame.style.height = totalHeight;
  
  photo.style.top = topEdge + 30;
  photo.style.left = leftEdge + 30;
  frame.style.top = topEdge;
  frame.style.left = leftEdge;

  photo.style.borderColor = images[0].getAttribute("bgcol");
}

function showLoading(){
  document.getElementById("loading").style.display = "block";
}
function hideLoading(){
  document.getElementById("loading").style.display = "none";
}

function showPhotoFrame(){
  hideLoading();

  var frame = document.getElementById("photoFrame");
  frame.style.display = "block";
  var photo = document.getElementById("photo");
  photo.style.display = "block";

}

function hidePhotoFrame(){
  document.getElementById("photoFrame").style.display = "none";
  document.getElementById("photo").style.display = "none";
}

function deleteChildren(node) {
  while(node.hasChildNodes()){
    var child = node.firstChild;
    dojo.dom.removeNode(child);
    dojo.dom.destroyNode(child);
  }
}