var shayaTemplateURL = 'http://www.shaya.de/templates/xtc4_shaya/shaya/';
var shayaIndexURL = 'http://www.shaya.de/shaya.php/';

var mycarousel_itemList_1 = [
        {
            search : '01',
            url : 'shayas_welt/folge-habus_ankunft_im_zauberwald/',
            img : 'image/shayas_welt/folge01.gif',
            title : 'Habùs Ankunft im Zauberwald',
            descr : '<strong>Folge 1</strong><br /><br />Hab&ugrave;s<br />Ankunft im Zauberwald'
        },
        {
            search : '02',
            url : 'shayas_welt/folge-tomalik_in_gefahr/',
            img : 'image/shayas_welt/folge02.gif',
            title : 'Tomalik in Gefahr',
            descr : '<strong>Folge 2</strong><br /><br />Tomalik<br />in Gefahr'
        },
        {
            search : '03',
            url : 'shayas_welt/folge-der_himmelsmaler/',
            img : 'image/shayas_welt/folge03.gif',
            title : 'Der Himmelsmaler',
            descr : '<strong>Folge 3</strong><br /><br />Der Himmels-<br />maler'
        } ,
        {
            search : '04',
            url : 'shayas_welt/folge-ein_naechtliches_fest/',
            img : 'image/shayas_welt/folge04.gif',
            title : 'Ein nächtliches Fest',
            descr : '<strong>Folge 4</strong><br /><br />Ein nächtliches Fest'
        } ,
        {
            search : '05',
            url : 'shayas_welt/folge-die_verwandlung_des_waldmeisters_teil_1/',
            img : 'image/shayas_welt/folge05.gif',
            title : 'Ein nächtliches Fest',
            descr : '<strong>Folge 5</strong><br /><br />Die Verwandlung des Waldmeisters - Teil 1'
        } ,
		{
            search : '06',
            url : 'shayas_welt/folge-die_verwandlung_des_waldmeisters_teil_2/',
            img : 'image/shayas_welt/folge06.gif',
            title : 'Ein nächtliches Fest',
            descr : '<strong>Folge 6</strong><br /><br />Die Verwandlung des Waldmeisters - Teil 2'
        }

        ];

var mycarousel_itemList_2 = [
        {
            search : 'murmel',
            url : 'mach_mit_auswahl/spiel-murmel/',
            img : 'image/mach_mit_auswahl/murmel.gif',
            title : 'Murmel',
            descr : '<strong>Murmel</strong><br /><br />Lass die Beeren fallen und sammel Punkte.'
        },
        {
            search : 'erinner_dich',
            url : 'mach_mit_auswahl/spiel-erinner_dich/',
            img : 'image/mach_mit_auswahl/erinner_dich.gif',
            title : 'Erinner dich',
            descr : '<strong>Erinner Dich</strong><br /><br />Unserer Waldbewohner haben Doppel- g&auml;nger. Finde<br />die Paare.'
        },
        {
            search : 'fehlerbild',
            url : 'mach_mit_auswahl/spiel-fehlerbild/',
            img : 'image/mach_mit_auswahl/fehlerbild.gif',
            title : 'Fehlerbild',
            descr : '<strong>Fehlerbild</strong><br /><br />Die beiden Bilder scheinen gleich. Hier sind aber Unterschiede versteckt.'
        },
        {
            search : 'malen',
            url : 'mach_mit_auswahl/spiel-malen/',
            img : 'image/mach_mit_auswahl/malen.gif',
            title : 'Malen',
            descr : '<strong>Malen</strong><br /><br />W&auml;hle Dir ein Motiv aus und bringe Farbe in Dein Bild.'
        },
        {
            search : 'merkudo',
            url : 'mach_mit_auswahl/spiel-merkudo/',
            img : 'image/mach_mit_auswahl/merkudo.gif',
            title : 'Merkudo',
            descr : '<strong>Merkudo</strong><br /><br />Teste hier Dein Ged&auml;chtnis im Spiel gegen die Waldbewohner!'
        },
        {
            search : 'puenktchen',
            url : 'mach_mit_auswahl/spiel-puenktchen/',
            img : 'image/mach_mit_auswahl/puenktchen.gif',
            title : 'P&uuml;nktchen',
            descr : '<strong>P&uuml;nktchen</strong><br /><br />Hilfst Du Tomalik, seine Punkte wieder einzu- sammeln?'
        },
        {
            search : 'puzzle',
            url : 'mach_mit_auswahl/spiel-puzzle/',
            img : 'image/mach_mit_auswahl/puzzle.gif',
            title : 'Shaya Puzzle',
            descr : '<strong>Shaya Puzzle</strong><br /><br />Hilf den flei&szlig;igen Bienen, das Puzzle zusammen- zusetzen.'
        },
        {
            search : 'stundenplan',
            url : 'mach_mit_auswahl/spiel-stundenplan/',
            img : 'image/mach_mit_auswahl/stundenplan.gif',
            title : 'Stundenplan',
            descr : '<strong>Stundenplan</strong><br /><br />Hier kannst Du alle Deine Unterrichts- stunden eintragen.'
        },
        {
            search : 'puenktchen_malen',
            url : 'mach_mit_auswahl/spiel-puenktchen_malen/',
            img : 'image/mach_mit_auswahl/puenktchen_malen.gif',
            title : 'P&uuml;nktchen malen',
            descr : '<strong>P&uuml;nktchen malen</strong><br /><br />Verbinde die Punkte und entdecke einen Waldbewohner.'
        },
        {
            search : 'galerie_eigene_bilder',
            url : 'galerie_eigene_bilder/',
            img : 'image/mach_mit_auswahl/galerie.gif',
            title : 'Galerie',
            descr : '<strong>Galerie</strong><br /><br />Hier zeigen wir Eure Bilder!'
        },
        {
            search : '',
            url : 'galerie_ausmalbilder/',
            img : 'image/mach_mit_auswahl/ausmalbilder.gif',
            title : 'Ausmalbilder',
            descr : '<strong>Ausmalbilder</strong><br /><br />Feenemonale Bilder zum Ausdrucken und Ausmalen!'
        } ];

var mycarousel_itemList_3 = [
        {
            search : 'shaya',
            url : 'freunde_auswahl/zauberwaldbewohner-shaya/',
            img : 'image/freunde/shaya_klein.jpg',
            title : 'Shaya',
            descr : '<strong>Shaya</strong><br /><br />Unsere Heldin<br /> mit dem zauberhaften Lachen.'
        },
        {
            search : 'habu',
            url : 'freunde_auswahl/zauberwaldbewohner-habu/',
            img : 'image/freunde/habu_klein.jpg',
            title : 'Hab&ugrave;',
            descr : '<strong>Hab&ugrave;</strong><br /><br />Shayas bester Freund. Immer f&uuml;r ein Purzel- baumspielchen gut.'
        },
        {
            search : 'waldmeister',
            url : 'freunde_auswahl/zauberwaldbewohner-waldmeister/',
            img : 'image/freunde/waldmeister_klein.jpg',
            title : 'Waldmeister',
            descr : '<strong>Waldmeister</strong><br /><br />Der Ordnungs- h&uuml;ter im Zauberwald. Meistens ist er ziemlich streng.'
        },
        {
            search : 'wetzig',
            url : 'freunde_auswahl/zauberwaldbewohner-wetzig/',
            img : 'image/freunde/wetzig_klein.jpg',
            title : 'Wetzig',
            descr : '<strong>Wetzig</strong><br /><br />Am meisten st&ouml;rt ihn, dass Shaya so gut mit Hab&ugrave; befreundet ist.'
        },
        {
            search : 'tomalik',
            url : 'freunde_auswahl/zauberwaldbewohner-tomalik/',
            img : 'image/freunde/tomalik_klein.jpg',
            title : 'Tomalik',
            descr : '<strong>Tomalik</strong><br /><br />Der zerstreu- teste Marien- k&auml;fer, der je im Zauberwald gelebt hat.'
        },
        {
            search : 'petrasilie',
            url : 'freunde_auswahl/zauberwaldbewohner-petrasilie/',
            img : 'image/freunde/petrasilie_klein.jpg',
            title : 'Petrasilie',
            descr : '<strong>Petrasilie</strong><br /><br />ACHTUNG! Gef&auml;hrlich!'
        },
        {
            search : 'pusteblume',
            url : 'freunde_auswahl/zauberwaldbewohner-pusteblume/',
            img : 'image/freunde/pusteblume_klein.jpg',
            title : 'Pusteblume',
            descr : '<strong>Pusteblume</strong><br /><br />Die Pusteblume ist immer hilfsbereit, wenn es um Freunde geht.'
        },
        {
            search : 'purzelbaum',
            url : 'freunde_auswahl/zauberwaldbewohner-purzelbaum/',
            img : 'image/freunde/purzelbaum_klein.jpg',
            title : 'Purzelbaum',
            descr : '<strong>Purzelbaum</strong><br /><br />Shayas liebster Zeitvertreib: Purzelb&auml;ume schlagen.'
        },
        {
            search : 'klatschmohn',
            url : 'freunde_auswahl/zauberwaldbewohner-klatschmohn/',
            img : 'image/freunde/klatschmohn_klein.jpg',
            title : 'Klatschmohn',
            descr : '<strong>Klatschmohn</strong><br /><br />Achtung: Wer ihm zu nahe kommt, riskiert eine Abreibung!'
        },
        {
            search : 'utz',
            url : 'freunde_auswahl/zauberwaldbewohner-utz/',
            img : 'image/freunde/utz_klein.jpg',
            title : 'Utz',
            descr : '<strong>Utz</strong><br /><br />Utz hat schon viel gesehen im Elfenwald. Deshalb kann er viel erkl&auml;ren.'
        } ];

function mycarousel_itemVisibleInCallback_1(carousel, item, i, state, evt) {
    var idx = carousel.index(i, mycarousel_itemList_1.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList_1[idx - 1]));
};

function mycarousel_itemVisibleInCallback_2(carousel, item, i, state, evt) {
    var idx = carousel.index(i, mycarousel_itemList_2.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList_2[idx - 1]));
};

function mycarousel_itemVisibleInCallback_3(carousel, item, i, state, evt) {
    var idx = carousel.index(i, mycarousel_itemList_3.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList_3[idx - 1]));
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt) {
    carousel.remove(i);
};

function mycarousel_getItemHTML(item) {
    return '<div class="episodeDiv">' + '<a href="' + shayaIndexURL + item.url
            + '" title="' + item.title + '">' + '<img class="episodeImg" src="'
            + shayaTemplateURL + item.img + '" alt="' + item.title
            + '" title="' + item.title + '" />' + '</a>' + item.descr
            + '</div>';
};

function startPos() {
    var startSlider = 0;
    if (action == 'shayas_welt') {
        if (sel == '')
            sel = '01';
        for ( var i = 0; i < mycarousel_itemList_1.length; ++i)
            if (sel == mycarousel_itemList_1[i].search)
                startSlider = i;
        if (!startSlider)
            startSlider = mycarousel_itemList_1.length;
    }
    if (action == 'mach_mit_auswahl') {
        if (sel == '')
            sel = 'erinner_dich';
        for ( var i = 0; i < mycarousel_itemList_2.length; ++i)
            if (sel == mycarousel_itemList_2[i].search)
                startSlider = i;
        if (!startSlider)
            startSlider = mycarousel_itemList_2.length;
    }
    if (action == 'freunde_auswahl') {
        if (sel == '')
            sel = 'shaya';
        for ( var i = 0; i < mycarousel_itemList_3.length; ++i)
            if (sel == mycarousel_itemList_3[i].search)
                startSlider = i;
        if (!startSlider)
            startSlider = mycarousel_itemList_3.length;
    }
    return startSlider;
};

// Simulate watermark because of IE
function swapInputPass() {
    jQuery('#pass_mock').hide();
    jQuery('#pass').show();
    jQuery('#pass').focus();
};

function swapInputPassBack() {
    if (jQuery('#pass').val() == '') {
        jQuery('#pass_mock').show();
        jQuery('#pass').hide();
    }
};

function swapInputPassRep() {
    jQuery('#pass_rep_mock').hide();
    jQuery('#pass_rep').show();
    jQuery('#pass_rep').focus();
};

function swapInputPassRepBack() {
    if (jQuery('#pass_rep').val() == '') {
        jQuery('#pass_rep_mock').show();
        jQuery('#pass_rep').hide();
    }
};

// Set watermarks
jQuery(function() {
    jQuery('#contact_name').watermark('Dein Name');
    jQuery('#contact_email').watermark('Deine eMail-Adresse');
    jQuery('#contact_message').watermark('Deine Nachricht');

    jQuery('#contact_name_empfehlen_1').watermark('Name deines Freundes');
    jQuery('#contact_email_empfehlen_1').watermark('eMail deines Freundes');
    jQuery('#contact_name_empfehlen_2').watermark('Name deines Freundes');
    jQuery('#contact_email_empfehlen_2').watermark('eMail deines Freundes');
    jQuery('#contact_name_empfehlen_3').watermark('Name deines Freundes');
    jQuery('#contact_email_empfehlen_3').watermark('eMail deines Freundes');
    jQuery('#contact_name_empfehlen_4').watermark('Name deines Freundes');
    jQuery('#contact_email_empfehlen_4').watermark('eMail deines Freundes');
    jQuery('#contact_name_empfehlen_5').watermark('Name deines Freundes');
    jQuery('#contact_email_empfehlen_5').watermark('eMail deines Freundes');

    jQuery('#elfenpost_firstname').watermark('Dein Vorname');
    jQuery('#elfenpost_name').watermark('Dein Nachname');
    jQuery('#elfenpost_email').watermark('eine eMail-Adresse');


    jQuery('#login_name').watermark('Spitzname');

    jQuery('#reg_name').watermark('Dein Nachname');
    jQuery('#reg_firstname').watermark('Dein Vorname');
    jQuery('#reg_nickname').watermark('Dein Spitzname');
    jQuery('#reg_email').watermark('Deine eMail-Adresse');
    jQuery('#reg_age').watermark('Dein Alter');
    jQuery('#reg_home').watermark('Dein Wohnort');
    jQuery('#reg_opinion').watermark('Dein Kommentar zu Shaya');
    jQuery('#reg_control').watermark('Welches Tier ist rechts abgebildet?');
    jQuery('#reg_geb_jahr').watermark('Jahr');


    jQuery('#image_titel').watermark('Wie heißt dein Bild?');
    jQuery('#image_description').watermark('Was ist auf dem Bild zu sehen?');
});

jQuery(document).ready(function() {
    // Initialize slider
    jQuery('#mycarousel_1').jcarousel( {
        wrap : 'circular',
        start : startPos(),
        itemVisibleInCallback : {
            onBeforeAnimation : mycarousel_itemVisibleInCallback_1
        },
        itemVisibleOutCallback : {
            onAfterAnimation : mycarousel_itemVisibleOutCallback
        }
    });
    jQuery('#mycarousel_2').jcarousel( {
        wrap : 'circular',
        start : startPos(),
        itemVisibleInCallback : {
            onBeforeAnimation : mycarousel_itemVisibleInCallback_2
        },
        itemVisibleOutCallback : {
            onAfterAnimation : mycarousel_itemVisibleOutCallback
        }
    });
    jQuery('#mycarousel_3').jcarousel( {
        wrap : 'circular',
        start : startPos(),
        itemVisibleInCallback : {
            onBeforeAnimation : mycarousel_itemVisibleInCallback_3
        },
        itemVisibleOutCallback : {
            onAfterAnimation : mycarousel_itemVisibleOutCallback
        }
    });

    //select all the a tag with name equal to modal
    jQuery('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = jQuery(this).attr('href');

        //Get the screen height and width
        var maskHeight = jQuery(document).height();
        var maskWidth = jQuery(window).width();

        //Set height and width to mask to fill up the whole screen
        jQuery('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect
        jQuery('#mask').fadeIn(1000);
        jQuery('#mask').fadeTo("slow",0.8);

        //Get the window height and width
        var winH = jQuery(window).height();
        var winW = jQuery(window).width();

        //Set the popup window to center
        jQuery(id).css('top',  winH/2-jQuery(id).height()/2);
        jQuery(id).css('left', winW/2-jQuery(id).width()/2);

        //transition effect
        jQuery(id).fadeIn(2000);
    });

    //if close button is clicked
    jQuery('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        jQuery('#mask, .window').hide();
    });

    //if mask is clicked
    jQuery('#mask').click(function () {
        jQuery(this).hide();
        jQuery('.window').hide();
    });
});