/*
 * Buttonanimation in JQuery
 * Autor: André Schneider
 * URL: www.webdevdesign.de
 * Date: 03.09.2010
 */

$(document).ready(function() {
    //Init
    var buttonLineUp = false;
    var button1Up = false;
    var button2Up = false;
    var button3Up = false;
    var button4Up = false;

    //Button-ID Name (button1,button2,...button(n))
    var buttonIdName = "box";

    //Buttondimensionen (button1,button2,...button(n)) (in px)
    var buttonWidth = new Array(242,242,242,242);
    var buttonHeight = new Array(162,162,162,162);

    //CSS-Styles und Attr. init.
    //$('title').value('WebDevDesign by Andre Schneider');
    document.title = 'Webdevdesign.de | Andre Schneider | Webprogrammierung | Webdesign | Internetlösungen | CMS | Wordpress | Bad Bramstedt | Hamburg | Kaltenkirchen | Neumünster | Wiemersdorf | Lentföhrden | Henstedt Ulzburg | Norderstedt | Bad Segeberg | Itzehoe | Quickborn | Weddelbrook | Kellinghusen | Wrist | Hohenweststedt | Hohenlockstedt | Boostedt | Kiel';
    $('#logotop')
    .css({                           //Logo entsprechend setzen
        'margin-top':'16%',
        'display':'block',
        'width':'0px'
    });
    $('#logomiddle')
    .css({
        'display':'none',
        'width':'0px'
    });
    for (i=1;i<=4;i++){              //Buttons einblenden
        $('#'+buttonIdName+i)
        .css({
            'width':'0px',
            'height':'22px'
        });
        $('#'+buttonIdName+i+' a')
        .attr('href','#');
    }
    $('.lk_haftung a')
    .attr('href','#');

    $('#lk_impressum a')
    .attr('href','#');

    $('#content')                   //Contentbereich zuerst ausblenden
    .css({
        'display':'none',
        'width':'0px',
        'height':'0px'
    });

    //Buttonbewegungsweite für hoch und runter (in px)
    var buttonMoveRange = 30;

    //Startanimation
    var delayTime = 750;
    $('#logotop')
    .delay(250)
    .animate({
        'width':'1050px'
    },250)
    .animate({
        'width':'950px'
    },250);
    for (i=1;i<=4;i++){
        $('#'+buttonIdName+i)
        .delay(delayTime).animate({
            "width":buttonWidth[i-1]+"px"
        }, 250);
        $('#'+buttonIdName+i)
        .animate({
            "height":buttonHeight[i-1]+"px"
        }, 300);
        delayTime+=500;
    }

    //Buttonevents
    $('#'+buttonIdName+'0')             //die Buttonreihe nach oben verschieben
    .click(function(){
        buttonLineMove(this);
    });

    function buttonLineMove (id){
        if(!buttonLineUp){
            $('#logotop')
            .animate({
                'width':'0px'
            },250);

            $(id)
            .delay(500)
            .animate({
                "marginTop":"-=19%"
            }, "fast")
            .animate({
                "marginTop":"+=2%"
            }, "fast")
            .animate({
                "marginTop":"-=1%"
            }, "fast");

            $('#logomiddle')
            .delay(1000)
            .animate({
                'width':'1050px'
            },250)
            .animate({
                'width':'950px'
            },250);

            $('#content')
            .delay(1500)
            .css({
                'opacity':'0.0'
            })
            .animate({
                'height':'100%'
            },250)
            .animate({
                'width':'950px',
                'opacity':'1.0'
            },250);

            buttonLineUp = true;
        }
    }


    $('#'+buttonIdName+'1')                     //Button1 animieren
    .mouseover(function(){
        if (!button1Up){
            $(this)
            .animate({
                "marginTop":"-="+buttonMoveRange+"px"
            },250);
        }
    });
    $('#'+buttonIdName+'1')
    .mouseout(function(){
        if (!button1Up){
            $(this)
            .animate({
                "marginTop":"+="+buttonMoveRange+"px"
            },250);
        }
    });
    $('#'+buttonIdName+'1')
    .click(function(){
        if (!button1Up){
            contentSwitch('uebermich','Über mich');
            button1Up = true;
            buttonReset(1);
        }
    });

    $('#'+buttonIdName+'2')                         //Button2 animieren
    .mouseover(function(){
        if (!button2Up){
            $(this)
            .animate({
                "marginTop":"-="+buttonMoveRange+"px"
            },250);
        }
    });
    $('#'+buttonIdName+'2')
    .mouseout(function(){
        if (!button2Up){
            $(this)
            .animate({
                "marginTop":"+="+buttonMoveRange+"px"
            },250);
        }
    });
    $('#'+buttonIdName+'2')
    .click(function(){
        if (!button2Up){
            contentSwitch('service','Service');
            button2Up = true;
            buttonReset(2);
        }
    });

    $('#'+buttonIdName+'3')                         //Button3 animieren
    .mouseover(function(){
        if (!button3Up){
            $(this)
            .animate({
                "marginTop":"-="+buttonMoveRange+"px"
            },250);
        }
    });
    $('#'+buttonIdName+'3')
    .mouseout(function(){
        if (!button3Up){
            $(this)
            .animate({
                "marginTop":"+="+buttonMoveRange+"px"
            },250);
        }
    });
    $('#'+buttonIdName+'3')
    .click(function(){
        if (!button3Up){
            contentSwitch('portfolio','Portfolio');
            button3Up = true;
            buttonReset(3);
        }
    });

    $('#'+buttonIdName+'4')                         //Button4 animieren
    .mouseover(function(){
        if (!button4Up){
            $(this)
            .animate({
                "marginTop":"-="+buttonMoveRange+"px"
            },250);
        }
    });
    $('#'+buttonIdName+'4')
    .mouseout(function(){
        if (!button4Up){
            $(this)
            .animate({
                "marginTop":"+="+buttonMoveRange+"px"
            },250);
        }
    });
    $('#'+buttonIdName+'4')
    .click(function(){
        if (!button4Up){
            contentSwitch('kontakt','Kontakt');
            button4Up = true;
            buttonReset(4);
        }
    });

    function buttonReset(exeptId){                      //Button zurücksetzen
        if(button1Up && exeptId!=1){
            $('#'+buttonIdName+'1')
            .animate({
                "marginTop":"+="+buttonMoveRange+"px"
            },250);
            button1Up = false;
        }
        if(button2Up && exeptId!=2){
            $('#'+buttonIdName+'2')
            .animate({
                "marginTop":"+="+buttonMoveRange+"px"
            },250);
            button2Up = false;
        }
        if(button3Up && exeptId!=3){
            $('#'+buttonIdName+'3')
            .animate({
                "marginTop":"+="+buttonMoveRange+"px"
            },250);
            button3Up = false;
        }
        if(button4Up && exeptId!=4){
            $('#'+buttonIdName+'4')
            .animate({
                "marginTop":"+="+buttonMoveRange+"px"
            },250);
            button4Up = false;
        }
    }

    function getContent (id,title) {                      //den Content aus der DB laden
        $('#content_text')
        .load('index.php?page='+id+'&b=SCRIPT', function(content) {
            $('#content_text')
            .css("text-align","left")
            .empty();                               
            $('#content_text')
            .html(content);                              //und in den Container laden
            
            /*$('title')
            .html('WebDevDesign by Andre Schneider - '+title);*/
            document.title = 'Webdevdesign.de | Andre Schneider | Webprogrammierung | Webdesign | Internetlösungen | CMS | Wordpress | Bad Bramstedt | Hamburg | Kaltenkirchen | Neumünster | Wiemersdorf | Lentföhrden | Henstedt Ulzburg | Norderstedt | Bad Segeberg | Itzehoe | Quickborn | Weddelbrook | Kellinghusen | Wrist | Hohenweststedt | Hohenlockstedt | Boostedt | Kiel - '+title;//Title-Tag anpassen

            if ($('#content_text').has('#captcha')) {    //prüfen, ob es einen Capchabereich hat
                $("#captcha")                            //dann dafür das Captcha setzen
                .html("<div>Vor dem Senden, bitte auf das Symbol klicken:</div><div id='captchapic'><img src='images/captcha.jpg' /></div>");
                $("#btn_senden")
                .attr("disabled","disabled");
                $("#captcha")
                .click(function(){                  //captcha klick prüfen
                    $("#btn_senden")
                    .attr("disabled","");
                });
                $.getScript('script/contact.js');   //und Formularroutinen laden
            }
        });
    }

    function contentSwitch (id,title) {                   //den Contentbereich animieren
        if (buttonLineUp){
            $('#content_text')
            .empty();
            $('#content')
            .animate({
                'width':'2px',
                'opacity':'0.0'
            },250)
            .animate({
                'height':'2px'
            },250)
            .css({
                'width':'2px'
            })
            .animate({
                'height':'100%'
            },250)
            .animate({
                'width':'950px',
                'opacity':'1.0'
            },250);
            setTimeout( function () {               //und entsprechend den Content laden
                getContent(id,title);
            }, 1000);
        }else{
            getContent(id,title);
        }
    }

    //Link Haftung
    $('.lk_haftung').live('click',function(){
        buttonLineMove('#'+buttonIdName+'0');
        buttonReset(0)
        contentSwitch('haftung','Haftungsausschluss');
    });

    //Link Impressum
    $('#lk_impressum').click(function(){
        buttonLineMove('#'+buttonIdName+'0');
        buttonReset(0);
        contentSwitch('kontakt','Impressum');
    });
    
//Einträge im Portfolio Animieren


});