// Objects
var $slHeader = $('#header_slider');

// Properties
var wSize = { w : $(window).width(), h : $(window).height() };
var menuAni = false;
var isTouch = $('html.touch').size();

// Methods
handleHeader(wSize);
initSliders();
initMenu();
updateMenuColor();
updateMenuActive();
initGallery();
updateOffset();
handleArrows();

// Event listeners
$(window).resize(onResize);
$(window).scroll(onScroll);


/**
 * Handle window resize;
 */
function onResize()
{
    // Properties
    var wSize = { w : $(window).width(), h : $(window).height() };

    // Methods
    handleHeader(wSize);

    // Resize sliders
    $slHeader.data('slider').adjust();

    updateMenuColor();

}

/**
 * Handle window scroll;
 */
function onScroll()
{
    if( ! isTouch ) initBanners();
    updateOffset();
    updateMenuColor();
    updateMenuActive();
    closeMainMenu();
}

/**
 * Handle header size
 */
function handleHeader(wSize)
{
    var $header = $('#header');
    $header.height(wSize.h);
}

/**
 * Initialise Sliders
 */
function initSliders()
{
    // Initialise
    $slHeader.slider({ loop: 3000 });

    // Navigation
    var $nvHeader = $('#slider_nav');
    $nvHeader.children('.next').on('click',function()
    {
        $slHeader.data('slider').pause();
        $slHeader.data('slider').next();
    });
    $nvHeader.children('.prev').on('click',function()
    {
        $slHeader.data('slider').pause();
        $slHeader.data('slider').prev();
    });
}

/**
 * Parallax top banner
 */
function initBanners()
{
    var $banner = $('.slider');
    var st = $(window).scrollTop();

    if(st > $('#header').height()){
        $slHeader.data('slider').pause();
        $banner.css({ display: 'none' });
    }
    else{
        $banner.css({ display: 'block' });
        var y = st * 0.6;
        transform($banner,'translateY(' + y + 'px)')
    }
}



/**
 * Initialise Gallery
 */
function initGallery()
{
    var $b = $('body');
    var $g = $('#gallery');
    var $wr = $('#wrapper');
    var y = 0;
    var $slGallery = $g.children('ul');

    // Clicks
    $('.open_gallery').children('li').on('click',function()
    {
        if( ! $b.hasClass('gallery_opened'))
        {
            // Open Gallery
            $b.addClass('gallery_opened');
            setTimeout(function(){ $g.addClass('open'); },20);

            // Fix window
            y = $wr.attr('data-y');
            transform($wr, 'translateY(-' + y + 'px)');

            // Init Slider
            var string = $(this).attr('data-string');
            $slGallery.slider({
                loop: 3000,
                imageString: string,
                fitCanvas: true
            });
        }
    });

    // Navigation
    var $nvGallery = $('#gallery_nav');
    $nvGallery.children('.next').click(function()
    {
        $slGallery.data('slider').pause();
        $slGallery.data('slider').next();
    });
    $nvGallery.children('.prev').click(function()
    {
        $slGallery.data('slider').pause();
        $slGallery.data('slider').prev();
    });

    // Keyboard navigation
    $(document).keydown(function(e) {
        if( $b.hasClass('gallery_opened'))
        {
            switch (e.keyCode)
            {
                case 37: // Left
                case 38: // Up
                    $slGallery.data('slider').pause();
                    $slGallery.data('slider').prev()
                    break;
                case 39: // right
                case 40: // Down
                    $slGallery.data('slider').pause();
                    $slGallery.data('slider').next()
                    break;
                case 27: // Escape
                    closeGallery(y);
                    break;
            }
        }
    });

    // Close gallery
    $g.children('nav').click(function(e){
        var el = e.target.tagName.toLowerCase();
        if(el == 'nav') // not img
        {
            closeGallery(y);
        }
    });

    $g.children('ul').click(function(e){
        var el = e.target.tagName.toLowerCase();
        if(el == 'figure') // not img
        {
            closeGallery(y);
        }
    });

    $g.click(function(e){
        var el = e.target.tagName.toLowerCase();
        if(el == 'div') // not img
        {
            closeGallery(y);
        }
    });

    $g.children('.close').click(function(){
        closeGallery(y);
    });
}

function closeGallery(y)
{
    var $b = $('body');
    var $g = $('#gallery');
    var $wr = $('#wrapper');

    $g.removeClass('open');

    setTimeout(function()
    {
        // Remove classes
        $b.removeClass('gallery_opened');

        // Set correct offset / scroll
        $(document).scrollTop(y);
        transform($wr, '');

        // Stop gallery
        $g.children('ul').data('slider').pause();
        $g.children('ul').removeData();

        // Clear UL
        $g.children('ul').children('li').remove();
    },400);
}

/**
 * Set the open / close function
 */
function initMenu()
{
    // Prepare
    var $mask = $('#mask');
    var h = $mask.children('.inner').height();
    $mask.attr('data-h',h);
    $mask.height(h);

    // Set toggle open / close
    $('#main_menu').click(function()
    {
        if($mask.height() > 0){ closeMainMenu(); }else{ openMainMenu(); }
    });

    // Scroll to pages
    $mask.children('.inner').children('li').click(function(){
        // Scroll
        var page = $(this).attr('data-page');
        var target = $('#'+page).offset().top;
        $('html,body').stop().animate({ scrollTop: target });

        // Switch active
        $('.active').removeClass('active');
        $(this).addClass('active');
    });
}

function openMainMenu()
{
    var $mask = $('#mask');
    $mask.height($mask.attr('data-h'));
}
function closeMainMenu()
{
    if( ! menuAni)
    {
        setTimeout(function(){ menuAni = false },400);
        $('#mask').height(0);
    }
    menuAni = true;
}

/**
 * Update active state
 */
function updateMenuActive()
{
    var st = $(this).scrollTop();
    var $list =  $('#mask').children('.inner');

    if(st > $('#about').offset().top && st < $('#products').offset().top)
    {
        $('.active').removeClass('active');
        $list.children('li[data-page="about"]').addClass('active');
    }
    else if(st > $('#products').offset().top && st < $('#references').offset().top)
    {
        $('.active').removeClass('active');
        $list.children('li[data-page="products"]').addClass('active');
    }
    else if(st > $('#references').offset().top && st < $('#contact').offset().top)
    {
        $('.active').removeClass('active');
        $list.children('li[data-page="references"]').addClass('active');
    }
    else if(st > $('#contact').offset().top )
    {
        $('.active').removeClass('active');
        $list.children('li[data-page="contact"]').addClass('active');
    }
    else
    {
        $('.active').removeClass('active');
        $list.children('li[data-page="header"]').addClass('active');
    }
}




/**
 * Check whether the menu should be blue or white
 */
function updateMenuColor()
{
    var st = $(this).scrollTop();
    var $menu = $('#main_menu');

    // Manipulate
    st = st + 40;

    if(st > $('#logo_bar').offset().top && st < $('#products').offset().top)
    {
        if( ! $menu.hasClass('blue'))
        {
            $menu.addClass('blue');
        }
    }
    else if(st > $('#products').offset().top && st < $('#references').offset().top)
    {
        $menu.removeClass('blue');
    }
    else if(st > $('#references').offset().top)
    {
        if( ! $menu.hasClass('blue'))
        {
            $menu.addClass('blue');
        }
    }
    else
    {
        $menu.removeClass('blue');
    }
}

/**
 * Update content offset on scroll
 * So we can change the offset when position is fixed
 */
function updateOffset()
{
    var st = $(this).scrollTop();
    $('#wrapper').attr('data-y',st);
}

/**
 * Transform
 * @param $obj
 * @param string
 */
function transform($obj,string)
{
    $obj.css({
        transform: string,
        MozTransform: string,
        WebkitTransform: string,
        msTransform: string
    });
}


function handleArrows()
{
    $('#to_about').click(function(){
        var to = $('#about').offset().top;
        $('body,html').stop().animate({ scrollTop: to+'px' });
    });

    $('#to_products').click(function(){
        var to = $('#products').offset().top;
        $('body,html').stop().animate({ scrollTop: to+'px' });
    });
}