/**
 * Van de Coevering Matrijzen // Javascript Document
 *
 * Created By: Komma Mediadesign
 * Author: Mike van der Sanden
 * January 2013
 *
 */

$(document).ready(function(){

    /* Start animations */
    initAnimations();

    /* Init positioning */
    initPositioning();

    /* Handle contact plan route */
    initRouteBtn();

    initResizeImages();
});

/*
    Initialize animations
 */
function initAnimations(){
    // Arrow in navigation
    $('.arrowHider').children('.arrow').stop().animate({ top: 0 },200);

    // Flags in header
    $('.flags').children('a').hover(function(){
       $(this).stop().animate({ opacity: 1 },100);
    },
    function(){
        if( ! $(this).hasClass('active')) $(this).stop().animate({ opacity: 0.25 },300);
    });

    /*//Orange buttons
    $('.btnOrange').hover(function(){
        $(this).children('.over').stop().animate({opacity:1},100);
    },
    function(){
        $(this).children('.over').stop().animate({opacity:0},200);
    });*/

    /*//Green buttons
    $('.btnGreen').hover(function(){
        $(this).children('.target').children('.detail').stop().animate({ opacity: 1, bottom: '-45px'},200);
    },
    function(){
        $(this).children('.target').children('.detail').stop().animate({opacity: 0, bottom: '-35px'},200);
    });*/

    // Show details
    $('.hasDetail').hover(function()
    {
        $(this).children('.target').children('.detail').stop().animate({ opacity: 1, bottom: '-45px'},200);

        $(this).children('.detail').stop().animate({ opacity: 1, bottom: '-46px'},200);
        var detail = $('.detail', this);
        var w = $(detail).children('.label').width() + parseInt($(detail).css('paddingLeft')) + parseInt($(detail).css('paddingRight')) ;
        var ml = Math.round( w / -2 );
        $(detail).css({ marginLeft: ml+'px' });
    },
    function(){
        $(this).children('.target').children('.detail').stop().animate({opacity: 0, bottom: '-35px'},200);

        $(this).children('.detail').stop().animate({ opacity: 0, bottom: '-35px'},100);
    });

    // Footer Komma
    $('footer .komma').hover(function(){
        $(this).stop().animate({opacity:1},300);
    },
    function(){
        $(this).stop().animate({opacity:0.4},300);
    })
}

/*
    Initialize positioning objects by javascript
 */
function initPositioning()
{
    $('.btnOrange').each(function(){
        if( ! $(this).hasClass('dontCenter'))
        {
            var w = $(this).width();
            var pw = $(this).parent().width();
            var ml = (pw - w) / 2;
            $(this).css({ marginLeft: ml+'px' });
        }
    })
}


function initRouteBtn()
{
    $('#btnPlanRoute').click(function(){
        $(this).stop().animate({ top: '-100px' },400);
        $('#inputPlanRoute').stop().animate({ marginLeft: '-190px', width: '380px', opacity:1 },400);

    })
}

/*
 Initialize Resizing the Images
 */
function initResizeImages()
{
    $('img.resize').each(function()
    {
        $(this).one('load', function() {
            displayImage($(this));
            resizeImage($(this));
        }).each(function() {
            if(this.complete) $(this).load();
        });
    });

    $(window).resize(function(){
        $('img.resize').each(function()
        {
            resizeImage($(this))
        });
    });
}

function resizeImage(img)
{
    var myWidth = $(img).attr('data-width');

    var myHeight = $(img).attr('data-height');
    var parentWidth  = $(img).parent().width();

    if(parentWidth > myWidth)
    {
        var ratio = myWidth/myHeight;
        myWidth = parentWidth;
        myHeight = myWidth/ratio;
        $(img).css({ left: 0, marginLeft: 0, width: myWidth+'px',height: myHeight+'px' });
    }
    else
    {
        var marginLeft = myWidth/-2;
        $(img).css({ left: '50%', marginLeft: marginLeft});

    }
}

function displayImage(img)
{
    var isIE = navigator.userAgent.match(/MSIE/i) != null;
    var version = parseInt(navigator.appVersion,10);
    if(isIE && version < 9)
    {
        $(img).css({ opacity: 1 });
    }
    else
    {
        $(img).stop().animate({ opacity: 1 },1000);
    }

}