var isTouch = $('html.touch').size();
var count;
var resizeHold;
var firstTime = true;

$(document).ready(function(){
   $('.load_transitions').removeClass('load_transitions');
});

/**
 * Initialize page
 * Called at start and after page load in function "loadPage"
 */

function init()
{
    count = 50;
    initHistoryJs(firstTime);
    firstTime = false;

    // Basics
    preloadImages();
    spamCheck();
    initTextFields();

    // Google maps
    if( ! isTouch) initMaps();

    // Overview btn on product page
    $('.overview').click(function(e){
        if($(this).hasClass('disabled')) e.preventDefault();
    });

    // Aside menu
    updateOffset();
    addAsideListener();
    if( isTouch) initAsideSlider();

    // Extras
    initNewsHolder();
    if( ! isTouch) initBanners();

    $(window).on('scroll',function()
    {
        updateOffset();
        if( ! isTouch) initBanners();
    });

    // Set scroll on h1,h2
    $('h1,h2').each(function(){
        var $t = $(this);

        if( ! isTouch) initHeadings($t);
        $(window).on('scroll',function()
        {
            if( ! isTouch)initHeadings($t);
        });
    });

    fitImage();
   $(window).resize(function(){
       fitImage();

       // on end resize
       clearTimeout(resizeHold);
       resizeHold = setTimeout(doneResizing, 500);
   });

    if($('.custom').size())
    {
        $('.custom').customSelect();
    }

}
function doneResizing()
{
    // on end resize
}


/**
 * History JS
 * If a link has rel "ajax", load content in the #content div.
 * Else load it as a normal page
 */
function initHistoryJs(firstTimeOnly)
{
    if( ! isTouch)
    {
        // Prevent links from loading twice
        var linkString = 'a[data-rel="ajax"]';

        var notClasses = [];
        if( ! firstTimeOnly ) notClasses.push('.first-time-only');

        if(notClasses.length)
        {
            linkString += ':not(';
            for (var i in notClasses)
            {
                if(i > 0) linkString += ','
                linkString += notClasses[i];
            }

            linkString += ')';
        }

        $(linkString).click(function(e){
            //e.preventDefault();

            // if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
            // if commented, html5 nonsupported browers will reload the page to the specified link.

            //get the link location that was clicked
            var pageUrl = $(this).attr('href');

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

            //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() {
            var pathName = location.pathname;
            if(pathName !== '/vacatures') loadPage(pathName);
        });
    }
}


function loadPage(root)
{
    var $content = $('#content');
    var $loader = $('#loader');
    var $body = $('body');

    // Get old id
    var oldId = $body.attr('id');

    // Get new id
    var newId = 'home';
    var temp = root.split('/');
    var slugPage = temp[1];
    var slugSub = temp[2];

    $.getJSON('/json/routes.json?v=2', function(obj) {

        var jsonObj;
        // Get Data
        for (var i=0 ; i < obj.routes.length ; i++)
        {
            if (obj.routes[i]['slug'] == slugPage) {
                jsonObj = obj.routes[i];
            }
        }
        // Set Id
        newId = jsonObj.id;

        // Update main menu
        updateMainMenu(newId);

        // Set parent as default to child object
        var child = jsonObj;

        // Does this new page has children?
        if(jsonObj.hasOwnProperty('children'))
        {
            // Loop through children
            for (var i=0 ; i < jsonObj.children.length ; i++)
            {
                if (jsonObj.children[i]['slug'] == slugSub) {
                    child = jsonObj.children[i];
                }
            }

            // Update submenu
            // console.log(child);
            updateSubMenu(child.slug);
            updateOverviewBtn(child.slug);
        }

        // Update breadcrumb
        updateBreadcrumb(jsonObj,child);
        var title = updateTitle(jsonObj,child);

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

        // Show loader
        $loader.stop().animate({ opacity: 1 },300);

        // Fade out page
        $content.stop().animate({ opacity: 0, top: '-300px' },500,function()
        {
            // Set new id to the body
            $body.attr('id',newId);

            // Make ajax call
            $.ajax({
                url:root+'?rel=ajax',
                success: function(data){
                    $content.html(data);

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

                    // Close navigation if necessary
                    $body.removeClass('open_nav');
                    $content.css({ top: 0 });


                    // Re-initialise javascript functionality
                    init();

                    // Show content
                    setTimeout(function(){
                        // Show content
                        $content.stop().animate({ opacity: 1 },500);
                        $loader.stop().animate({ opacity: 0 },300);
                    },200);
                }
            });
        });
    });
}

/**
 * Update the main menu active state
 */
function updateMainMenu(targetId)
{
    var $currentActive = $('#main_nav .active');
    var $targetActive = $('li[data-target="' + targetId + '"]');
    var currentIndex = $currentActive.index();
    var targetIndex = $targetActive.index();

    // Animate
    if(targetIndex > currentIndex)
    {
        $currentActive.children('.bg').css({ top: 'auto', bottom: 0 });
        $targetActive.children('.bg').css({ top: 0, bottom: 'auto' });
    }
    else
    {
        $currentActive.children('.bg').css({ top: 0, bottom: 'auto' });
        $targetActive.children('.bg').css({ top: 'auto', bottom: 0 });
    }

    // Add class
    $currentActive.removeClass('active');
    $targetActive.addClass('active');
}

/**
 * Update the products menu active state
 */
function updateSubMenu(targetId)
{
    // temp
    $('.products li.active').removeClass('active');
    $('li[data-target="' + targetId + '"]').addClass('active');
}

/**
 * Preload images
 */
function preloadImages()
{
    $('img').one('load',function(){
        $('img').css({ opacity: 1 });
    }).each(function() {
        if(this.complete) $(this).load();
    });
}

/**
 * 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],input[type=email], 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('');
    }
}

/**
 * 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)));
}

/**
 * Init Maps
 */
function initMaps()
{
    if($('.maps_holder').size())
    {
        // Initialize maps
        initialize();
    }
    // Show / hide maps on click
    $('.maps_clicker').click(function(){
        google.maps.event.addDomListener(window, 'load', initialize);
        $('.maps_holder').toggleClass('show');
    });
}

function fitImage()
{

    calcHeightsEmployees();

    $('.resize').children('img').one('load',function()
    {
        var $img = $(this);
        var $listener = $img.parent().parent().siblings('.listener');
        var parentH = $listener.height();
        var imgW = $img.width();
        var imgH = $img.height();
        var imgRatio = imgW / imgH;

            $img.height(parentH);
            $img.width(parentH * imgRatio);
    }).each(function() {
        if(this.complete) $(this).load();
    });
}

function updateOverviewBtn(productId){
    var $overviewBtn = $('.overview');
    if(typeof productId != 'undefined' && productId != '')
    {
        $overviewBtn.removeClass('disabled');
    }
    else
    {
        $overviewBtn.addClass('disabled');
    }
}

function updateBreadcrumb(data, child)
{
    var $breadcrumb = $('.breadcrumb');

    // Set output
    var output = '<span class="holder new" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
        output += '<a href="/' + data.slug + '" itemprop="url">';
        output += '<span class="double-arrow bc"></span>';
        output += '<span itemprop="title">' + data.label + '</span>';
        output += '</a>';
    // if children
    if( child.slug != data.slug) // default child = data
    {
        output += ' <span class="double-arrow bc"></span> ';
        output += '<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
        output += '<a href="/' + data.slug + '/' + child.slug + '" itemprop="url">';
        output += '<span itemprop="title">' + child.label + '</span>';
        output += '</a>';
        output += '</span>';
    }
    output += '</span>';

    $breadcrumb.append(output)
     setTimeout(function(){
         $breadcrumb.children('.current').addClass('hide').removeClass('current');
         $breadcrumb.children('.new').addClass('current').removeClass('new');
     },150);
     setTimeout(function(){  $breadcrumb.children('.hide').remove(); },400);
}


function updateTitle(data, child)
{
    var siteName = 'Van Deurzen Heftrucks Budel - Verkoop, verhuur, reparatie en onderhoud';

    var title = '';
    if( child.slug != data.slug) title += child.label + ' | ';
    if( child.label != 'home') title += data.label + ' | ';
    title += siteName;

    document.title = title;

    return title
}
/**
 * Init
 */
init();