<!--

/**
 * Magic Info (magicinfo.js)
 * Copyright (c) 2009-2010 Jack Szwergold. All rights reserved.
 *
 * w: http://www.runwork.com
 * e: me@runwork.com
 *
 * Created: 2009-03-02
 * Version: 2010-02-22
 *
 */

  Event.observe(window, 'load', function () {
    var magic = new magicInfoBoxes();
  });

  var magicInfoBoxes = Class.create();

  magicInfoBoxes.prototype = {

    initialize: function(magicParams) {
      var params = typeof(magicParams) != 'undefined' ? magicParams.evalJSON() : "{ 'null' : 'void' }";
      // this.wrapType = typeof(params.wrapType) != 'undefined' ? params.wrapType : 'div';
      this.wrapPrefix = typeof(params.wrapPrefix) != 'undefined' ? params.wrapPrefix : 'outer';
      this.infoType = typeof(params.infoType) != 'undefined' ? params.infoType : 'div';
      this.infoPrefix = typeof(params.infoPrefix) != 'undefined' ? params.infoPrefix : 'info';
      this.setBucket = typeof(params.setBucket) != 'undefined' ? params.setBucket : 'Bucket';

      // Set these so Internet Explorer doesn't explode calling them.
      // this.wrapItems = $$(this.wrapType + '[id^="' + this.wrapPrefix + '"]');
      this.infoItems = $$(this.infoType + '[id^="' + this.infoPrefix + '"]');

      // if (this.wrapItems.length > 0 || this.infoItems.length > 0) {
      if (this.infoItems.length > 0) {
        // Sets a container that will catch the info boxes.
        // this.magicbucket();
        this.bucket = ($(this.setBucket) != null) ? $(this.setBucket) : $$('body')[0];

        magicInfo = this.show.bind(this);

        // Watches the mouse movement.
        this.mousewatcher = this.mousemove.bindAsEventListener(this);
        // Event.observe(document, 'mousemove', this.mousewatcher);
        Event.observe(document, 'mouseover', this.mousewatcher);

        // This makes sure any open info boxes get posistioned correctly on window resize.
        this.windowwatcher = this.positioninfo.bindAsEventListener(this);
        Event.observe(window, 'resize', this.windowwatcher);
      }
    },

    destroy: function() {
      // Event.stopObserving(document, 'mousemove', this.mousewatcher);
      Event.stopObserving(document, 'mouseover', this.mousewatcher);
      Event.stopObserving(window, 'resize', this.positioninfo);
    },

    // Coding for fading the elements.
    mousemove: function(e) {
      var m = e.element();
      if (typeof(this.wrap) != 'undefined' && typeof(this.info) != 'undefined') {
        var parent = this;
        $(this.info).observe('mouseleave', function() { parent.hide(); });
        $(this.wrap).observe('mouseleave', function() { parent.hide(); });
        if (m.identify() == this.info || m.descendantOf(this.info) == true) {
          clearTimeout(this.timeout);
        }
      }
    },

    // Coding for fading the elements.
    mousemoveOLD: function(e) {
      var m = e.element();
      if (typeof(this.wrap) != 'undefined' && typeof(this.info) != 'undefined') {
        if (m.identify() != this.wrap && m.descendantOf(this.wrap) == false &&
            m.identify() != this.info && m.descendantOf(this.info) == false) {
          this.hide();
        }
        else if (m.identify() == this.info || m.descendantOf(this.info) == true) {
          clearTimeout(this.timeout);
        }
      }
    },

    // Coding for fading the elements.
    show: function(info, paramsRAW) {
      this.info = typeof(info) != 'undefined' ? info : '';
      this.wrap = typeof(this.info) != 'undefined' ? this.wrapPrefix + this.info.substr(this.infoPrefix.length) : '';

      var params = typeof(paramsRAW) != 'undefined' ? Object.toJSON(paramsRAW).evalJSON() : "{ 'null' : 'void' }";
      this.duration = typeof(params.duration) != 'undefined' ? params.duration : 0;
      this.showDelay = typeof(params.showDelay) != 'undefined' ? params.showDelay : 0;
      this.hideDelay = typeof(params.hideDelay) != 'undefined' ? params.hideDelay : 0;

      // This sets the basic positioning.
      this.outerBase = typeof(params.outerBase) != 'undefined' ? params.outerBase : 'topleft';
      this.infoBase = typeof(params.infoBase) != 'undefined' ? params.infoBase : 'topleft';

      // This sets the offset positioning.
      this.offsetTop = typeof(params.offsetTop) != 'undefined' ? params.offsetTop : 0;
      this.offsetLeft = typeof(params.offsetLeft) != 'undefined' ? params.offsetLeft : 0;
      this.offsetBottom = typeof(params.offsetBottom) != 'undefined' ? params.offsetBottom : 0;
      this.offsetRight = typeof(params.offsetRight) != 'undefined' ? params.offsetRight : 0;

      // This sets the opacity
      this.opacity = typeof(params.opacity) != 'undefined' ? params.opacity : '1.0';

	  var parent = this;
	  if (typeof($(this.info)) == 'object' && $(this.info).getStyle('display') == 'none') {
        var limbo = Element.remove(this.info);
        new Element.insert(this.bucket, limbo);
        if (Prototype.Browser.IE) { // This is for good old IE8.
          setTimeout( function() { parent.positioninfo(); }, 350);
        }
        else { // For the rest of the world.
          this.positioninfo();
        }
        this.hideothers();
        if (this.showDelay > 0) {
	      this.timeout = setTimeout( function() {
	        new Effect.Appear(parent.info, { 'duration' : parent.duration, 'to' : parent.opacity } );
	      }, this.showDelay);
	    }
	    else {
	      new Effect.Appear(parent.info, { 'duration' : parent.duration, 'to' : parent.opacity } );
	    }
	  }
	  else {
	    this.hide();
	  }
    },

    hide: function() {
      if (this.hideDelay > 0) {
        var parent = this;
        clearTimeout(this.timeout);
        this.timeout = setTimeout( function() {
          new Effect.Fade(parent.info, { 'duration' : parent.duration/2, 'from' : parent.opacity } );
        }, this.hideDelay);
      }
      else {
        new Effect.Fade(this.info, { 'duration' : this.duration/2, 'from' : this.opacity } );
      }
    },

    // This hides all other boxes that are opened.
    hideothers: function() {
      if (this.hideDelay > 0) {
        var parent = this;
        this.infoItems.without(this.info).each( function(e) {
          clearTimeout(parent.timeout);
          new Effect.Fade(e, { 'duration' : parent.duration/2 } );
        });
      }
      else {
        clearTimeout(this.timeout);
        this.infoItems.without(this.info).invoke('hide');
      }
    },

    positioninfo: function() {
      if(typeof($(this.info)) != 'undefined') {
        switch(this.outerBase) {
	      case 'topleft':
	        switch(this.infoBase) {
	          case 'topleft':
	          var offsetTop = this.offsetTop;
	          var offsetLeft = this.offsetLeft;
	            break;
	          case 'topright':
	          var offsetTop = this.offsetTop;
	          var offsetLeft = -($(this.info).getWidth()+this.offsetLeft);
	            break;
	          case 'bottomleft':
	            var offsetTop = this.offsetBottom-$(this.info).getHeight();
	            var offsetLeft = this.offsetLeft;
	            break;
	          case 'bottomright':
	            var offsetTop = this.offsetBottom-$(this.info).getHeight();
	            var offsetLeft = -($(this.info).getWidth()+this.offsetLeft);
	            break;
	          default:
	            var offsetTop = this.offsetTop;
	            var offsetLeft = this.offsetLeft;
	            break;
	        }
	        break;
	      case 'topright':
	        switch(this.infoBase) {
	          case 'topleft':
	            var offsetTop = this.offsetTop;
	            var offsetLeft = $(this.wrap).getWidth()+this.offsetRight;
	            break;
	          case 'topright':
	            var offsetTop = this.offsetTop;
	            var offsetLeft = ($(this.wrap).getWidth()+this.offsetRight)-$(this.info).getWidth();
	            break;
	          case 'bottomleft':
	            var offsetTop = this.offsetBottom-$(this.info).getHeight();
	            var offsetLeft = this.offsetLeft+$(this.wrap).getWidth();
	            break;
	          case 'bottomright':
	            var offsetTop = this.offsetBottom-$(this.info).getHeight();
	            var offsetLeft = ($(this.wrap).getWidth()+this.offsetRight)-$(this.info).getWidth();
	            break;
	          default:
	            var offsetTop = this.offsetTop;
	            var offsetLeft = this.offsetLeft;
	            break;
	        }
	        break;
	      case 'bottomleft':
	        switch(this.infoBase) {
	          case 'topleft':
	            var offsetTop = $(this.wrap).getHeight()+this.offsetBottom;
	            var offsetLeft = this.offsetRight;
	            break;
	          case 'topright':
	            var offsetTop = $(this.wrap).getHeight()+this.offsetBottom;
	            var offsetLeft = -($(this.info).getWidth()+this.offsetRight);
	            break;
	          case 'bottomleft':
	            var offsetTop = $(this.wrap).getHeight()+this.offsetBottom-$(this.info).getHeight();
	            var offsetLeft = this.offsetLeft;
	            break;
	          case 'bottomright':
	            var offsetTop = $(this.wrap).getHeight()+this.offsetBottom-$(this.info).getHeight();
	            var offsetLeft = -($(this.info).getWidth()+this.offsetRight);
	            break;
	          default:
	            var offsetTop = this.offsetTop;
	            var offsetLeft = this.offsetLeft;
	            break;
	        }
	        break;
	      case 'bottomright':
	        switch(this.infoBase) {
	          case 'topleft':
	            var offsetTop = $(this.wrap).getHeight()+this.offsetBottom;
	            var offsetLeft = $(this.wrap).getWidth()+this.offsetRight;
	            break;
	          case 'topright':
	            var offsetTop = $(this.wrap).getHeight()+this.offsetBottom;
	            var offsetLeft = ($(this.wrap).getWidth()+this.offsetRight)-$(this.info).getWidth();
	            break;
	          case 'bottomleft':
	            var offsetTop = $(this.wrap).getHeight()+this.offsetBottom-$(this.info).getHeight();
	            var offsetLeft = $(this.wrap).getWidth()+this.offsetRight;
	            break;
	          case 'bottomright':
	            var offsetTop = $(this.wrap).getHeight()+this.offsetBottom-$(this.info).getHeight();
	            var offsetLeft = ($(this.wrap).getWidth()+this.offsetRight)-$(this.info).getWidth();
	            break;
	          default:
	            var offsetTop = this.offsetTop;
	            var offsetLeft = this.offsetLeft;
	            break;
	        }
	        break;
	      default:
	        var offsetTop = this.offsetTop;
	        var offsetLeft = this.offsetLeft;
	        break;
        }
        return $(this.info).clonePosition($(this.wrap), { 'setWidth': false, 'setHeight': false, 'offsetTop': offsetTop, 'offsetLeft': offsetLeft } );
      }
    },

    // create the magic bucket
    magicbucket: function () {
      if ($(this.setBucket) == null) {
        var element = new Element('span', { 'id': this.setBucket }).setStyle({ 'position': 'absolute', 'left': '0', 'bottom': '0' });
	    Element.insert($$('body')[0], { bottom: element } );
      }
    }

  }

// -->