$(function() {
    
    var visible = false;
    
    $(window).bind('load resize', function() {
        var windowWidth = (window.innerWidth),
            windowHeight = (window.innerHeight),
            windowProportion = windowWidth / windowHeight,
            origWidth = 1594,
            origHeight = 1072,
            origProportion = origWidth / origHeight,
            proportion = windowHeight / origHeight;
        
        $('#background').css('left', 0);
        
        windowProportion >= origProportion ? proportion = windowWidth / origWidth : $('#background').css('left', -( ((proportion * origWidth) - windowWidth) / 2 ));
        
        document.getElementById('vid').style.width = proportion * origWidth+"px";
        document.getElementById('vid').style.height = proportion * origHeight+"px";
        
        $('#share').css('left', (windowWidth - $('#share').width()) / 2);
    });
    
    $('.container').css('opacity', 0);
    _initTabs('.tabs-wrapper', 1);
    $('.tabs-wrapper').hide();
    $('.sign-up-form, #login').hide();

    $('.container').click(function(e){
        if(visible) {
            visible = false;
            $('.container').animate({opacity: 0}, 150);
            $('.tabs-wrapper').animate({opacity: 0}, 150, function(){$('.tabs-wrapper').hide()});
        } else {
            visible = true;
            $('.container').show().css('opacity', 0).animate({opacity: 1}, 170);
            $('.tabs-wrapper').show().css('opacity', 0).animate({opacity: 1}, 170);
        }
    });
    
    function _initTabs(container, activeIndex) {
        var active = activeIndex ? activeIndex : 1;
        
        $(container).find('ul > li').each(function(){
            if(($(this).index() + 1) == active)
                $(this).addClass('active');
                
            $(this).bind('click', function(e){
                if(!$(e.target).parents('li').hasClass('active')) {
                    var sectionName = $(e.target).parents('li').attr('class');

                    $(e.target).parents('ul').find('li').removeClass('active');
                    $(this).addClass('active');
                    $(container).find('.tab-content > div').each(function(){
                        $(this).attr('id') == sectionName ? $(this).show().css('opacity', 0).animate({opacity: 1}, 150) : $(this).hide();
                    });
                }
                return false;
            });
        });
        
        $(container).find('.tab-content > div').each(function(){
            ($(this).index() + 1) == active ? $(this).addClass('active') : $(this).hide();
        });
    }
    
    $('#play-btn').click(function(){
        $(this).hide();
        $('.sign-up-form').show().css('opacity', 0).animate({opacity: 1}, 250);
        return false;
    });
    
    $('#submit').click(function(){
        //this thing just show error msgs when trying to login
        var $email = $('#login-email'),
            $pass = $('#pass');

        if(!$email.parent('label').find('span').hasClass('error-msg'))
            $email.addClass('error').focus().parent('label').prepend('<span class="error-msg">Not a valid email address</span>');
        if(!$pass.parent('label').find('span').hasClass('error-msg'))
            $pass.addClass('error').parent('label').prepend('<span class="error-msg">At least 6 characters long</span>');

        return false;
    });
});