/**
 * Texte für die Anzeige von Vorschauen zu Elementen.
 */
if (window.cm_Preview_Texts === undefined) {
    var cm_Preview_Texts = {
        title:           '%1$s',
        screenshotTitle: '%1$s',
        screenshotTitleSmall: '%1$s',
        loading:         '',
        unavailable:     '',
        footerTitle:     '',
        footerTitleSmall: ''
    };
}

/**
 * Klasse zum Anzeigen von Vorschauen zu Elementen.
 */
var powerPreview = {
    /**
     * Objekt mit den IDs der Elemente die ausgeblendet werden und den
     * dazugehörigen Timeout IDs.
     * 
     * @type    {Object}
     */
    _elements: {},

    /**
     * Zähler für die automatisch generierten IDs.
     * 
     * @type    {Number}
     */
    _idCount: 1,

    /**
     * Objekt mit den URLs und den dazugehörigen Image Objekten.
     * 
     * @type    {Object}
     */
    _images: {},

    /**
     * Das standard Prefix für die IDs und CSS Klassen.
     * 
     * @type    {String}
     */
    defaultPrefix: 'homepage',

    /**
     * Liefert die Position des Elements im sichtbaren Bereich und die Größe des
     * sichtbaren Bereichs.
     * 
     * @param   {HTMLElement}   forElement  Das Element desen Position berechnet
     *                                      wird.
     * 
     * @return  {Object}    Der linke und obere Abstand des Elements und die
     *                      Breite und Höhe des Bereichs.
     */
    _getPosition: function(forElement) {
        /* 
         * Position im sichtbaren Bereich
         */
        var left = 0, top = 0;

        if (forElement.getBoundingClientRect !== undefined) {
            var rect = forElement.getBoundingClientRect();
            left = rect.left;
            top  = rect.top;
        } else {
            var element = forElement;
            do {
                top  += element.offsetTop  || 0;
                left += element.offsetLeft || 0;

                // Safari fix
                if (element.offsetParent == document.body) {
                    if (element.style.position == 'absolute') {
                        break;
                    }
                }

                element = element.offsetParent;
            } while (element);

            element = forElement;
            do {
                if (!window.opera || element.tagName == 'BODY') {
                    top  -= element.scrollTop  || 0;
                    left -= element.scrollLeft || 0;
                }
                element = element.parentNode;
            } while (element);
        }

        /* 
         * Größe des sichtbaren Bereichs.
         */
        var htmlElement = document.getElementsByTagName('html')[0];
        var width = htmlElement.clientWidth;
        var height = htmlElement.clientHeight;

        if (window.opera) {
            height = window.innerHeight;
            width = window.innerWidth;

            /* 
             * Scrollbar Breite abziehen
             */
            if (htmlElement.clientWidth > width) {
                height -= 16;
            }
            if (htmlElement.clientHeight > height) {
                width -= 16;
            }
        } 

        return {
            left:   left,
            top:    top,
            width:  width,
            height: height
        };
    },

    /**
     * Liefert das Prefix.
     * 
     * @param   {String}    prefix  Das übergebene Prefix.
     * 
     * @return  {String}    Das fertige Prefix.
     */
    _getPrefix: function(prefix) {
        if (prefix === undefined) {
            prefix = this.defaultPrefix;
        }
        if (prefix !== null && prefix.length !== 0) {
            prefix += '_';
        }

        return prefix;
    },

    /**
     * Blendet eine Vorschau zu einem Element ein.
     * 
     * @param   {HTMLElement}   element Das Element zu dem die Vorschau
     *                                  angezeigt wird.
     * @param   {String}        image   Die URL des Vorschau Bildes.
     * @param   {String}        url     Die URL von der die Vorschau stammt.
     * @param   {String}        prefix  Das Prefix für die IDs und CSS Klassen.
     * @param   {String}        type    Kostenlos oder Kunde
     */
    show: function(element, image, url,  type, prefix) {
      
      return true;
      
      if (image !== null && this._images[image] === undefined) {
            this._images[image] = new Image();
            this._images[image].src = image;
        }
        if (element.id === '') {
            element.id = 'cm_preview_' + this._idCount++;
        }
        
        if (this._elements[element.id] !== undefined) {
            window.clearTimeout(this._elements[element.id]);
            this._elements[element.id] = undefined;
        }

        prefix = this._getPrefix(prefix);

        var check = document.getElementById(prefix + 'preview_' + element.id);
        
        if (check !== null) {
            return false;
        }

        /* 
         * Texte für die Vorschau
         */
        var titleUrl = url;
        if (titleUrl.length > 25) {
            titleUrl = titleUrl.substr(0, 22) + '...';
        }
        var shortTitle = cm_Preview_Texts.title.replace('%1$s', titleUrl);
        var title = cm_Preview_Texts.title.replace('%1$s', url);
        var screenshotTitleText = cm_Preview_Texts.screenshotTitle.replace('%1$s', url);
        var screenshotTitleSmallText = cm_Preview_Texts.screenshotTitleSmall.replace('%1$s', url);
        var loading = '<img style="margin-top:90px;" src="//web02.city-map.de/images/powersite/loading2.gif" />';//cm_Preview_Texts.loading;
        if (image === null) {
            loading = cm_Preview_Texts.unavailable;
        }
        var footerTitle = cm_Preview_Texts.footerTitle;
        var footerTitleSmall = cm_Preview_Texts.footerTitleSmall;

        /* 
         * HTML aufbauen
         */
        var outer = document.createElement('div');
        outer.id = prefix + 'preview_' + element.id;
        outer.className = prefix + 'preview';
        outer.style.visibility = 'hidden';
        outer.style.top = 0;
        outer.style.left = 0;
        element.appendChild(outer);

        var inner = document.createElement('div');
        inner.className = prefix + 'preview_inner';
        outer.appendChild(inner);

        var titleOuter =  document.createElement('div');
        titleOuter.className = prefix + 'preview_title';
        inner.appendChild(titleOuter);

        var titleInner = document.createElement('span');
        titleInner.className = prefix + 'preview_title_inner';
        titleInner.title = title;
        titleInner.innerHTML = shortTitle;
        titleOuter.appendChild(titleInner);

        var screenshotOuter = document.createElement('div');
        screenshotOuter.className = prefix + 'preview_screenshot';
        inner.appendChild(screenshotOuter);

        var screenshotInner = document.createElement('div');
        screenshotInner.className = prefix + 'preview_screenshot_inner';
        screenshotOuter.appendChild(screenshotInner);
        
        if(type == 's'){
          screenshotTitleText = screenshotTitleSmallText;
        }
        var screenshotTitle = document.createElement('p');
        screenshotTitle.title = screenshotTitleText;
        screenshotTitle.innerHTML = loading;
        screenshotInner.appendChild(screenshotTitle);

        var footerOuter = document.createElement('div');
        footerOuter.className = prefix + 'preview_footer';
        inner.appendChild(footerOuter);

        var footerInner = document.createElement('p');
        footerInner.className = prefix + 'preview_footer_inner';
        if(type == 's'){
          footerTitle = footerTitleSmall;
        }
        footerInner.innerHTML = footerTitle;
        footerOuter.appendChild(footerInner);

        /* 
         * Bild anzeigen
         */
        if (image !== null) {
            var instance = this;
            var displayImage = function() {
                screenshotTitle.removeChild(screenshotTitle.firstChild);
                screenshotTitle.style.backgroundImage = 'url(\'' + instance._images[image].src + '\')';
                inner.className = prefix + 'preview_inner';
            };

            if (this._images[image].complete !== true) {
                this._images[image].onload = function() {
                    this.onload = function() {};
                    displayImage();
                };
                inner.className += ' ' + prefix + 'preview_loading';
            } else {
                displayImage();
            }
        }

        /* 
         * Position ermitteln
         */
        var position = this._getPosition(element);

        var height = outer.style.height;
        if (window.getComputedStyle !== undefined) {
            var css = window.getComputedStyle(outer, null);
            height = css ? css.height : null;
        } else if (outer.currentStyle !== undefined) {
            height = outer.currentStyle.height;
        }
        if (height === 'auto') {
            height = null;
        }
        height = parseInt(height, 10);

        if (position.top > position.height - position.top) {
            outer.className += ' ' + prefix + 'preview_top';
        }

        outer.style.visibility = '';
        outer.style.top = '';
        outer.style.left = '';
    },

    /**
     * Blendet die Vorschau wieder aus.
     * 
     * @param   {HTMLElement}   element Das Element zu dem die Vorschau
     *                                  angezeigt wird.
     * @param   {String}        prefix  Das Prefix für die IDs und CSS Klassen.
     */
    hide: function(element, prefix) {
        prefix = this._getPrefix(prefix);

        var instance = this;
        this._elements[element.id] = window.setTimeout(
            function() {
                var preview = document.getElementById(prefix + 'preview_' + element.id);
                if (preview !== null) {
                    preview.parentNode.removeChild(preview);
                }
                instance._elements[element.id] = undefined;
            },
            250
        );
    }
};