/**
 * Created by Pascal on 30/09/15.
 */
$(function () {
    $methodActive = 1;
    $maxMethod = $('.steps-info .text-area .slider p').length;
    $stepsLoaded = false;

    $('.start-animation').removeClass('start-animation');

    resizer();

    $(window).resize(function () {

        resizer();
    });


    $('a[href*="#"]:not([href="#"])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: (target.offset().top - 50),
                    easing: "easein"
                }, 1000);
                return false;
            }
        }
    });

    $('.steps-info .navigation .next').click(function () {
        if ($methodActive < $maxMethod) {
            $methodActive++;
        }
        methodAnimation($methodActive, $maxMethod);
    });

    $('.steps-info .navigation .previous').click(function () {
        if ($methodActive > 1) {
            $methodActive--;
        }
        methodAnimation($methodActive, $maxMethod);
    });

    $('.steps .progress-slider .text-holder p').click(function () {
        $slug = $(this).attr('id');
        $id = $slug.substr($slug.length - 1);
        $methodActive = parseInt($id);
        methodAnimation($methodActive, $maxMethod);
    });

    $('#smileyNo').click(function(){
        $methodActive = 1;
        methodAnimation($methodActive, $maxMethod);
    });

    $('#smileyYes').click(function(){
        $methodActive = $maxMethod;
        methodAnimation($methodActive, $maxMethod);
    });

    jQuery.each(jQuery('textarea[data-autoresize]'), function() {  //autosize TextArea
        var offset = this.offsetHeight - this.clientHeight;

        var resizeTextarea = function(el) {
            jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
        };
        jQuery(this).on('keyup input', function() { resizeTextarea(this); }).removeAttr('data-autoresize');
    });


    $(window).scroll(function(){

        //Make sure the steps container is loaded en resized
        if(($stepsLoaded == false) && isElementFullInViewport($('.tetralogy-row .owner'))){
            resizer();
            $stepsLoaded = true;
        }

        if(($stepsLoaded == false) && isElementFullInViewport($('.method-row .steps-info'))){
            resizer();
            $stepsLoaded = true;
        }

        if($('.list-row .first-block .scroll-animation').length && isElementPartInViewport($('.list-row .first-block .scroll-animation'))){
            $('.list-row .first-block .scroll-animation').removeClass('scroll-animation');
        }
        if($('.advise-impression.scroll-animation').length && isElementPartExtraInViewport($('.advise-impression.scroll-animation'), 100)){
            $('.advise-impression.scroll-animation').removeClass('scroll-animation');
        }
        if($('#about.scroll-animation').length && isElementPartExtraInViewport($('#about.scroll-animation'), 100)){
            $('#about.scroll-animation').removeClass('scroll-animation');
        }
        if($('#services.scroll-animation').length && isElementPartExtraInViewport($('#services.scroll-animation'), 100)){
            $('#services.scroll-animation').removeClass('scroll-animation');
        }
        if($('.hans-block.scroll-animation').length && isElementPartExtraInViewport($('.hans-block.scroll-animation'), 100)){
            $('.hans-block.scroll-animation').removeClass('scroll-animation');
        }
    });

});

function resizer() {
    if ($('.intro-row')) {
        $('.intro-row').height(($(window).height() * 0.9));
    }

    if ($('.intro-row.error')) {
        $('.intro-row.error').height(($(window).height()));
    }


    if ($('.tetrablock')) {
        $('.tetrablock').each(function () {
            $(this).height($(this).width() / 4 * 2.5);
        });
    }

    if ($('.owner')) {
        if ($(window).width() < 885) {
            $('.owner').height($('.owner').width() / 4 * 2.5);
        }
        else {
            $('.owner').height($('#about').height());
        }
    }

    if ($('.steps')) {
        $('.steps .progress-slider').height(($('.steps .steps-image').height() - 10));

        $hightest = 0;

        $('.steps-info .text-area p').each(function () {
            if ($(this).height() > $hightest) {
                $hightest = $(this).height();
            }
        });
        $('.steps-info .text-area').height($hightest);
    }

    if($('.services-row .hans-block .owner-image')){
        $('.services-row .hans-block .owner-image').height($('.services-row .hans-block .owner-image').width());
    }
}

function methodAnimation($id, $amountOfSteps) {
    $previous = $('.steps-info .navigation .previous');
    $next = $('.steps-info .navigation .next');
    $sliderName = $('.steps-info .navigation .show ul');
    $sliderText = $('.steps-info .text-area .slider');
    $mainSlider = $('.steps .progress-slider .orange-steps');

    $slideAmount = 120;

    $previous.removeClass('disabled');
    $next.removeClass('disabled');

    if ($id <= 1) {
        $previous.addClass('disabled');
    }
    if ($id >= $amountOfSteps) {
        $next.addClass('disabled')
    }

    $sliderName.css('left', (((($id - 1) * $slideAmount) * -1) + '%'));
    $sliderText.css('left', (((($id - 1) * $slideAmount) * -1) + '%'));

    $('.steps .progress-slider .text-holder p').removeClass('orange');

    for($i =1; $i <= $id; $i++){
        $('.steps .progress-slider .text-holder p#stap-'+$i).addClass('orange');
    }

    switch($id){
        case 2:
            $mainSlider.addClass('state2');
            $mainSlider.removeClass('state3');
            $mainSlider.removeClass('state4');
            $mainSlider.removeClass('state5');
            break;

        case 3:
            $mainSlider.addClass('state3');
            $mainSlider.removeClass('state4');
            $mainSlider.removeClass('state5');
            break;

        case 4:
            $mainSlider.addClass('state4');
            $mainSlider.removeClass('state5');
            break;

        case 5:
            $mainSlider.addClass('state5');
            break;

        default:
            $mainSlider.removeClass('state2');
            $mainSlider.removeClass('state3');
            $mainSlider.removeClass('state4');
    }
}

function isElementFullInViewport(el) {
    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.bottom <= (window.innerHeight || $(window).height())
    );
}

function isElementPartInViewport(el)
{
    //special bonus for those using jQuery
    if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];

    var rect = el.getBoundingClientRect();
    // DOMRect { x: 8, y: 8, width: 100, height: 100, top: 8, right: 108, bottom: 108, left: 8 }
    var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
    var windowWidth = (window.innerWidth || document.documentElement.clientWidth);

    var vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
    var horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);

    return (vertInView && horInView);
}

function isElementPartExtraInViewport(el, margin)
{
    //special bonus for those using jQuery
    if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];

    var rect = el.getBoundingClientRect();
    // DOMRect { x: 8, y: 8, width: 100, height: 100, top: 8, right: 108, bottom: 108, left: 8 }
    var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
    var windowWidth = (window.innerWidth || document.documentElement.clientWidth);

    var vertInView = (rect.top <= (windowHeight - margin)) && ((rect.top + rect.height) >= 0);
    var horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);

    return (vertInView && horInView);
}