window.addEvent('domready', function() {

    var myCookie = Cookie.read('notepad');
    /*
    * Auslesen der Merkliste und erzeugen einer
    * Auflistung
    */
    if(myCookie != null) {
        showNotepad();
    }
    function showNotepad() {
        $('box_notepad_list').empty();
        var listCookie = Cookie.read('notepad');
        var myCookieArray = listCookie.split(':');
        myCookieArray.each(function(products_data){
            var ProductsArray = products_data.split('@'); 
            var products_id = ProductsArray[0];
            var products_name = ProductsArray[1];
            /*
            * Link zum Produkt 
            */
            var ProductsLink = new Element('a',{ href:'/merkliste::'+products_id+'.html',
                                                 text:products_name,
                                                 styles:{'margin-top':'2px','padding-top':'3px','border-top':'1px dotted #999999','font-size':'0.9em','display':'block'}
                                           });
            /*
            * Bild zum Produkt aus Merkliste löschen
            */
            var ProductsDelImage = new Element('img',{ 
                                                'src':'/images/icons/notepad_delete.png'
                                           });
            /*
            * Link zum Produkt aus Merkliste löschen
            */
            var ProductsDelLink = new Element('a',{ href:'#',
                                                'text':' ',
                                                'id':'del_'+products_id,
                                                'name':products_name,
                                                'class': 'notepad_delete',
                                                'styles':{'height':'12px','font-size':'0.84em','background':'url(/images/icons/notepad_delete.png) no-repeat','padding-left':'12px','padding-bottom':'2px'}
                                           });
/*
            ProductsDelImage.wraps(ProductsDelLink);                                    
            var ProductsElement = new Element('li',{text:products_id});
*/
            if(products_name) {
                $('box_notepad_list').adopt([ProductsLink,ProductsDelLink]);
            }
        });
    };
    /*
    * Entferne Artikel aus der Merkliste
    */
    $$('a.notepad_delete').addEvent('click', function(e){
        e.stop();
        var delIdArray = this.id.split('_');
        var delId      = delIdArray[1]
        var result;
        // ProductID
        var pid = delId+'@'+this.get('name');
        // Auslesen des Cookie
        var myCookie = Cookie.read('notepad');
        if(myCookie != null) {
            // Konvertiere in Array
            var myCookieArray = myCookie.split(':');
            myCookieArray.erase(pid);
            myCookieString = myCookieArray.join(':');
        }
        alert('"'+this.get('name')+ '" wurde aus der Merkliste entfernt');
        Cookie.write("notepad", myCookieString, { duration:30 , secure:false, path:'/' });
        showNotepad();
    });
    
    /*
    * POPUP Class für Hinweistexte
    */
    var Popup = new Class({

        Implements: Options,
        options: {
        'className': 'popup',
        'popupText': 'Hier fehlt Text! Bitte ändern!',
        'container': document.body
        },
        popup: null,

        // Initialisierung
        initialize: function(options){
            this.setOptions(options);
            this.popup = new Element('div', {
                'class': this.options.className,
                'text': this.options.popupText
            });
        },

        // Popup anzeigen
        display: function(){
            this.popup.inject(this.options.container);
        }

    });

    Popup.implement({
    // Eine zusätzliche Titelleiste
    addTitle: function(text){
        var titleBar = new Element('h3', {
            'class': 'popup_title',
            'text': text
        });
        titleBar.inject(this.popup, 'top');
    },
    // Und ein OK-Button
    addButton: function(text){
        var button = new Element('div', {
            'class': 'popup_button',
            'text': text
        });
        Popup.implement(Events);
        button.addEvent('click', function(){
            this.popup.destroy();
        }.bind(this));
        button.inject(this.popup, 'bottom');
    }

});


    $('WasIstDieMerkListe').addEvent('click', function(e){
        e.stop();
        var notepadPopup = new Popup({
            'popupText': 'Die Merkliste ist eine kleine Erinnerungsliste, die nur kurz zwischengespeichert wird. Je nach Einstellungen in Deinem Browser, kann sie beim Schliessen des Fenstern verloren gehen. Sie soll Dich nur beim aktuellen Stöbern unterstützen.\n Wenn Du Dir Artikel über einen längeren Zeitraum merken möchtest, melde Dich bei uns an und nutze die Wunschliste.',
            'container': 'notepad_container'
        });
        notepadPopup.addTitle('Die Merkliste');
        notepadPopup.addButton('schliessen');
        notepadPopup.display();

    });

});