﻿/******** bindeContainerSichtbarkeit
*
* Bindet die Eigenschaft "checked" einer Checkbox an die 
* Sichtbarkeit eines angegeben Elements
* Aufruf über $('#id_checkbox').bindeContainerSichtbarkeit('#container',[optionen]);
*
* Optionen: 
* invertiert -> Invertiert den Status checked <> unchecked
* effekt -> Gibt an, ob 'fade', 'slide' oder 'show' verwendet werden soll
* initial -> Gibt an, ob einmalig ein Ein-/Ausblenden stattfinden soll
*/
(function ($) {
    $.fn.bindeContainerSichtbarkeit = function (container, optionen) {
        //Standardoptionen
        optionen = $.extend({
            invertiert: false,
            effekt: 'fade',
            initial: true
        }, optionen);

        var ermittleKlick = function (elem) {
            var check = $(elem).isChecked();
            if (optionen.invertiert)
                check = !check;

            return check;
        }

        //Initial ausblenden, wenn nicht gecheckt
        if (optionen.initial) {
            if (ermittleKlick(this))
                $(container).show();
            else
                $(container).hide();
        }

        //An Click binden
        return this.each(function () {
            $(this).click(function () {
                $(container).blende({ einblenden: ermittleKlick(this), effekt: optionen.effekt });
            });
        });
    }
})(jQuery);


/******** blende
*
* Blendet ein Element ein oder aus, mit Effekt
* Aufruf über $('#id_element').blende([optionen]);
*
* Optionen: 
* einblenden -> Gibt an, ob das Element ein- oder ausgeblendet werden soll
* effekt -> Gibt an, ob 'fade', 'slide' oder 'show' verwendet werden soll
*/
(function ($) {
    $.fn.blende = function (optionen) {
         //Standardoptionen
        optionen = $.extend({
            einblenden: true,
            effekt: 'fade'
        }, optionen);

        if (optionen.einblenden){
            if (optionen.effekt == 'fade')
                this.fadeIn();
            else if (optionen.effekt == 'slide')
                this.slideDown();
            else if (optionen.effekt == 'show')
                this.show();
        } else {
            if (optionen.effekt == 'fade')
                this.fadeOut();
            else if (optionen.effekt == 'slide')
                this.slideUp();
            else if (optionen.effekt == 'show')
                this.hide();
        }

        return false;
    };
})(jQuery);


/******** isChecked
*
* Prüft, ob eine Checkbox gecheckt ist und gibt true/flase zurück
* Aufruf über $('#id_checkbox').isChecked();
*/
(function ($) {
    $.fn.isChecked = function () {
        return $(this).attr('checked');
    };
})(jQuery);


/******** tooltip
*
* Erstellt einen Tooltip auf das angegebene Element
* Aufruf über $('#id_element').tooltip([optionen]);
*
* Optionen: 
* inhalt -> HTML-Code, welcher als Tooltip angezeigt werden soll
* perKlick -> Gibt an, ob der Tooltip erst bei Click geöffnet/geschlossen werden soll 
* position -> Legt fest, auf welcher Seite des Elements der Tooltip erscheinen soll
*             Zu Auswahl stehen: 'oben', 'unten', 'links', 'rechts', 'standard'
* offset  -> Abstand [x,y] in Pixeln vom Element
* autoposition -> Tauscht, wenn true, die Position, falls in der angegebenen Position
*                 kein Platz mehr für den Tooltip vorhanden ist
* fixiert -> Gibt an, ob der Tooltip an einer festen Position erscheint oder dem Maus-
*            zeiger folgt
* effekt -> Effekt beim Öffnen des Tooltips ('fade', 'slide' oder 'show')
* effektSchliessen -> Effekt beim Schließen des Tooltips ('fade', 'slide' oder 'show')
* cssKlasse -> CSS-Klasse für den Tooltip
*/
(function ($) {

//Tooltip-Klasse
function Tooltip(container, optionen) {
    container = $(container);
    var form = $('form');
    var self = this;

    var tooltip = $(document.createElement('div'))
                .addClass(optionen.cssKlasse)
                .css("position", "absolute")
                .html(optionen.inhalt);
                    
    form.append(tooltip);

    //Initial ausblenden
    tooltip.hide();
    
    if(!optionen.perKlick) {
        container.hover(
            function(event){ self.show(event); },
            function(){ self.hide();  }
        );
         
        if(!optionen.fixiert) {
            container.mousemove( function(event){ 
                if(tooltip.css('display') !== 'none') 
                    self.updatePos(event); 
            });
        };
    } else {
        container.click(function(event){
            if(event.target === container.get(0)) {
                if(tooltip.css('display') !== 'none')
                    self.hide();
                else
                    self.show(event);
            };
        });
         
        $(window).mousedown(function(){ 
            if(tooltip.css('display') !== 'none'){
                self.hide();
            };
        });
    };
      
      
    $.extend(self, {
        getElement: function() { return container; },
        getTooltip: function() { return tooltip; },
        getPos: function() { return tooltip.offset(); },
        setPos: function(posX, posY) {
            var elemPos = container.offset();
            
            if(typeof posX == 'string') posX = parseInt(posX); //+ elemPos.left;
            if(typeof posY == 'string') posY = parseInt(posY); // + elemPos.top;
            
            tooltip.css({ left: posX, top: posY });
            
            return self;
        },
        show: function(event){          
            self.updatePos((optionen.fixiert) ? null : event );
            
            switch(optionen.effekt) {
                case 'fade': 
                    tooltip.fadeIn(); break;
                case 'slide': 
                    tooltip.slideDown('slow', self.updatePos); break;
                default:
                case 'show':
                    tooltip.show(); break;
            };
            
            return self;
        },
        hide: function() {
            switch(optionen.effektSchliessen) {
                case 'fade': 
                    tooltip.fadeOut(); break;
                case 'slide': 
                    tooltip.slideUp(); break;
                default:
                case 'show':
                    tooltip.hide(); break;
            };
            
            return self;
        },
        setzeInhalt: function(inhalt) {
            tooltip.html(inhalt);
            optionen.inhalt = inhalt;
            
            return self;
        },
        autoposition: function(posX, posY) {
            var newX = posX + tooltip.outerWidth();
            var newY = posY + tooltip.outerHeight();
            
            var windowWidth = $(window).width() + $(window).scrollLeft();
            var windowHeight = $(window).height() + $(window).scrollTop();
            
            return [(newX >= windowWidth), (newY >= windowHeight)];
        },
        updatePos: function(event) {
            var tooltipWidth = tooltip.outerWidth();
            var tooltipHeight = tooltip.outerHeight();
            
            if(!event && optionen.fixiert) {
                if(optionen.position.constructor == Array) {
                    posX = parseInt(optionen.position[0]);
                    posY = parseInt(optionen.position[1]);
                } else if($(optionen.position).attr('nodeType') === 1) {
                    var offset = $(optionen.position).offset();
                    posX = offset.left;
                    posY = offset.top;
                } else {
                    var elemPos = container.offset();
                    var elemBreite = container.outerWidth();
                    var elemHoehe = container.outerHeight();

                    switch(optionen.position) {
                        case 'oben':
                            var posX = elemPos.left - (tooltipWidth / 2) + (elemBreite / 2);
                            var posY = elemPos.top - tooltipHeight;
                            break;
                        
                        case 'rechts':
                            var posX = elemPos.left + elemBreite;
                            var posY = elemPos.top - (tooltipHeight / 2) + (elemHoehe / 2);
                            break;
                                      
                        case 'unten':
                            var posX = elemPos.left - (tooltipWidth / 2) + (elemBreite / 2);
                            var posY = elemPos.top + elemHoehe;
                            break;
                     
                        case 'links':
                            var posX = elemPos.left - tooltipWidth;
                            var posY = elemPos.top - (tooltipHeight / 2) + (elemHoehe / 2);
                            break;

                        default:
                            case 'standard':
                            var posX = (elemBreite / 2) + elemPos.left + 20;
                            var posY = elemPos.top;
                            break;
                    };
                };
            } else {
                var posX = event.pageX;
                var posY = event.pageY;
            };
            
            if(typeof optionen.position != 'object') {
                posX = posX + optionen.offset[0];
                posY = posY + optionen.offset[1]; 
               
                if(optionen.autoposition) {
                    var overflow = self.autoposition(posX, posY);
                                    
                    if(overflow[0]) posX = posX - (tooltipWidth / 2) - (2 * optionen.offset[0]);
                    if(overflow[1]) posY = posY - (tooltipHeight / 2) - (2 * optionen.offset[1]);
                }
            } else {
                if(typeof optionen.position[0] == "string") posX = String(posX);
                if(typeof optionen.position[1] == "string") posY = String(posY);
            };

            self.setPos(posX, posY);

            return self;
        },
        zerstoeren : function( ) {
            self.hide();
            container.unbind('click mouseenter mouseleave mousemove');
            container.removeData('tooltip');

            return self
        }
    });
};


$.fn.tooltip = function(optionen) { 
    // Prüfen, ob Tooltip bereits vorhanden
    var api = $(this).eq(typeof optionen == 'number' ? optionen : 0).data("tooltip");
    if(api) return api;
      
    //Standardoptionen
    optionen = $.extend({
        // Allgemein
        inhalt: '',
        perKlick: false,
         
        // Position
        position: 'standard',
        offset: [10, 10],
        autoposition: true,
        fixiert: false,
         
        // Effekte
        effekt: 'fade',
        effektSchliessen: 'fade',
         
        // CSS
        cssKlasse: 'wzkp_tooltipp'
        
    }, optionen);
         
    this.each(function() {
        var element = new Tooltip($(this), optionen);
        $(this).data("tooltip", element);  
    });
      
    return this; 
};
})(jQuery);


/******** infoi
*
* Erstellt ein Info-I auf das angegebene Element und nutzt dabei den 
* Tooltip zur Anzeige.
* Aufruf über $('#id_element').infoi([optionen]);
*/
(function ($) {
$.fn.infoi = function(optionen) { 
    //Standardoptionen
    optionen = $.extend({
        inhalt: '',
        offset: [0, -10],
        fixiert: true,
        cssKlasse: 'wzkp_tooltipp'
    }, optionen);

    $(this).tooltip(optionen);
      
    return this; 
};
})(jQuery);
