/*
 * Global utilities
 */
 
function getFragmentHeaders(fragmentId) {
  var headerClass = ".fragment-header";
  if (fragmentId != null) headerClass = headerClass + "-" + fragmentId;
  return jQuery(headerClass);
}


/* 
 *  Facebox based on facebox (http://famspam.com/facebox)
 */
function Facebox(id) {
  this.id = id;
  this.widget = jQuery('\
<div id="' + this.id + '" class="facebox"> \
  <div class="popup"> \
    <table> \
      <tbody> \
        <tr> \
          <td class="tl"/><td class="b"/><td class="tr"/> \
        </tr> \
        <tr> \
          <td class="b"/> \
          <td class="body"> \
           <div class="header"> \
             <a href="#" class="close"> \
             <img src="images/large-delete.gif" title="close" class="close_image" alt="X"/></a> \
           </div> \
           <div class="content"></div> \
          </td> \
          <td class="b"/> \
        </tr> \
        <tr> \
          <td class="bl"/><td class="b"/><td class="br"/> \
        </tr> \
      </tbody> \
    </table> \
  </div> \
</div>');
  this.body = this.widget.find('.body');
  this.content = this.widget.find('.content');
}
Facebox.prototype = {
  show: function(url) {
    this.init();  
    this.loading();
    
    var facebox = this;
    jQuery.get(url, function(data) { 
	    facebox.reveal(data);
	  });
  },
  
  showImage: function(url) {
    this.init();  
    this.loading();
   
    var maxWidth = jQuery(window).width() - 80;
    var maxHeight = jQuery(window).height() - 120;
    var image = new Image();
    var facebox = this;
    image.onload = function() {
      facebox.reveal('<div class="image"><img src="' + image.src + '" /></div>');
      var width = image.width < maxWidth ? image.width : maxWidth;
      var height = image.height < maxHeight ? image.height : maxHeight;
      if (width < maxWidth && height == maxHeight) width = Math.min(width + 15, maxWidth);
      if (height < maxHeight && width == maxWidth) height = Math.min(height + 15, maxHeight);
      facebox.content.css({
	      'width':  width,
	      'height': height
	    });   
    };
    image.src = url;
  },
  
  init: function() {
    jQuery('#' + this.id).remove();
    this.content.empty();
    this.widget.find(".close").click(this.onCloseClick);
    this.widget.appendTo(jQuery('body'));
  },
  
  loading: function () {
	  if (this.widget.find('.loading').length == 1) return true;

	  this.body.children().hide().end().
	      append('<div class="loading"><img src="images/load.gif"/></div>'); 
	  this.widget.show();
	},
	
	reveal: function (data) {
    this.content.append(data);
    this.widget.find('.loading').remove();
    this.body.children().fadeIn('normal');
	},

  onCloseClick: function () {
    var widget = jQuery(this).closest(".facebox");
	  widget.fadeOut(function() {
	    widget.find('.loading').remove();
	  });
	  return false;
	}
};


/* 
 *  Selected Fragments
 */
function SelectedFragments(
   id, 
   fragmentUrlPrefix, 
   clearConfirmMessage,
   callback_add,
   callback_remove,
   callback_clear) {
   
  this.widget = jQuery('#' + id);
  this.content = this.widget.find(".content");
  this.ul = this.content.children("ul");
  if (this.ul.size() == 0) this.ul = jQuery('<ul>').appendTo(this.content);
  this.fragmentUrlPrefix = fragmentUrlPrefix;
  this.clearConfirmMessage = clearConfirmMessage;
  this.callback_add = callback_add;
  this.callback_remove = callback_remove;
  this.callback_clear = callback_clear;
  this.update();
}
SelectedFragments.prototype = {
  CLASS_FRAGMENT_SELECTED: "selected-fragment",
  
  size: function() {
    return this.widget.find(".content li").size();
  },
  
  add: function(id, title) {
    this.callback_add(id);
  
    // Fragment headers
    var headers = getFragmentHeaders(id);
    var allCheckboxes = headers.find("input.fragment-checkbox");
    headers.addClass(this.CLASS_FRAGMENT_SELECTED);
    allCheckboxes.attr("checked", "checked");
  
    // Selection widget
    var urlPrefix = this.fragmentUrlPrefix;
    var li = jQuery('<li id="selected-fragment-' + id + '">').prependTo(this.ul);
    li.html(jQuery("#tpl-selected-fragment-entry").html());
	  var directive = { 
      'a.fragment-link' : function(arg) {
	      return '#' + arg.context.id;
	    },
      'a.fragment-link[href]' : function(arg) {
        return urlPrefix + arg.context.id;
      },
      'a.remove[onclick]' : function(arg) {
        return "selectedFragments.remove('" + arg.context.id + "'); return false;";
      }
    };
    li.autoRender({"id": id, "title": escapeHtml(title)}, directive);
    this.update();
  },
  
  remove: function(id) {
    this.callback_remove(id);
  
    // Fragment headers
    var headers = getFragmentHeaders(id);
    var allCheckboxes = headers.find("input.fragment-checkbox");
    headers.removeClass(this.CLASS_FRAGMENT_SELECTED);
    allCheckboxes.removeAttr("checked");
  
    // Selection widget
    jQuery('#selected-fragment-' + id).remove();
    this.update();
  },
  
  clear: function() {
    if (!window.confirm(this.clearConfirmMessage)) return false;
        
    this.callback_clear();
        
    // Fragment headers
    var headers = getFragmentHeaders(null);
    var allCheckboxes = headers.find("input.fragment-checkbox");
    headers.removeClass(this.CLASS_FRAGMENT_SELECTED);
    allCheckboxes.removeAttr("checked");
    
    // Selection widget
    this.ul.empty();
    this.update();
  },
  
  update: function() {
    if (this.size() > 0) {
      this.widget.show();
    }
    else {
      this.widget.fadeOut();
    }
  }
};


function ShowHideToggle(id, target, putState) {
  this.id = id;
  this.target = target;
  this.putState = putState;
  
  this.widget = jQuery('#' + id);
  this.icon = this.widget.children("img");
   
  var outer = this;
  this.widget.click(function() {
    outer.onToggleClick();
    return false;
  });
}
ShowHideToggle.prototype = {
  SHOW: "down",
  HIDE: "up",
  
  onToggleClick: function() {
    var iconSrc = this.icon.attr("src");
    if (iconSrc.indexOf(this.SHOW) != -1) {
      this.icon.attr("src", iconSrc.replace(this.SHOW, this.HIDE));
      this.target.show("fast");
      this.putState(this.id, "shown");
    }
    else if (iconSrc.indexOf(this.HIDE) != -1) {
      this.target.hide("fast");
      this.icon.attr("src", iconSrc.replace(this.HIDE, this.SHOW));
      this.putState(this.id, "hidden");
    }
  }
};