/**
 ** More info at http://www.opentip.org
 **
 ** Copyright (c) 2009, Matthias Loitsch
 ** Graphics by Tjandra Mayerhold
 ** This is an upcoda project: http://www.upcoda.com
 **
 ** Permission is hereby granted, free of charge, to any person obtaining a copy
 ** of this software and associated documentation files (the "Software"), to deal
 ** in the Software without restriction, including without limitation the rights
 ** to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 ** copies of the Software, and to permit persons to whom the Software is
 ** furnished to do so, subject to the following conditions:
 **
 ** The above copyright notice and this permission notice shall be included in
 ** all copies or substantial portions of the Software.
 **
 ** THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 ** IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 ** FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 ** AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 ** LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 ** OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 ** THE SOFTWARE.
 **
 **/


/**
 ** Usage:
 **
 ** <div onmouseover="javascript:Tips.add(this, event, 'Content', { options });"></div>
 **
 ** or externally:
 **
 ** $('elementId').addTip('Content', { options });
 **
 ** For a full documentation, please visit http://www.opentip.org/#documentation
 **/


var Opentip = {

    Version: '1.2.5',
    REQUIRED_PROTOTYPE_VERSION: '1.6.0',
    REQUIRED_SCRIPTACULOUS_VERSION: '1.8.0',
    cached: {},
    debugging: false,
    load: function() {
        function getComparableVersion(version) { var v = version.split('.'); return parseInt(v[0])*100000 + parseInt(v[1])*1000 + parseInt(v[2]); }
        if((typeof Prototype === 'undefined') || (typeof Element === 'undefined') || (typeof Element.Methods === 'undefined') || (getComparableVersion(Prototype.Version) < getComparableVersion(Opentip.REQUIRED_PROTOTYPE_VERSION))) { throw("Opentip requires the Prototype JavaScript framework >= " + Opentip.REQUIRED_PROTOTYPE_VERSION); }
        if((typeof Scriptaculous === 'undefined') || (typeof Effect === 'undefined') || (getComparableVersion(Scriptaculous.Version) < getComparableVersion(Opentip.REQUIRED_SCRIPTACULOUS_VERSION))) { throw("Opentip requires the Scriptaculous JavaScript framework >= " + Opentip.REQUIRED_SCRIPTACULOUS_VERSION); }
    },
    debug: function() { if (this.debugging && typeof console !== 'undefined' && typeof console.debug !== 'undefined') console.debug.apply(console, arguments); },
    IEVersion: function() {
        if (typeof Opentip.cached.IEVersion !== 'undefined') return Opentip.cached.IEVersion;
        if (Prototype.Browser.IE) {
            var version = navigator.userAgent.match('MSIE ([\\d.]+)');
            var IEVersion = version ? (parseFloat(version[1])) : false;
        }
        else IEVersion = false;
        Opentip.cached.IEVersion = IEVersion;
        return IEVersion;
    },
    objectIsEvent: function(obj) {
        // There must be a better way of doing this.
        return (typeof(obj) == 'object' && obj.type && obj.screenX);
    },
    useIFrame: function() { return Opentip.IEVersion() ? (Opentip.IEVersion() <= 6) : false; },
    lastTipId: 1,
    lastZIndex: 100,
    documentIsLoaded: false,
    postponeCreation: function(createFunction) {
        if (Opentip.documentIsLoaded || !Opentip.IEVersion) createFunction();
        else {
            Event.observe(window, 'load', createFunction); // Sorry IE users but... well: get another browser!
        }
    }
};
Opentip.load();

Event.observe(window, Opentip.IEVersion ? 'load' : 'dom:loaded', function() { Opentip.documentIsLoaded = true; });

Opentip.styles = {
    standard: {
        // This style contains all default values for other styles.
        // POSITION : [ 'left|right|center', 'top|bottom|middle' ]
        // COORDINATE : [ XVALUE, YVALUE ] (integers)
        className: 'standard', // The class name to be used in the stylesheet
        stem: false, // false (no stem)   ||   true (stem at tipJoint position)   ||   POSITION (for stems in other directions)
        delay: null, // float (in seconds - if null, the default is used: 0.2 for mouseover, 0 for click)
        hideDelay: 0.1, // --
        fixed: false, // If target is not null, elements are always fixed.
        showOn: 'mouseover', // string (the observe string of the trigger element, eg: click, mouseover, etc..)   ||   'creation' (the tooltip will show when being created)   ||   null if you want to handle it yourself.
        hideTrigger: 'trigger', // 'trigger' | 'tip' | 'target' | 'closeButton' | ELEMENT | ELEMENT_ID
        hideOn: null, // string (event eg: click)   ||   null (let Opentip decide)
        offset: [ 0, 0 ], // COORDINATE
        containInViewport: true, // Whether the targetJoint/tipJoint should be changed if the tooltip is not in the viewport anymore.
        autoOffset: true, // If set to true, offsets are calculated automatically to position the tooltip. (pixels are added if there are stems for example)
        showEffect: 'appear', // scriptaculous effect
        hideEffect: 'fade',
        showEffectDuration: 0.3,
        hideEffectDuration: 0.2,
        stemSize: 8, // integer
        tipJoint: [ 'left', 'top' ], // POSITION
        target: null, // null (no target, opentip uses mouse as target)   ||   true (target is the triggerElement)   ||   elementId|element (for another element)
        targetJoint: null, // POSITION (Ignored if target == null)   ||   null (targetJoint is the opposite of tipJoint)
        ajax: false, // Ajax options. eg: { url: 'yourUrl.html', options: { ajaxOptions... } } or { options: { ajaxOptions } /* This will use the href of the A element the tooltip is attached to */ }
        group: null // You can group opentips together. So when a tooltip shows, it looks if there are others in the same group, and hides them.
    },
    slick: {
        className: 'slick',
        stem: true
    },
    rounded: {
        className: 'rounded',
        stem: true
    },
    glass: {
        className: 'glass'
    }
};
Opentip.defaultStyle = 'standard'; // Change this to the style name you want your tooltips to have.



var Tips = {
    list: [],
    append: function(tip) { this.list.push(tip); },
    remove: function(element) {
        if (!element.element) var tip = this.list.find(function(t) { return t.triggerElement === element });
        else var tip = this.list.find(function(t) { return t === element });
        if (tip) {
            tip.deactivate();
            tip.destroyAllElements();
            this.list = this.list.without(tip);
        }
    },
    add: function(element, evt) {
        if (element._opentipAddedTips) {
            /* TODO: Now it just returns the first found... try to find the correct one. */
            var tip = this.list.find(function(t) { return (t.triggerElement === element); });
            if (tip.options.showOn == 'creation') tip.show();
            Opentip.debug('Using an existing opentip');
            return;
        } else setTimeout(function() { element._opentipAddedTips = true; }, 1); // I added a timeout, so that tooltips, defined in an onmouseover or onclick event, will show.

        Opentip.debug('Creating new opentip');

        var tipArguments = [];

        $A(arguments).each(function(arg, idx) {
            if (idx == 1 && !Opentip.objectIsEvent(arg)) tipArguments.push(null);
            tipArguments.push(arg);
        });

        var self = this;
        var createTip = function() { self.append(new TipClass(tipArguments[0], tipArguments[1], tipArguments[2], tipArguments[3], tipArguments[4])); }

        Opentip.postponeCreation(createTip);
        
        return;
    },
    hideGroup: function(groupName) {
      this.list.findAll(function(t) { return (t.options.group == groupName); }).invoke('doHide');
    }
};

var Tip = function() { Tips.add.apply(Tips, arguments); return; };

Element.addMethods({
    addTip: function(element) {
        element = $(element);
        Tips.add.apply(Tips, arguments);
        return element;
    }
});


var TipClass = Class.create({
    initialize: function(element, evt) {
        this.id = Opentip.lastTipId ++;

        element = $(element);

        this.triggerElement = element;

        this.loaded  = false; // for ajax
        this.loading = false; // for ajax

        this.visible = false;
        this.waitingToShow = false;
        this.waitingToHide = false;

        this.lastPosition = { left: 0, top: 0 };
        this.dimensions   = [ 100, 50 ]; // Just some initial values.

        var options = {};
        this.content = '';

        if      (typeof(arguments[2]) == 'object') { this.content = '';           options = arguments[2]; }
        else if (typeof(arguments[3]) == 'object') { this.content = arguments[2]; options = arguments[3]; }
        else if (typeof(arguments[4]) == 'object') { this.content = arguments[2]; options = arguments[4];  options.title = arguments[3]; }
        else {
            if (Object.isString(arguments[2]) || Object.isFunction(arguments[2])) this.content = arguments[2];
            if (Object.isString(arguments[3])) options.title = arguments[3];
        }

        // Use the type of the html event (eg: onclick="") if called in an event.
        if (!options.showOn && evt) options.showOn = evt.type;

        // If the url of an Ajax request is not set, get it from the link it's attached to.
        if (options.ajax && !options.ajax.url) {
            if (this.triggerElement.tagName.toLowerCase() == 'a') {
                if (typeof(options.ajax) != 'object') options.ajax = { };
                options.ajax.url = this.triggerElement.href;
            } else { options.ajax = false; }
        }

        // If the event is 'click', no point in following a link
        if (options.showOn == 'click' && this.triggerElement.tagName.toLowerCase() == 'a') { if (evt) { evt.stop(); } this.triggerElement.observe('click', function(e) { e.stop(); }); }


        options.style || (options.style = Opentip.defaultStyle);

        var styleOptions = Object.extend({ }, Opentip.styles.standard); // Copy all standard options.
        if (options.style != 'standard') Object.extend(styleOptions, Opentip.styles[options.style]);

        options = Object.extend(styleOptions, options);


        options.target && (options.fixed = true);


        if (options.stem === true) options.stem = options.tipJoint;
        if (options.target === true) options.target = this.triggerElement;
        else if (options.target) options.target = $(options.target);


        this.currentStemPosition = options.stem;


        if (options.delay === null) {
            if (options.showOn == 'mouseover') options.delay = 0.2;
            else options.delay = 0
        }


        if (options.targetJoint == null) {
            options.targetJoint = [];
            options.targetJoint[0] = options.tipJoint[0] == 'left' ? 'right' : (options.tipJoint[0] == 'right' ? 'left' : 'center');
            options.targetJoint[1] = options.tipJoint[1] == 'top' ? 'bottom' : (options.tipJoint[1] == 'bottom' ? 'top' : 'middle');
        }

        this.options = options;

        this.buildContainer();


        this.options.showTriggerElementsWhenHidden = [];

    if (this.options.showOn && this.options.showOn != 'creation') {
      this.options.showTriggerElementsWhenHidden.push({ element: this.triggerElement, event: this.options.showOn });
    }

        this.options.showTriggerElementsWhenVisible = [];


        this.options.hideTriggerElements = [];

        if (this.options.hideTrigger) {
          var hideOnEvent = null;
          var hideTriggerElement = null;
            switch (this.options.hideTrigger) {
                case 'trigger':
                  hideOnEvent = this.options.hideOn ? this.options.hideOn : 'mouseout';
                  hideTriggerElement = this.triggerElement;
                  break;
                case 'tip':
                  hideOnEvent = this.options.hideOn ? this.options.hideOn : 'mouseover';
                  hideTriggerElement = this.container;
                  break;
                case 'target':
                hideOnEvent = this.options.hideOn ? this.options.hideOn : 'mouseover';
                  hideTriggerElement = this.options.target;
                  break;
                case 'closeButton': break;
                default:
              hideOnEvent = this.options.hideOn ? this.options.hideOn : 'mouseover';
                  hideTriggerElement = $(this.options.hideTrigger);
                  break;
            }
            if (hideTriggerElement) {
              this.options.hideTriggerElements.push({ element: hideTriggerElement, event: hideOnEvent });
            if (hideOnEvent == 'mouseout') {
              // When the hide trigger is mouseout, we have to attach a mouseover trigger to that element, so the tooltip doesn't disappear when
              // hovering child elements. (Hovering children fires a mouseout mouseover event)
          this.options.showTriggerElementsWhenVisible.push({ element: hideTriggerElement, event: 'mouseover' });
            }
            }
        }

        this.activate();

        if (evt || this.options.showOn == 'creation') this.show(evt);
    },
    activate: function() {
        this.bound = {};
        this.bound.doShow   = this.doShow.bindAsEventListener(this);
        this.bound.show     = this.show.bindAsEventListener(this);
        this.bound.doHide   = this.doHide.bindAsEventListener(this);
        this.bound.hide     = this.hide.bindAsEventListener(this);
        this.bound.position = this.position.bindAsEventListener(this);

        if (this.options.showEffect || this.options.hideEffect) this.queue = { limit: 1, position: 'end', scope: this.container.identify() };

    // The order is important here! Do not reverse.
    this.setupObserversForReallyHiddenTip();
        this.setupObserversForHiddenTip();
    },
    deactivate: function() {
        this.doHide();
        this.setupObserversForReallyHiddenTip();
    },
    buildContainer: function() {
        this.container = $(Builder.node('div', { className: 'opentipContainer style-' + this.options.className + (this.options.ajax ? ' loading' : '') })).setStyle({ display: 'none', position: 'absolute' });
    },
    buildElements: function() {
        if (this.options.stem) {
            var stemOffset = '-' + this.options.stemSize + 'px';
            this.container.appendChild(Builder.node('div', { className: 'stemContainer ' + this.options.stem[0] + ' ' + this.options.stem[1] }, Builder.node('div', { className: 'stem' }, Builder.node('div', ''))));
        }
        var self = this;
        var content = [];
        var headerContent = [];
        if (this.options.title) headerContent.push(Builder.node('div', { className: 'title' }, this.options.title));

        content.push(Builder.node('div', { className: 'header' }, headerContent));
        content.push($(Builder.node('div', { className: 'content' })).update(this.content));
        if (this.options.ajax) { content.push($(Builder.node('div', { className: 'loadingIndication' }, Builder.node('span', 'Loading...')))); }
        this.tooltipElement = $(Builder.node('div', { className: 'opentip' }, content));

        this.container.appendChild(this.tooltipElement);

        var buttons = this.container.appendChild(Builder.node('div', { className: 'opentipButtons' }));
        if (this.options.hideTrigger == 'closeButton') buttons.appendChild(Builder.node('a', { href: 'javascript:undefined', className: 'close' }, Builder.node('span', 'x')));
        
        if (Opentip.useIFrame()) this.iFrameElement = this.container.appendChild($(Builder.node('iframe', { className: 'opentipIFrame', src: 'javascript:false;' })).setStyle({ display: 'none', zIndex: 100 }).setOpacity(0));

        document.body.appendChild(this.container);
        this.storeAndFixDimensions();
    },
    storeAndFixDimensions: function() {
        this.container.setStyle({ width: 'auto', left: '0px', top: '0px' });
        this.dimensions = this.container.getDimensions();
        this.container.setStyle({ width: this.dimensions.width + 'px', left: this.lastPosition.left + 'px', top: this.lastPosition.top + 'px' });
    },
    destroyAllElements: function() { if (this.container) this.container.remove(); },
    clearShowTimeout: function() { window.clearTimeout(this.timeoutId); },
    clearHideTimeout: function() { window.clearTimeout(this.hideTimeoutId); },
    clearTimeouts: function() { this.clearShowTimeout(); this.clearHideTimeout(); },
    /** Gets called only when doShow() is called, not when show() is called **/
    setupObserversForReallyVisibleTip: function() {
        this.options.showTriggerElementsWhenVisible.each(function(pair) { $(pair.element).observe(pair.event, this.bound.show); }, this);
  },
  /** Gets only called when show() is called. show() might not really result in showing the tooltip, because there may
      be another trigger that calls hide() directly after. **/
    setupObserversForVisibleTip: function() {
        this.options.hideTriggerElements.each(function(pair) { $(pair.element).observe(pair.event, this.bound.hide); }, this);
        this.options.showTriggerElementsWhenHidden.each(function(pair) { $(pair.element).stopObserving(pair.event, this.bound.show); }, this);
        Event.observe(document.onresize ? document : window, "resize", this.bound.position);
        Event.observe(window, "scroll", this.bound.position);
    },
    /** Gets called only when doHide() is called. */
    setupObserversForReallyHiddenTip: function() {
        this.options.showTriggerElementsWhenVisible.each(function(pair) { $(pair.element).stopObserving(pair.event, this.bound.show); }, this);
  },
  /** Gets called everytime hide() is called. See setupObserversForVisibleTip for more info **/
    setupObserversForHiddenTip: function() {
        this.options.showTriggerElementsWhenHidden.each(function(pair) { $(pair.element).observe(pair.event, this.bound.show); }, this);
        this.options.hideTriggerElements.each(function(pair) { $(pair.element).stopObserving(pair.event, this.bound.hide); }, this);
        Event.stopObserving(document.onresize ? document : window, "resize", this.bound.position);
        Event.stopObserving(window, "scroll", this.bound.position);
    },
    show: function(evt) {
      if (this.waitingToHide) {
        this.clearTimeouts();
        this.waitingToHide = false;
        this.setupObserversForVisibleTip();
      }
        if (this.visible) return;

        Opentip.debug('Show', this.id);

        this.waitingToShow = true;

    // Even though it is not yet visible, I already attach the observers, so the tooltip won't show if a hideEvent is triggered.
        this.setupObserversForVisibleTip();

    // So the tooltip is positioned as soon as it shows.
        this.followMousePosition();
        this.position(evt);

        if (!this.options.delay) this.bound.doShow(evt);
        else this.timeoutId = this.bound.doShow.delay(this.options.delay);
    },
    doShow: function() {
      this.clearTimeouts();
      if (this.visible) return;

        Opentip.debug('DoShow', this.id);

    if (this.options.group) Tips.hideGroup(this.options.group);


        this.visible = true;
        this.waitingToShow = false;

        if (Object.isFunction(this.content)) { Opentip.debug('Executing content function...'); this.content = this.content(this);}

        if (!this.tooltipElement) this.buildElements();

        if (this.options.ajax && !this.loaded) { this.loadAjax(); }

        this.searchAndActivateHideButtons();

        this.ensureElement();
        this.container.setStyle({ zIndex: Opentip.lastZIndex += 1 });

    // The order is important here! Do not reverse.
        this.setupObserversForReallyVisibleTip();
        this.setupObserversForVisibleTip();

        if (this.options.showEffect || this.options.hideEffect) this.cancelEffects();

        if (!this.options.showEffect) this.container.show();
        else this.container[this.options.showEffect]({ duration: this.options.showEffectDuration, queue: this.queue, afterFinish: this.afterShowEffect.bind(this) });
        if (Opentip.useIFrame()) this.iFrameElement.show();

        this.activateFirstInput();

        this.position();
    },
    loadAjax: function() {
        if (this.loading) return;
        this.loading = true;
        this.container.addClassName('loading');
        var self = this;
        new Ajax.Request(this.options.ajax.url,
            Object.extend({ onSuccess: function(transport) {
                self.content = transport.responseText;
                var content = self.container.down('.content');
                if (content) {
                    content.update(self.content);
                    self.searchAndActivateHideButtons();
                }
                self.loaded = true;
                self.loading = false;
                self.container.removeClassName('loading');
                self.storeAndFixDimensions();
                self.position();
                this.activateFirstInput();
            } }, this.options.ajax.options || {}));
    },
    afterShowEffect: function() {
        this.activateFirstInput();
        this.position();
    },
    activateFirstInput: function() {
        // TODO: check if there is a simple way of finding EITHER an input OR a textarea.
        var input = this.container.down('input');
        var textarea = this.container.down('textarea');
        if (input) { input.focus(); }
        else if (textarea) textarea.focus();
    },
    searchAndActivateHideButtons: function() {
        if (this.options.hideTrigger == 'closeButton' || !this.options.hideTrigger) {
            this.options.hideTriggerElements = [];
            this.container.select('.close').each(function(el) {
                this.options.hideTriggerElements.push({ element: el, event: 'click' });
            }, this);
            if (this.visible) this.setupObserversForVisibleTip();
        }
    },
    hide: function(afterFinish) {
      if (this.waitingToShow) {
        this.clearTimeouts();
            this.stopFollowingMousePosition();
        this.waitingToShow = false;
        this.setupObserversForHiddenTip();
      }
      if (!this.visible) return;

        Opentip.debug('Hide', this.id);

        this.waitingToHide = true;

    // We start observing even though it is not yet hidden, so the tooltip does not disappear when a showEvent is triggered.
        this.setupObserversForHiddenTip();

        this.hideTimeoutId = this.bound.doHide.delay(this.options.hideDelay, afterFinish); // hide has to be delayed because when hovering children a mouseout is registered.
    },
    doHide: function(afterFinish) {
      this.clearTimeouts();
      if (!this.visible) return;

        this.visible = false;
        this.waitingToHide = false;

        Opentip.debug('DoHide', this.id);

        this.deactivateElementEnsurance();

    // The order is important here! Do not reverse.
        this.setupObserversForReallyHiddenTip();
        this.setupObserversForHiddenTip();

        if (!this.options.fixed) this.stopFollowingMousePosition();

        if (this.options.showEffect || this.options.hideEffect) this.cancelEffects();

        if (!this.options.hideEffect) this.container.hide(); 
        else {
            var effectOptions = { duration: this.options.hideEffectDuration, queue: this.queue };
            if(afterFinish && Object.isFunction(afterFinish)) effectOptions.afterFinish = afterFinish;
            this.container[this.options.hideEffect](effectOptions);
        }
        if (Opentip.useIFrame()) this.iFrameElement.hide();
    },
    cancelEffects: function() { Effect.Queues.get(this.queue.scope).invoke('cancel'); },
    followMousePosition:        function() { if (!this.options.fixed) $(document.body).observe('mousemove', this.bound.position); },
    stopFollowingMousePosition: function() { if (!this.options.fixed) $(document.body).stopObserving('mousemove', this.bound.position); },
    positionsEqual: function(position1, position2) {
        return (position1.left == position2.left && position1.top == position2.top);    
    },
    position: function(evt) {
        var evt = evt || this.lastEvt;

        this.currentStemPosition = this.options.stem; // This gets reset by ensureViewportContainment if necessary.
        var position = this.ensureViewportContainment(evt, this.getPosition(evt));
        if (this.positionsEqual(position, this.lastPosition)) {
            this.positionStem();
            return;
        }

        this.lastPosition = position;
        if (position) {
            var style = { 'left': position.left + 'px', 'top': position.top + 'px' };
            this.container.setStyle(style);
            if (Opentip.useIFrame() && this.iFrameElement) {
                this.iFrameElement.setStyle({ width: this.container.getWidth() + 'px', height: this.container.getHeight() + 'px' });
            }

            /**
             * Following is a redraw fix, because I noticed some drawing errors in some browsers when tooltips where overlapping.
             */
            var container = this.container;
            (function() {
                container.style.visibility = "hidden"; // I chose visibility instead of display so that I don't interfere with appear/disappear effects.
                var redrawFix = container.offsetHeight;
                container.style.visibility = "visible";
            }).defer();
        }
        this.positionStem();
    },
    getPosition: function(evt, tipJ, trgJ, stem) {
        var tipJ = tipJ || this.options.tipJoint;
        var trgJ = trgJ || this.options.targetJoint;

        var position = {};

        if (this.options.target) {
            var tmp = this.options.target.cumulativeOffset();
            position.left = tmp[0];
            position.top = tmp[1];
            if (trgJ[0] == 'right')  {
                // For wrapping inline elements, left + width does not give the right border, because left is where
                // the element started, not its most left position.
                if (typeof this.options.target.getBoundingClientRect != 'undefined') {
                    position.left = this.options.target.getBoundingClientRect().right + $(document.viewport).getScrollOffsets().left;
                }
                else {
                    position.left = position.left + this.options.target.getWidth();
                }
            }
            else if (trgJ[0] == 'center') { position.left += Math.round(this.options.target.getWidth() / 2); }
            if      (trgJ[1] == 'bottom') { position.top += this.options.target.getHeight(); }
            else if (trgJ[1] == 'middle') { position.top += Math.round(this.options.target.getHeight() / 2); }
        } else {
            if (!evt) return; // No event passed, so returning.
            this.lastEvt = evt;
            position.left = Event.pointerX(evt);
            position.top = Event.pointerY(evt);
        }

        if (this.options.autoOffset) {
            var stemSize = this.options.stem ? this.options.stemSize : 0;
            var offsetDistance = (stemSize && this.options.fixed) ? 2 : 10; // If there is as stem offsets dont need to be that big if fixed.
            var additionalHorizontal = (tipJ[1] == 'middle' && !this.options.fixed) ? 15 : 0;
            var additionalVertical   = (tipJ[0] == 'center' && !this.options.fixed) ? 15 : 0;
            if      (tipJ[0] == 'right')  position.left -= offsetDistance + additionalHorizontal;
            else if (tipJ[0] == 'left')   position.left += offsetDistance + additionalHorizontal;
            if      (tipJ[1] == 'bottom') position.top -= offsetDistance + additionalVertical;
            else if (tipJ[1] == 'top')    position.top += offsetDistance + additionalVertical;

            if (stemSize) {
                var stem = stem || this.options.stem;
                if      (stem[0] == 'right')  position.left -= stemSize;
                else if (stem[0] == 'left')   position.left += stemSize;
                if      (stem[1] == 'bottom') position.top -= stemSize;
                else if (stem[1] == 'top')    position.top += stemSize;
            }
        }
        position.left += this.options.offset[0];
        position.top += this.options.offset[1];

        if (tipJ[0] == 'right')  { position.left -= this.container.getWidth(); }
        if (tipJ[0] == 'center') { position.left -= Math.round(this.container.getWidth()/2); }
        if (tipJ[1] == 'bottom') { position.top -= this.container.getHeight(); }
        if (tipJ[1] == 'middle') { position.top -= Math.round(this.container.getHeight()/2); }

        return position;
    },
    ensureViewportContainment: function(evt, position) {
        // Sometimes the element is theoretically visible, but an effect is not yet showing it.
        // So the calculation of the offsets is incorrect sometimes, which results in faulty repositioning.
        if (!this.visible) return position;

        var sticksOut = [ this.sticksOutX(position), this.sticksOutY(position) ];
        if (!sticksOut[0] && !sticksOut[1]) return position;

        var tipJ = this.options.tipJoint.clone();
        var trgJ = this.options.targetJoint.clone();        
        
        var viewportScrollOffset = $(document.viewport).getScrollOffsets();
        var dimensions = this.dimensions;
        var viewportOffset = { left: position.left - viewportScrollOffset.left, top: position.top - viewportScrollOffset.top };
        var viewportDimensions = document.viewport.getDimensions();
        var reposition = false;

        if (viewportDimensions.width >= dimensions.width) {
            if (viewportOffset.left < 0) {
                reposition = true;
                tipJ[0] = 'left';
                if (this.options.target && trgJ[0] == 'left') { trgJ[0] = 'right'; }
            }
            else if (viewportOffset.left + dimensions.width > viewportDimensions.width) {
                reposition = true;
                tipJ[0] = 'right';
                if (this.options.target && trgJ[0] == 'right') { trgJ[0] = 'left'; }
            }
        }

        if (viewportDimensions.height >= dimensions.height) {
            if (viewportOffset.top < 0) {
                reposition = true;
                tipJ[1] = 'top';
                if (this.options.target && trgJ[1] == 'top') { trgJ[1] = 'bottom'; }
            }
            else if (viewportOffset.top + dimensions.height > viewportDimensions.height) {
                reposition = true;
                tipJ[1] = 'bottom';
                if (this.options.target && trgJ[1] == 'bottom') { trgJ[1] = 'top'; }
            }
        }
        if (reposition) {
            var newPosition = this.getPosition(evt, tipJ, trgJ, tipJ);
            var newSticksOut = [ this.sticksOutX(newPosition), this.sticksOutY(newPosition) ];
            var revertedCount = 0;
            for (var i = 0; i <=1; i ++) {
                if (newSticksOut[i] && newSticksOut[i] != sticksOut[i]) {
                    // The tooltip changed sides, but now is sticking out the other side of the window.
                    // If its still sticking out, but on the same side, it's ok. At least, it sticks out less.
                    revertedCount ++;
                    tipJ[i] = this.options.tipJoint[i];
                    if (this.options.target) { trgJ[i] = this.options.targetJoint[i]; }
                }
            }
            if (revertedCount < 2) {
                this.currentStemPosition = tipJ;
                return this.getPosition(evt, tipJ, trgJ, tipJ);
            }
        }
        return position;
    },
    sticksOut: function(position) {
        return this.sticksOutX(position) || this.sticksOutY(position);
    },
    /**
     * return 1 for left 2 for right
     */
    sticksOutX: function(position) {
        var viewportScrollOffset = $(document.viewport).getScrollOffsets();
        var viewportOffset = { left: position.left - viewportScrollOffset.left, top: position.top - viewportScrollOffset.top };
        if (viewportOffset.left < 0) return 1;
        if (viewportOffset.left + this.dimensions.width > document.viewport.getDimensions().width) { return 2; }
    },
    /**
     * return 1 for left 2 for right
     */
    sticksOutY: function(position) {
        var viewportScrollOffset = $(document.viewport).getScrollOffsets();
        var viewportOffset = { left: position.left - viewportScrollOffset.left, top: position.top - viewportScrollOffset.top };
        if (viewportOffset.top < 0) return 1;
        if (viewportOffset.top + this.dimensions.height > document.viewport.getDimensions().height) return 2;
    },
    getStemElement: function() {
        return this.container.down('.stem');
    },
    stemPositionsEqual: function(position1, position2) {
        return (position1 && position2 && position1[0] == position2[0] && position1[1] == position2[1]);    
    },
    positionStem: function() {
        // Position stem
        if (this.options.stem) {
            var stemElement = this.getStemElement();

            if (stemElement && !this.stemPositionsEqual(this.lastStemPosition, this.currentStemPosition)) {

                Opentip.debug('Setting stem style');

                this.lastStemPosition = this.currentStemPosition;

                var stem = this.currentStemPosition;
                var stemSize = this.options.stemSize;

                var stemsImageSize = [ 320, 160 ];

                var style = { width: stemSize + 'px', height: stemSize + 'px' };

                style.left = style.top = '0';

                switch (stem[0]) {
                    case 'center': style.width = stemSize * 2 + 'px'; // no break
                    case 'left':   style.left = '-' + stemSize + 'px'; break;
                }
                switch (stem[1]) {
                    case 'middle':  style.height = stemSize * 2 + 'px'; // no break
                    case 'top':     style.top = '-' + stemSize + 'px'; break;
                }

                if (stem[0] != 'center' && stem[1] != 'middle') style.width = style.height = stemSize * 2 + 'px'; // Corners.

                var imageStyle = { left: 0, top: 0 };

                switch (stem[0] + '-' + stem[1]) {
                    case 'left-middle':
                        imageStyle.left = '-' + Math.round(stemsImageSize[0] * (1/2)) + 'px';
                        imageStyle.top  = '-' + Math.round(stemsImageSize[1] * (1/2) - stemSize) + 'px';
                        break;
                    case 'center-top':
                        imageStyle.left = '-' + Math.round(stemsImageSize[0] * (3/4) - stemSize) + 'px';
                        break;
                    case 'center-bottom':
                        imageStyle.left = '-' + Math.round(stemsImageSize[0] * (3/4) - stemSize) + 'px';
                        imageStyle.top  = '-' + Math.round(stemsImageSize[1] - stemSize) + 'px';
                        break;
                    case 'right-middle':
                        imageStyle.left = '-' + Math.round(stemsImageSize[0] - stemSize) + 'px';
                        imageStyle.top  = '-' + Math.round(stemsImageSize[1] / 2 - stemSize) + 'px';
                        break;
                    case 'left-top': break;
                    case 'right-top':
                        imageStyle.left = '-'   + Math.round(stemsImageSize[0] * (1/2) - stemSize * 2) + 'px';
                        style.top = '-' + stemSize + 'px';
                        style.left = '-' + stemSize + 'px';
                        break;
                    case 'right-bottom':
                        imageStyle.left = '-'   + Math.round(stemsImageSize[0] * (1/2) - stemSize * 2) + 'px';
                        imageStyle.top  = '-' + Math.round(stemsImageSize[1] - stemSize*2) + 'px';
                        style.left = '-' + stemSize + 'px';
                        style.top = '-' + stemSize + 'px';
                        break;
                    case 'left-bottom':
                        imageStyle.top = '-' + Math.round(stemsImageSize[1] - stemSize * 2) + 'px';
                        style.left = '-' + stemSize + 'px';
                        style.top = '-' + stemSize + 'px';
                        break;
                }

                stemElement.down('div').setStyle(imageStyle);
                stemElement.setStyle(style);
                stemElement._appliedStyle = true;
                
                stemElement.up('.stemContainer').removeClassName('left').removeClassName('right').removeClassName('center').removeClassName('top').removeClassName('bottom').removeClassName('middle').addClassName(stem[0] + ' ' + stem[1]);
            }
        }
    },
    ensureElementInterval: 1000, // In milliseconds, how often opentip should check for the existance of the element
    ensureElement: function() { // Regularely checks if the element is still in the dom.
        this.deactivateElementEnsurance();
        if (!this.triggerElement.parentNode || !this.triggerElement.visible() || !this.triggerElement.descendantOf(document.body)) { this.deactivate(); }
        this.ensureElementTimeoutId = setTimeout(this.ensureElement.bind(this), this.ensureElementInterval);
    },
    deactivateElementEnsurance: function() { clearTimeout(this.ensureElementTimeoutId); }
});