var globalCount = 0;

var globalState = 'menu_open';
if(msieversion()) {
    $(document).bind('mousemove', function(e) {
        var el = $(e.target).parent().parent().parent().parent().get(0).tagName;
        if(el != 'NAV') globalState = 'menu_closed';
        $(document).unbind('mousemove');
    });
}

var stateChange;
// TODO Check for jQuery

if( ! msieversion())
{
    stateChange = new CustomEvent('state_change', { state : 'menu_closed' });
}
else
{
    stateChange = new jQuery.Event('state_change');
}
var menuHoverTimeout;

if($('body').attr('id') == 'home')
{
    // TODO Check for jQuery
    setState('home');
}

$(document).ready(function(){
    $('#content').addClass('animate');
    fadeIn(0);
    fadeInnerIn(0);
});

/**
 * Created by mike on 19/09/14.
 */
var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion));
var ipadIOS7 = (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i));
var myDown = isIOS ? "touchstart" : "mousedown";
var refresh = true;
var isTouch = $('html.touch').size();

initSVGAnimation();
handleAside();


/*
 * Initialize javascript
 */
function init()
{
    // Methods
    mainStructure();
    resizeAside();
    setBorderHeight();
    initSlider();
    initBackgrounds();
    initDirectContact();

    if($('form').size())
    {
        initTextFields();
        spamCheck();
    }

    // Listeners
    $(window).resize(function()
    {
        mainStructure();
        resizeAside();
        setBorderHeight();
        // resizeContentBg();
        resizeSwiperImg($('#small-container'));
        resizeSwiperImg($('#enlarged-container'));
    });

    if( ! refresh) $('a.dynamic[data-rel="ajax"]').bind('click',{ }, prepareAjax);
    refresh = false;
}

/**
 * History JS
 * If a link has rel "ajax", load content in the #content div.
 * Else load it as a normal page
 */
$('a[data-rel="ajax"]').bind('click',{ }, prepareAjax);

function prepareAjax(e)
{
    if( ! msieversion() )
    {
        if ($('#main_nav').hasClass('disabled')) {
            e.preventDefault();
        }
        else {
            //get the link location that was clicked
            var pageUrl = $(this).attr('href');
            var newId = $(this).attr('data-id');

            //to get the ajax content and display in div with id 'content'
            loadPage(pageUrl, newId);

            // Switch active
            var mainPages = ['home','about','products','workflow','machines','references','contact'];
            var isMainPage = false;
            for(var key in mainPages)
            {
                if(newId == mainPages[key]) isMainPage = true;
            }
            if( ! isMainPage) $('.active, #main_menu').removeClass('active');

            if($(this).parent().parent().parent().attr('id') == 'main_nav')
            {
                $('.active, #main_menu').removeClass('active');
                $(this).parent().addClass('active');
            }

            //to change the browser URL to the given link location
            if (pageUrl != window.location) {
                window.history.pushState({path: pageUrl}, '', pageUrl);
            }
        }

        //stop refreshing to the page given in
        return false;
    }
};

// The below code is to override back button to get the ajax content without page reload
$(window).bind('popstate', function() {
    loadPage(location.pathname);
});

// Load new content
function loadPage(root, newId)
{
    // Objects
    var $body = $('body');
    var $content = $('#content');

    // TODO Check for jQuery
    root == '/' ? setState('home') : setState('menu_closed');

    if( ! Modernizr.touch)
    {
        // Set timer to re-activate menu_open
        $('#main_nav li').unbind('mouseenter');
        clearTimeout(menuHoverTimeout);
        menuHoverTimeout = setTimeout(function(){
            if(newId != 'home')
            {
                $('#main_nav li:not(.active)').bind('mouseenter', openAside);
            }
        },1000);
    }

    newId != $body.attr('id') ? fadeOut() : fadeInnerOut();

    setTimeout(function(){
        // Ajax call
        $.ajax({
            url:root+'?rel=ajax',
            success: function(data){
                // New body
                $body.attr('id',newId);

                // Handle success
                $content.html(data);
                loadContentBackground(newId);

                // Set document title
                var title = $('#page_title').html();
                document.title = title;

                ga('send', 'pageview', {
                    'page': root,
                    'title': title
                });

                // Submenu
                var $a = $('.submenu a[href="' + root + '"]');
                if($a.parent().parent().attr('class') == 'submenu') $a.parent().addClass('active');

                // Start at top of the page
                $('body,html').scrollTop(0);

                if(newId != $body.attr('id'))
                {
                    fadeInnerIn(0);
                    fadeIn(1);
                }
                else
                {
                    fadeInnerIn(1);
                    fadeIn(0);
                }
                // (re)Initialize javascript
                init();
            }
        });
    },400);
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                                    //
//  S T A T E S                                                                                                       //
//                                                                                                                    //
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/**
 * Handle aside menu hovering
 */
function handleAside()
{
    var $nav = $('#main_nav');

    // Move content to the right when hovering the main menu
    if( ! Modernizr.touch) $nav.hover(openAside,closeAside);

    // Button
    $('.open_nav').bind(myDown,function()
    {
        // TODO Check for jQuery
        getState() == 'menu_closed' ? openAside() : closeAside();
    });

    $('#tablet_nav_blocker').bind('touchend',function()
    {
        var $t = $(this);
        $t.addClass('about_to_open');
        setTimeout(function(){
            // TODO Check for jQuery
            setState('menu_open');
            $t.removeClass('about_to_open');
        },400);
    });
}

/**
 * Open Aside
 */
function openAside()
{
    // TODO Check for jQuery
    if(getState() != 'home')
    {
        setState('menu_open');
    }
}

/**
 * Close Aside
 */
function closeAside()
{
    // TODO Check for jQuery
    if(getState() != 'home')
    {
        setState('menu_closed');
    }
}

/**
 * Handle aside menu size
 */
function resizeAside()
{
    // List object
    var $li = $('li','#main_nav');

    // Total height
    var wH = $(window).height();
    if(ipadIOS7) wH -= 20;

    // Margin on the top
    var firstLi = $li.eq(0);
    var topH = Math.floor(firstLi.offset().top);

    // Calculate list height
    var liH = Math.floor((wH - topH) / $li.size());

    // Limit
    if(liH < 60) liH = 60;
    $li.css({ height: liH+'px', lineHeight: liH+'px'});
}

// TODO Check for jQuery
function setState(state)
{
    var availableStates = ['home','menu_open','menu_closed'];
    var $body = $('body');

    if(getState() != state)
    {
        // Remove all states
        for(var key in availableStates)
        {
            $body.removeClass(availableStates[key]);
        }

        // Add new state
        $body.addClass(state);

        // TODO Check for jQuery
        // Dispatch event
        if( ! msieversion())
        {
            stateChange.state = state;
            document.dispatchEvent(stateChange);
        }
        else {
            globalState = state
            $(document).trigger('stateChange', {state: state});
        }
    }
}

// TODO Check for jQuery
function getState()
{
    if( ! msieversion()) {
        return stateChange.state;
    }
    else
    {
        return globalState
    }
}


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                                    //
//  C O N T E N T   B L O C K                                                                                         //
//                                                                                                                    //
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


/**
 * Resize main structure
 */
function mainStructure()
{
    var $content = $('#content');
    $content.css('min-height',$(window).height());
}

/**
 * Position inner content block
 */
function setBorderHeight()
{
    // Define objects
    var $border = $('#content').children('.container').children('.border');
    var padding = parseInt($('.container').css('paddingTop'));

    var newHeight = $(window).height() - 2 * padding;
    if(ipadIOS7) newHeight -= 20;
    $border.css('min-height',newHeight);
}


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                                    //
//  B A C K G R O U N D S                                                                                             //
//                                                                                                                    //
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/**
 * Hover on background
 */
function initBackgrounds()
{
    // Set menu background
    var id = $('body').attr('id');
    loadMenuBackground(id);

    // Set content background
    if( id  != 'home') loadContentBackground(id);

    // Hover on menu
    if( ! Modernizr.touch)
    {
        $('#main_nav ul li').hover(function(){
            var id = $(this).children('a').attr('data-id');
            loadMenuBackground(id);
        },function()
        {
            var id = $('body').attr('id');
            loadMenuBackground(id);
        });
    }
}

function loadMenuBackground(id)
{
    $('#nav_bg').css({ backgroundImage: 'url(\'/public/images/static/menu/menu_' + id + '.jpg\')' })
}

function loadContentBackground(id)
{
    $('#content').css({
        backgroundImage: 'url(\'/public/images/static/menu/content_' + id + '.jpg\')',
        backgroundPosition: '0 0'
    })
}


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                                    //
//  S L I D E R                                                                                                       //
//                                                                                                                    //
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// Initialise Slider
function initSlider()
{
    var $container = $('#small-container');

    // Initialize small
    $('img',$container).one('load',function()
    {
        var num = $container.children('.swiper-wrapper').children().size();
        if(num > 1)
        {
            var swiper = $container.swiper({
                mode:'horizontal',
                grabCursor: true,
                pagination: '#small-pagination',
                paginationClickable: true,
                onSwiperCreated: function()
                {
                    displaySlides($container);
                },
                onSlideChangeStart: function()
                {
                    updatePagination($('#small-pagination'), swiper);
                }
            });
        }
        else
        {
            displaySlides($container);

        }
    }).each(function(){
        if(this.complete) $(this).load();
    })

    // Show gallery
    $('.enlarge_swiper').click(loadGallery);

    // Close gallery
    $('.close_enlarged').click(closeGallery);
}

// Load large files
function loadGallery()
{
    // Objects
    var $wrapper = $('#enlarged-wrapper');
    var $gallery = $('#gallery');

    // Properties
    var page = $('body').attr('id');
    var sub = $(this).attr('data-item');

    // Check if already loaded
    var currentHTML = $wrapper.html();
    currentHTML = currentHTML.trim();
    if(currentHTML == '<!-- Ajax -->')
    {
        // Make ajax call to load images
        $.ajax({
            type: 'POST',
            url: '/xhr/xhrGetImages/?page=' + page + '&sub=' + sub,
            success: function( data ) {
                $wrapper.html(data);
                initGallery();
            }
        });
    }
    else
    {
        $gallery.css({ display: 'block' });
        $('body').css({ overflow: 'hidden' });
    }
}

// Display large gallery after loading the images
function initGallery()
{
    var $container = $('#enlarged-container');

    // Display gallery
    $('#gallery').css({ display: 'block' });
    $('body').css({ overflow: 'hidden' });

    $('img',$container).one('load',function()
    {
        var num = $container.children('.swiper-wrapper').children().size();
        if(num > 1) {
            // Initialize swiper
            var swiper = $('#enlarged-container').swiper({
                mode: 'horizontal',
                grabCursor: true,
                pagination: '#enlarged-pagination',
                paginationClickable: true,
                onSwiperCreated: function () {
                    displaySlides($container);
                    setTimeout(function(){
                        initGalleryControls(swiper);
                        checkGalleryControls($container, swiper);
                    },50);
                },
                onSlideChangeStart: function()
                {
                    updatePagination($('#enlarged-pagination'), swiper);
                    checkGalleryControls($container, swiper);
                }
            });
        }
        else
        {
            displaySlides($container);
            checkGalleryControls($container, null);
        }
    }).each(function(){
        if(this.complete) $(this).load();
    })
}

// Resize slide en set opacity to 1
function displaySlides($container)
{
    resizeSwiperImg($container);
    setTimeout(function(){ $container.animate({ opacity: 1 },200); },50);
}

// Initialise gallery controls
function initGalleryControls(swiper)
{
    var $next = $('.clicker.right');
    var $prev = $('.clicker.left');
    $next.click(function() { swiper.swipeNext(); })
    $prev.click(function() { swiper.swipePrev(); })

    if( ! Modernizr.touch)
    {
        // Gradient on both clickers
        $('.clicker').hover(
            function(){
                $(this).children('.gradient').stop().animate({ opacity :.6},300);
            },
            function(){
                $(this).children('.gradient').stop().animate({ opacity : 0},300);
            }
        );

        // Arrow on right clicker
        $next.hover(
            function(){
                $(this).children('.arrow').stop().animate({ right : '4%' },300);
            },
            function(){
                $(this).children('.arrow').stop().animate({ right : '8%'},300);
            }
        );

        // Arrow on left clicker
        $prev.hover(
            function(){
                $(this).children('.arrow').stop().animate({ left : '4%' },300);
            },
            function(){
                $(this).children('.arrow').stop().animate({ left : '8%'},300);
            }
        );
    }
}

// To display or not to display the controls
function checkGalleryControls($container, swiper)
{
    if(swiper != null && ! isTouch)
    {
        var index = swiper.activeIndex;
        var num = $container.children('.swiper-wrapper').children().size();

        if(index == 0){ $('.clicker.left').css('display','none'); }else{ $('.clicker.left').css('display','block'); }
        if(index == num - 1){ $('.clicker.right').css('display','none'); }else{ $('.clicker.right').css('display','block'); }
    }
    else
    {
        $('.clicker.left').css('display','none');
        $('.clicker.right').css('display','none');
    }
}

// Resize all images to full-screen
function resizeSwiperImg($container)
{
    var $image = $('img',$container);
    var $parent = $image.parent().parent().parent(); // Image . Slide . Wrapper . Container

    var iRatio = $image.width() / $image.height();
    var pRatio = $parent.width() / $parent.height();

    // New width
    var w,h;
    if(iRatio > pRatio)
    {
        h = $parent.height();
        w = h * iRatio;
    }
    else
    {
        w = $parent.width();
        h = w / iRatio;
    }
    $image.css({width: w+'px', height: h+'px' });
}

// Set display to none
function closeGallery()
{
    $('#gallery').css({ display: 'none' });
    $('#enlarged-wrapper').html('<!-- Ajax -->');
    $('body').css({ overflow: 'auto' });
}

// Update pagination
function updatePagination($pagination, $swiper)
{
    // Remove active
    $('.swiper-active-switch',$pagination).removeClass('swiper-active-switch');
    $pagination.children().eq($swiper.activeIndex).addClass('swiper-active-switch');
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                                    //
//  F O R M                                                                                                           //
//                                                                                                                    //
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


/**
 * Add a hidden field to the form, PHP checks if this field is set.
 * This works assuming that SPAM bots do not add the hidden field.
 */
function spamCheck()
{
    var $form = $('form.spam_check');
    if($form.size()){
        $('<input type="hidden" />').attr({ name: 'secret_code', id: 'secret_code', value: 'spam_check_komma' }).appendTo($form);
    }
}

/**
 * Initialize text fields
 */
function initTextFields()
{
    // Text field
    var $textField = $('input[type=text], textarea');

    if( ! isIphone())
    {
        // Set focus when click on placeholder
        $textField.siblings('.placeholder').click(function()
        {
            $(this).siblings('input').focus();
            $(this).siblings('textarea').focus();
        });

        // Check starting values
        $textField.each(function(){
            if($(this).val() != '')
            {
                $(this).parent().children('.placeholder').html('');
            }
        });

        // On focus
        $textField.focus(function()
            {
                // Focus
                $(this).parent().addClass('focus');
            }
        ).keydown(function()
            {
                // Empty placeholder
                $(this).parent().children('.placeholder').html('');
            }
        );
        $textField.blur(
            function()
            {
                // Blur
                $(this).parent().removeClass('focus');

                // Restore placeholder if field is empty
                var label = $(this).attr('data-label');
                if($(this).val()=="")
                {
                    $(this).parent().children('.placeholder').html(label);
                }
            }
        );
    }
    else
    {
        $textField.parent().children('.placeholder').html('');
    }
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                                    //
//  D I R E C T   C O N T A C T                                                                                       //
//                                                                                                                    //
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function initDirectContact()
{
    var $dc = $('#direct_contact');

    $('#activate_dc').click(function()
    {
        if($dc.css('display') == 'none')
        {
            openDirectContact($dc)
        }
        else
        {
            closeDirectContact($dc);
        }
    })
    $('#hide_dc').click(function()
    {
        closeDirectContact($dc)
    })
}

function openDirectContact($dc)
{
    $dc.css({ display: 'block' });
    $dc.stop().animate({ opacity : 1, right: '2em' },300)
}

function closeDirectContact($dc)
{
    $dc.stop().animate({ opacity : 0, right: '1em' },300,function()
    {
        $dc.css({ display: 'none' });
    })
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                                    //
//  E F F E C T S                                                                                                     //
//                                                                                                                    //
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


function initSVGAnimation()
{
    var theIcon = new svgIcon( document.querySelector( '.open_nav' ), svgIconConfig, {
        easing : mina.out,
        speed: 200,
        onLoad : function() {
            // TODO Check for jQuery
            if( ! msieversion()) {
                document.addEventListener('state_change', function (e) {
                    if (e.state == 'menu_open') {
                        theIcon.toState(0);
                    }
                    else {
                        theIcon.toState(1);
                    }
                });
            }
        },
        viewbox: '0 0 40 40'
    } );

    svgIcon.prototype.toggle = function(){}
}


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                                    //
//  M O B I L E                                                                                                       //
//                                                                                                                    //
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/**
 * Detect iPhone
 */
function isIphone()
{
    //return ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) );
    return ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)));
}


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                                    //
//  I N I T                                                                                                           //
//  Call init function                                                                                                //
//                                                                                                                    //
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

if( ! isIOS) init();

function fadeIn(animate)
{
    if(animate) $('.fade').addClass('animate')
    $('.fade').addClass('in');
}

function fadeOut()
{
    $('.fade').addClass('animate').removeClass('in');
}
function fadeInnerIn(animate)
{
    if(animate) $('.fade_inner').addClass('animate')
    $('.fade_inner').addClass('in');
}
function fadeInnerOut()
{
    $('.fade_inner').addClass('animate').removeClass('in');
}

function msieversion() {

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0
        || !!navigator.userAgent.match(/Trident.*rv\:11\./)
        || ( !(window.ActiveXObject) && "ActiveXObject" in window ) // IE 11 detection
    )      // If Internet Explorer, return version number
        //return(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
        return 'ie!'
    else                 // If another browser, return 0
        return false;

    return false;
}