/*
 *  facebook.show($(id))
 */

  facetip = function(data) {
    facetip.init()
    facetip.loading();
    (typeof data == "function") ? data.call() : facetip.reveal(data)
  }

  facetip.settings = {
    loading_image : '/images/facebox/loading.gif',
    close_image   : '/images/facebox/closetip.gif',
    image_types   : [ 'png', 'jpg', 'jpeg', 'gif' ],
    facetip_html  : '\
  <div id="facetip" style="display:none;"> \
    <div class="popup"> \
      <table border="0" cellpadding="0" cellspacing="0" id="facetable"> \
        <tbody> \
          <tr class="middle"> \
            <td class="body" id="facetip-body"> \
              <div class="content" id="facetip-content"> \
              </div> \
			  <div id="float-tip" class="tip-tl">&nbsp;</div>\
			  <div class="float-close"> \
		        <a href="#" class="close" id="facetip-close"> \
		          <img src="" title="close" class="close_image" id="facetip-close_image" /> \
		        </a> \
		      </div> \
            </td> \
          </tr> \
        </tbody> \
      </table> \
    </div> \
  </div>'
  }
 
  facetip.loading = function(e) {

    if ($('facetip-loading')) return true

  	$('facetip-content').innerHTML = '<div class="loading" id="facetip-loading"><img src="'+facetip.settings.loading_image+'"/></div>';

	var element = Event.element(e);
	var elementSize = element.getDimensions();
	var elementPos = Position.cumulativeOffset(element);
	this.elementSize = elementSize;
	this.elementPos = elementPos;

	$('facetip').setStyle({
      'top':	elementPos[1] + this.elementSize.height + 'px',
      'left':	elementPos[0] + 'px'
    }).hide()

    $(document).observe('keypress', function(e) {
      if (e.keyCode == 27) facetip.close()
    })
  }

  facetip.reveal = function(data, klass) {
    //if (klass) $('facetip-content').addClass(klass)
	if (typeof data == 'string') {
	    $('facetip-content').innerHTML = data
	} else {
		$('facetip-content').innerHTML = "";
		$('facetip-content').appendChild(data)
	}
    //$('facetip-loading').remove()
    //$('facetip-body').children().fadeIn('normal')

	$('facetip').setStyle({
		 'visibility' : 'hidden',
     'top':	0 + 'px',
     'left':	0 + 'px'
  }).show()


	var elementPos = this.elementPos;
	var elementSize = this.elementSize;
	var containerSize = $('facetip').getDimensions();
  var pageScroll = facetip.getPageScroll();

	var most_left = elementPos[0] + Math.floor(elementSize.width/2) - containerSize.width;
	var most_right = elementPos[0] + Math.floor(containerSize.width/2);

	var most_top = elementPos[1] + elementSize.height - containerSize.height - 35;
	var most_bottom = elementPos[1] + containerSize.height + 35;

	// console.log(elementPos[0] + " " + elementSize.width + " " + containerSize.width);
	$('facetip').hide();
	
	var anchor = '';
	if (most_left < pageScroll[0] + 5) {
		// tip on the right
		var left = most_right - containerSize.width;
		anchor = anchor + 'l';
	} else {
		// tip on the left
		var left = most_left; 
		anchor = anchor + 'r';
	}

	if (most_top < pageScroll[1] + 5) {
		// tip below the element
		var top = most_bottom - containerSize.height;
		anchor = 't' + anchor;
	} else {
		// tip on the top of element
		var top = most_top; 
		anchor = 'b' + anchor;
	}
	
	$('float-tip').className = 'tip-'+anchor;
  $('facetip').setStyle({
		'visibility' : 'visible',
    'top':	top + 'px',
    'left':	left + 'px'
  }).show()

  }

  facetip.close = function(e) {

    $(document).stopObserving('keypress')
	//$('#facetip').fadeOut(function() {

      $('facetip-content').className = "";
	  $('facetip-content').addClassName('content')
	  $('facetip').hide();

    //})

	try{
	Event.stop(e)
	} catch(e) {}
    return false
  }

	facetip.showConfirm = function (element, func) {
		
		element = $(element);
		if (element.tagName.toLowerCase() == 'a' && element.hasClassName('lite-confirm')) {
			var classNames = element.className.split(' ');
			var len = classNames.length;
			for (var i = 0; i < len; i++) {
				if (classNames[i].match(/^lite-confirm-message-.*$/)) {
					var target_id = classNames[i];

					var target = $(target_id);
					var klass = 'string';
					if (target) {

							facetip.init()

				    	facetip.loading({ target : element, srcElement : element })
							var content = target.innerHTML;


							if (func == undefined) {
								func = function () {
									var dest = this.href;
									dest = dest + (dest.indexOf('?') < 0 ? '?confirm=true' : '&confirm=true');
									window.location = dest;
									return false;
								}
							}
							func = func.bind(element);
							var liteboxfunc = function () {
								var dest = element.href;
								var confirmed_dest = dest + (dest.indexOf('?') < 0 ? '?confirm=true' : '&confirm=true');
								element.href = confirmed_dest;
								func();
								element.href = dest;
								return false;
							}
							
							content += '<div class="litebox-confirm" style="text-align : center; padding : 10px ">'+
												 '<a href="#" onclick="return false" id="litebox-confirm-button" class="yesno" style="margin-right : 10px"><strong>Yes</strong></a>'+
												 '<a href="#" onclick="facetip.close(); return false;" class="yesno no"><strong>No</strong></a>'+
												'</div>';
							facetip.reveal(content, klass)
							$('litebox-confirm-button').onclick = liteboxfunc;
					}

					break;
				}
			}
		}
		
		
	}
	
  facetip.show = function(e) {
	
	var that = Event.element(e);
	
    facetip.init()

    var image_types = facetip.settings.image_types.join('|')
    image_types = new RegExp('\.' + image_types + '$', 'i')

    facetip.loading(e)

      // support for rel="facetip[.inline_popup]" syntax, to add a class
      var klass = that.rel.match(/facetip\[\.(\w+)\]/)
      if (klass) klass = klass[1]

      // div
      if (that.href.match(/#/)) {
        var target = $(that.href.split('#')[1]);
		if (target) {
        	facetip.reveal(target.cloneNode(true).show(), klass)
		}
      // image
      } else if (that.href.match(image_types)) {
        var image = new Image()
        image.onload = function() {
          facetip.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
        }
        image.src = that.href

      // ajax
      } else {
        new Ajax.Request(that.href, {onComplete : function(data) { facetip.reveal(data.responseText, klass) }})
      }

    Event.stop(e) 
	return false
	
  }

  facetip.showMessage = function (element, msg) {
		facetip.init();
		facetip.loading({ target : element, srcElement : element });
		facetip.reveal(msg);		
	}

  facetip.init = function() {
    if (facetip.settings.inited) {
      return true
    } else {
      facetip.settings.inited = true
    }

    var div = document.createElement('div');
	document.body.appendChild(div);
	div.innerHTML = facetip.settings.facetip_html

    var preload = [ new Image(), new Image() ]
    preload[0].src = facetip.settings.close_image
    preload[1].src = facetip.settings.loading_image

    $('facetip-close').observe('click', facetip.close)
    $('facetip-close_image').src = facetip.settings.close_image

  }

  // getPageScroll() by quirksmode.com
  facetip.getPageScroll = function() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
      yScroll = self.pageYOffset;
      xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {	 // Explorer 6 Strict
      yScroll = document.documentElement.scrollTop;
      xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
      yScroll = document.body.scrollTop;
      xScroll = document.body.scrollLeft;	
    }
    return new Array(xScroll,yScroll) 
  }

  // adapter from getPageSize() by quirksmode.com
  facetip.getPageHeight = function() {
    var windowHeight
    if (self.innerHeight) {	// all except Explorer
      windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
      windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
      windowHeight = document.body.clientHeight;
    }	
    return windowHeight
  }
