function check_size(main_image){
    var max = 500;
    var width = $("#img_"+main_image).width();
    var height = $("#img_"+main_image).height();
    if (width > max) {
        var ratio = (height / width );
	      var new_width = max;
	      var new_height = (new_width * ratio);
	      $("#img_"+main_image).height(new_height).width(new_width);
    }
}

clickMenu = function(menu, main_image) {
  // find the main image input field & therefore the currently selected id
  var input = document.getElementById(main_image);
  var selected_id = '';

  if (input != undefined) {
    selected_id = input.value;
  }
  var selected_index = 0;
  var div_menu = document.getElementById(menu);
  if (div_menu != undefined) {
    var l = div_menu.getElementsByTagName("LI");
    for (var i=0; i<l.length; i++) {
      // see whether the image id matches the currently-selected one
      var img = l[i].getElementsByTagName('img')[0];
      if (img==undefined){
            var img = l[i].getElementsByTagName('canvas')[0]  
      } 

      if (img.id == selected_id) {
        selected_index = i;
      }

      l[i].onclick=function() {
        // update the interface by setting the CSS class name on just this element
        var m = document.getElementById(menu).getElementsByTagName("LI");

        for (var x=0; x<m.length; x++) {
          m[x].className = m[x].className.replace("click", "");
        }
        this.className += " click";
        
        // XXX With the rotation,we might have a canvas instead of an image 
        var img = this.getElementsByTagName('img')[0]
        if (img==undefined){
            var img = this.getElementsByTagName('canvas')[0].oImage  
            var new_id = this.getElementsByTagName('canvas')[0].id;
        }
        else {
            var new_id = img.id;
        }
        var sel = document.getElementById("img_"+main_image);
        // Need to check if we got an img or a canvas.
        if (sel.tagName=='IMG'){
            sel.src = img.src;
        }
        else {
            sel.oImage.src = img.src;           
        } 

        // Change the onclick event as well..
        sel.onclick = function () {
            window.open(img.src)
        } 
        var sel_cap = document.getElementById("div_"+main_image);
        
        sel_cap.innerHTML = img.alt

        // update the hidden form element if it exists
        var input = document.getElementById(main_image);
        if (input != undefined && arguments[0]!=true) {
          // quick way to change....
          var old_id = input.value;
          input.value = new_id;
          trigger_event();
        }

        // check size of img;
        check_size(main_image); 

        // check if we might have a rotate button
        var input = document.getElementById('rotate_left');
        if (input != undefined && main_image=='post_main_image'){
            // check the buttons.
            toggle_rotate(main_image);

            // CHECK THE ANGLE
            check_canvas_angle("img_"+main_image, old_id, new_id);
        }
      }
    }

    // Trigger for the first image
    if (l.length>=1){
      l[selected_index].onclick(true)
    }
  }
}