// When the document loads do everything inside here ...
$(document).ready(function(){

    // When a link is clicked
    $("a.tab").click(function () {

        // switch all tabs off
        $(".active").removeClass("active");

        // switch this tab on
        $(this).addClass("active");

    });
    
    // start cufon
//    if(!$.fontAvailable('Vegur Light')) {
//        Cufon.replace('h1, h2, h3, th, .service_title',  {
//            fontFamily: 'Vegur Light', 
//            hover: true
//        }); 
//    }
//    
//    if(!$.fontAvailable('Vegur Medium')) {
//        Cufon.replace('#slogan',  {
//            fontFamily: 'Vegur Medium', 
//            hover: true
//        }); 
//    }
//    if(!$.fontAvailable('Bebas Neue')) {
//        Cufon.replace('.rex-navi1 a',  {
//            fontFamily: 'Bebas Neue', 
//            hover: true
//        });
//    }
    Cufon.replace('	ul.tabs li a ');

    $("img.a").hover(
        function() {
            $(this).stop().animate({
                "opacity": "0"
            }, "slow");
        },
        function() {
            $(this).stop().animate({
                "opacity": "1"
            }, "slow");


        });
        
        
    // Settings
    var viewportTop   = 80,
    scrollTime      = 600,
    openTime      = 600,
    completeTime  = 1200,
    scrollElement = "html,body";

    // Detect iOS and Android*/
    if((!navigator.userAgent.match(/iPhone/i)) && (!navigator.userAgent.match(/iPod/i)) && (!navigator.userAgent.match(/iPad/i)) && (!navigator.userAgent.match(/Android/i))) {
        // Sticky nav for desktop
        $("#nav").stickyPanel();
    }

  
    

    $("a[rel='gallery1']").colorbox({
        width:"80%"
    });
    $("a[rel='gallery2']").colorbox({
        width:"80%"
    });
    $("a[rel='gallery3']").colorbox({
        width:"80%"
    });
    $("a[rel='gallery4']").colorbox({
        width:"80%"
    });


    $(".scrollable").scrollable();

    $(".items img").click(function() {

        // see if same thumb is being clicked
        if ($(this).hasClass("active")) {
            return;
        }

        // calclulate large image's URL based on the thumbnail URL (flickr specific)
        var url = $(this).attr("src").replace("_mini", "");

        // get handle to element that wraps the image and make it semi-transparent
        var wrap = $("#image_wrap").fadeTo("medium", 0.5);

        // the large image from www.flickr.com
        var img = new Image();


        // call this function after it's loaded
        img.onload = function() {

            // make wrapper fully visible
            wrap.fadeTo("fast", 1);

            // change the image
            wrap.find("img").attr("src", url);

        };

        // begin loading the image from www.flickr.com
        img.src = url;

        // activate item
        $(".items img").removeClass("active");
        $(this).addClass("active");

    // when page loads simulate a "click" on the first image
    }).filter(":first").click();


    // contact Form Handling
    $('#contact #send').click(function(e){
        $('#contact').submit();
        return false;
    })

    $('input:text[name=name]').focus(function() {
        var namevar=$(this).val();
        if(namevar=='Name'){
            $(this).val('');
        }
    });

    $('input:text[name=name]').focusout(function() {
        var namevar=$(this).val();
        if(namevar==''){
            $(this).val('Name');
        }
    });

    $('input:text[name=tel]').focus(function() {
        var telvar=$(this).val();
        if(telvar=='Telefon'){
            $(this).val('');
        }
    });

    $('input:text[name=tel]').focusout(function() {
        var telvar=$(this).val();
        if(telvar==''){
            $(this).val('Telefon');
        }
    });

    $('input:text[name=email1]').focus(function() {
        var email1var=$(this).val();
        if(email1var=='E-Mail'){
            $(this).val('');
        }
    });

    $('input:text[name=email1]').focusout(function() {
        var email1var=$(this).val();
        if(email1var==''){
            $(this).val('E-Mail');
        }
    });

    $('#message').focus(function() {
        var mensajevar=$(this).val();
        if(mensajevar=='Ihre Nachricht'){
            $(this).val('');
        }
    });

    $('#message').focusout(function() {
        var mensajevar=$(this).val();
        if(mensajevar==''){
            $(this).val('Ihre Nachricht');
        }
    });
        
    //fancybox image gallery
    $("a.groupImg").fancybox({
        'transitionIn'	:	'elastic',
        'transitionOut'	:	'elastic',
        'speedIn'		:	600, 
        'speedOut'		:	200, 
        'overlayShow'	:	true
    });
    
    
    
//    $("a[rel=example_group]").fancybox({
//        'transitionIn'  : 'elastic',
//        'transitionOut' : 'elastic',
//        'titlePosition'         : 'over',
//        'titleFormat'           : function(title, currentArray, currentIndex, currentOpts) {
//            return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '<\/span>';
//        }
//    });
        
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX + -200; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        var tipWidth = tip.width(200); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        }
        if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;  
        }
        //Absolute position the tooltip according to mouse position
        tip.css({
            top: mousey, 
            left: mousex
        });
    });        
});