/**
 * Define objects
 */
var $ambiance = $('#ambiance');
var $pattern = $('#pattern');
var $submenu = $('#submenu');
var $contentArea = $('#content_area');
var $content = $('#content');
var $sidebar = $('#sidebar');

/**
 * Define global variables
 */

// Timeout after resize
var resizeDone;

/**
 * Call Functions
 */
prepare();
buildTemplate();
adjustAside();

$('#slider').slider(
    {
        nav: '#slider_nav',
        loop : 3000,
        speed : 750
    }
);

$window.resize(onResize);
$window.scroll(onWindowScroll);

initTextFields();

/**
 * define Functions
 */


/*
 * Check for bottom page
 */
var st = $window.scrollTop();
var bottomPage =  $main.height() - ($window.height() - $header.height() - showFooter);
isAtBottom = (st > bottomPage-100); // 100px marge

/*
 * Prepare
 */
function prepare()
{
    // Set mains "auto-height" in the data attribute
    $main.attr('data-height',$main.height() );
}

/*
 * What to do on resize
 */
function onResize()
{
    buildTemplate();

    adjustAside();

    // Disable transitions
    disableTransitions();
    $('#slider').data('slider').adjust();

    clearTimeout(resizeDone);
    resizeDone = setTimeout(afterResize,200);
}

function afterResize()
{
    // Enable transitions
    enableTransitions();
}

/*
 * What to do on scroll
 */
function onWindowScroll()
{
    if( ! isTouch && ! smallView())
    {
        // Scroll main on scroller
        var st = $window.scrollTop();
        var sl = $window.scrollLeft();
        $main.css({ top: -st+'px', left: -sl+'px' });

        // When page reaches the bottom
        var bottomPage =  $main.height() - ($window.height() - $header.height() - showFooter);
        isAtBottom = (st > (bottomPage)); // 100px marge
        if ( ! footerClicked)
        {
            if(isAtBottom)
            {
                // Change height of the footer
                difFooter = st - bottomPage;
                $footer.height(difFooter + showFooter);

                // Footer button
                $footerBtn.css({ bottom: (difFooter + showFooter - 11) + 'px' });

                // Lift the ambiance photo and pattern
                $ambiance.css({ top: (-difFooter + $header.height())+'px' });
                $pattern.css({ top: (-difFooter + $header.height())+'px' });
            }
            else
            {
                // Reset changes
                difFooter = 0;
                $footer.height(showFooter);
                $ambiance.css({ top: $header.height()+'px' });
                $pattern.css({ top: $header.height()+'px' });
                $footerBtn.css({ bottom: '19px' });
            }
        }
    }
}

/*
 * Build template relatively to the browser window
 */
function buildTemplate()
{
    reset();

    if( ! smallView())
    {
        if ( ! isTouch )
        {
            // Make sure main == 100%
            var minH = $window.height() - $header.height() - showFooter;
            if($main.attr('data-height') < minH) $main.height(minH)

            // Make scroller as high as main
            var scrH = $main.height() + $footer.children('.inner').height() + $header.height();
            $scroller.height(scrH);

            // Resize Mask
            var wrH = $window.height() - $header.height() - showFooter; // show 30px from footer
            $wrapper.height(wrH);
        }
        else
        {
            // Make sure main == 100%
            var minH = $window.height() - $footer.height();
            if($main.attr('data-height') < minH) $main.height(minH)
        }

        // Backgrounds
        var ww = 1000; // minimal 1000px
        if($window.width()>1000) ww = $window.width();

        var bgW = (ww - $content.width() - $sidebar.width()) / 2;
        var bgH;
        if( ! isTouch)
        {
            bgH = $window.height() - $footer.height() - $header.height();
        }
        else
        {
            bgH = $window.height() - $header.height();
        }
        if(difFooter != 0) bgH += difFooter;

        $ambiance.css({ width: bgW+'px', height: bgH+'px'});
        $pattern.css({ width: (bgW+$contentArea.width()/2)+'px', height: bgH+'px'});

        // Content Area
        $contentArea.css({ height: $main.height()+'px'});

        // If "middle" view
        var ww = $(window).width();
        // Resize content for small screens
        if(ww <= 1000 && ww > 750)
        {
            var w = ww - $sidebar.width();
            $content.width(w);
        }
        else
        {
            $content.width('');
        }
    }
    else
    {
        $footer.height('auto');
        reset();
    }
}


function disableTransitions()
{
    var $disable = { WebkitTransition : 'none', MozTransition: 'none', MsTransition: 'none', OTransition: 'none', transition: 'none' };
    // Disable transition for content area
    $contentArea.css($disable);
    $content.css($disable);
    $ambiance.css($disable);
    $pattern.css($disable);
    $submenu.css($disable);
}

function enableTransitions()
{
    //  Turn on content area transition
    $contentArea.css({ WebkitTransition: 'width 300ms', MozTransition: 'width 300ms', MsTransition: 'width 300ms', OTransition: 'width 300ms', transition: 'width 300ms' });
    $content.css({  WebkitTransition: 'marginLeft 300ms', MozTransition: 'marginLeft 300ms', MsTransition: 'marginLeft 300ms', OTransition: 'marginLeft 300ms', transition: 'marginLeft 300ms' });
    $ambiance.css({ WebkitTransition: 'left 300ms', MozTransition: 'left 300ms', MsTransition: 'left 300ms', OTransition: 'left 300ms',  transition: 'left 300ms' });
    $pattern.css({ WebkitTransition: 'right 300ms', MozTransition: 'right 300ms', OTransition: 'right 300ms', transition: 'right 300ms' });
    $submenu.css({ WebkitTransition: 'left 300ms', MozTransition: 'left 300ms', MsTransition: 'left 300ms', OTransition: 'left 300ms', transition: 'left 300ms' });
}


function reset()
{
    // Reset values
    $main.height('auto');
    // $main.css('top',0);
    $scroller.height('auto');
    $wrapper.height('auto');
    $contentArea.height('auto');
    $content.width('');
}

function adjustAside()
{
    var $image = $('#ambiance img');
    var $parent = $image.parent();

    // When image loaded
    $image.one('load', function() {

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

        // Define variables
        var imgH, imgW, ml ,mt, l, t;

        if(imgRatio > pRatio)
        {
            // Image height equal to parent height
            imgH = $parent.height();
            imgW = imgH * imgRatio;
            ml = imgW / -2;
            mt = 0;
            l = '50%';
            t = 0;
        }
        else
        {
            // Image width equal to parent width
            imgW = $parent.width();
            imgH = imgW / imgRatio;
            ml = 0;
            mt = imgH / -2;
            l = 0;
            t = '50%';
        }


        // Set margin
        $image.css({ top: t, left: l, width: imgW+'px', height: imgH+'px', marginTop: mt, marginLeft: ml})


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



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

    $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);
            }
        }
    );

    // Custom select fields
    $('.customSelectOpen').parent().addClass('focus');

}