/*
 *
 * habana JS for a no-scroll experience 
 * 
 * stage areas we'll need most: 
 *
 * ul#navigation
 * div#decoration-left
 * body#categories div#stage
 * div#decoration-bottom
 *
 */

var habanaEXP = function(settings) {
    
    var $stage               = $('#stage'),
        $stage_wrap          = $('.stage-wrap'),
        $decoration_left     = $('#decoration-left'),
        $decoration_bottom   = $('#decoration-bottom'),
        $promenade           = $('#promenade');
    
    var speed = 600,
    is_mobile = isMobile(),
    adjust_layout = function () {
        
        var scroll = calc_scroll();
        var bounds = calc_screen_bounds();
        if (is_mobile) {
            $footer.css('top', scroll.y + bounds.h - 20 + 'px');
        }
        $stage_wrap.height(scroll.y + bounds.h);
        $decoration_left.css({'height': scroll.y + bounds.h - 100 + 'px'});
        
        // fit to width or enable x-scroll
        var mainContentWidth = 996, leftDecorMaxWidth = 100, stagePadding = 4,
            fullMaxWidth = mainContentWidth + leftDecorMaxWidth + stagePadding;
        
        if (!is_mobile || !Android || !iPhone) {
            // Case 1: screen is wide enough, disable x-scroll
            if (bounds.w > fullMaxWidth) {
                $('body').css('overflow-x', 'hidden');
                $decoration_left.width(leftDecorMaxWidth);
                $stage.css('padding-left', stagePadding + leftDecorMaxWidth + 'px');
                $stage_wrap.width(bounds.w);
                $decoration_bottom.css('left', leftDecorMaxWidth + 'px');
                $decoration_bottom.css({'width': bounds.w - leftDecorMaxWidth + 'px',
                'min-height': bounds.h - 490});
                $('div#footer ul#navigation-secondary').css('right', bounds.w - fullMaxWidth + 5 + 'px');
                $tagline.css('left', '112px');
                $footer.find('.copyright').css('left', '110px');
            // Case 2: partially show left decoration, disable x-scroll
            } else if (mainContentWidth < bounds.w && bounds.w < fullMaxWidth) {
                $('body').css('overflow-x', 'hidden');
                $decoration_left.width(bounds.w - mainContentWidth - stagePadding);
                $stage.css('padding-left', $decoration_left.width() + stagePadding + 'px');
                $decoration_bottom.css('left', $decoration_left.width() + 'px');
                $decoration_bottom.css({'width': bounds.w - $decoration_left.width() + 'px',
                'min-height': bounds.h - 490});
                $('div#footer ul#navigation-secondary').css('right', '5px');
                $tagline.css('left', $decoration_left.width() + 12);
                $footer.find('.copyright').css('left', $decoration_left.width() + 10 + 'px');
                $stage_wrap.width(bounds.w);
            // Case 3: enable x-scroll
            } else {
                debug('case 3');
                $('body').css('overflow-x', 'scroll');
                $decoration_left.width(0);
                $stage.css({'padding-left': stagePadding + 'px'});
                $decoration_bottom.css('left', 0);
                $decoration_bottom.css({'width': fullMaxWidth + 'px',
                'min-height': bounds.h - 490});
                $('div#footer ul#navigation-secondary').css('right', '5px');
                $footer.find('.copyright').css('left', '10px');
                $tagline.css('left', '12px');
                $stage_wrap.width(fullMaxWidth);
            }
            $footer.width(bounds.w);
        }
    },
    calc_screen_bounds = function () {
        // Calc visible screen bounds
        var w = 0, h = 0;
        if (typeof(window.innerWidth) === 'number') {// not msie
            w = window.innerWidth;
            h = window.innerHeight;
        } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            w = document.documentElement.clientWidth;
            h = document.documentElement.clientHeight;
        }
        return {w: w, h: h};
    },
    calc_scroll = function () {
        var sx = 0, sy = 0;
        if (typeof window.pageYOffset === 'number') {
            sx = window.pageXOffset;
            sy = window.pageYOffset;
        } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
            sx = document.body.scrollLeft;
            sy = document.body.scrollTop;
        } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
            sx = document.documentElement.scrollLeft;
            sy = document.documentElement.scrollTop;
        }
        return {x: sx, y: sy};
    },
    $footer              = $('#footer').show(),
    $tagline             = $('#tagline'),
    $body                = $('body'),
    bounds               = calc_screen_bounds(),
    scrollbars_available = bounds.h < 575,
    c_anim_out           = false,
    c_anim_in            = false,
    bottom_animate_in    = function () {
        debug( 'withinViewport: ' + (withinViewport($('div#decoration-bottom'))?'true':'false') );
        if ( !withinViewport($('div#decoration-bottom')) ) {
            debug( 'sb avail: ' + scrollbars_available );
            if (scrollbars_available) {
                return;
            }
            c_anim_in = true;
            var $innerBlock = $decoration_bottom.find('.slidescroll');
            if ($innerBlock.size() === 0) {
                $innerBlock = $decoration_bottom.find('#introduction');
            }
            var bounds = calc_screen_bounds(),
                current_top = $decoration_bottom[0].offsetTop,
                H = $.browser.msie ? $decoration_bottom.height() : Math.min(
                        $decoration_bottom.height(),
                        $innerBlock.height() + 30
                    ),
                h = bounds.h - H - 30;
            //debug($decoration_bottom.height());
            //debug($innerBlock.height());
            // if need to animate
            if ((current_top > h && !$.browser.msie) || ($.browser.msie && $innerBlock.size() > 0)) {
                if (c_anim_out) {
                    $promenade.stop();
                    c_anim_out = false;
                }
                if ( !iOS() ) $promenade.animate({height: h -  84 + 'px'}, speed);
                $decoration_bottom.stop().animate({
                    'top': h + 'px'
                }, speed);
                //debug('Animate C:' + current_top + ' ~ ' + h + ' ( ' + bounds.h + ', ' + H + ' )');
            } else {
                //debug('Do not animate C: ' + current_top + ' < ' + h);
            }
        }
    },
    bottom_animate_out   = function () {
        if (scrollbars_available) {
            return;
        }
        c_anim_out = true;
        if (c_anim_in) {
            $promenade.stop();
            c_anim_in = false;
        }
        if ( !iOS() ) $promenade.animate({height: '372px'}, speed);
        $decoration_bottom.stop().animate({ 
            top: '457px'
        }, speed);
    };
    
    if (!is_mobile) {
        $footer.css({'position': 'fixed'});
    }

    $decoration_left.css({'height': '100%'});
    
    $(window).bind('resize', function () {
        
        var bounds = calc_screen_bounds(),
            scrollbars_was_available = scrollbars_available;
            scrollbars_available = bounds.h < 575;
        
        if (scrollbars_available) {
            $body.css({'overflow-y': 'auto'});
        } else {
            $body.css({'overflow-y': 'hidden'});
        }
        
        // increase height of bottom decoration to cover empty extra space
        var wh = viewportSize().height,
            dbh = $('div#decoration-bottom').height(),
            dbot = $('div#decoration-bottom').offset().top;
        var o = ( wh - ( dbh + dbot ) );
        adjust_layout();
    }).bind('scroll', adjust_layout);
    
    if (is_mobile) {
        $body.css({'overflow-y': 'auto'});
    } else {
        var bottom_animate_timeout = false;
        $decoration_bottom.hover(function () {
            var self = this;
            if (bottom_animate_timeout) {
                clearTimeout(bottom_animate_timeout);
            }
            bottom_animate_timeout = setTimeout(function () {
                bottom_animate_in.call(self);
            }, settings.navigation.bottom_animation.delay);
        },
        function () {
            var self = this;
            if (bottom_animate_timeout) {
                clearTimeout(bottom_animate_timeout);
            }
            bottom_animate_timeout = setTimeout(function () {
                bottom_animate_out.call(self);
            }, settings.navigation.bottom_animation.delay);
        });
        $(document).bind('video-plays', bottom_animate_out);
    }

    
    // styles for some mobile devices:
    
    if ( Android() || iPhone() ) {
        
        $('body').append('<a href="contact.php" style="padding:4px; position:absolute; top:32px; left:390px; font-size:18px; -webkit-border-radius:4px; -moz-border-radius:4px; border:1px solid #000; background:url(images/contact-bg.png) top left repeat-x; color:#fff; opacity:1;">Contact</a>');
        
        $('body').css({background: '#181510 url(images/bg_flow_w3_m.jpg) 0 -75px no-repeat'});        
        $('.stage-wrap').css({background: 'transparent none'});        
        
        $('div#footer').css({position:'absolute !important'});
        $('div#footer').css({top:'665px !important'});
            $('body#categories div#footer').css({top:'865px !important'});
        $('div#footer').css({width:'100% !important'});        
        
        $('div#footer ul#navigation-secondary').css({left:'700px !important'});
        $('div#footer ul#navigation-secondary').css({width:'400px !important'});
        
        $('div#footer span.copyright').css({width:'200px !important', left: '10px'});
        
        $('div#decoration-left').css({width: '0'}); 
        
        $('div#stage').css({padding: '30px 0 25px 0px', width: '996px !important'});
        $('div.stage-wrap').css({width: '996px !important'});
        
        $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1 ">');
        
    }
    
    if ( iPhone() ) {
        
        $('head').append('<meta name="viewport" content="width=device-width, initial-scale=0.48, minimum-scale=.48">');
        
        $('div.stage-wrap, div#stage, div#decoration-bottom').css('width', '1106px !important');
        
        $('ul#navigation').css({right: '110px'});
        
        $('div#player-playlist-next a, div#player-playlist-previous a', $('div#player div#player-right-panel div#player-playlist-simple')).css(
            'opacity', '1.0'
        );
        
        $('a#directorHover').css('right', '531px');
        
        $('div#categories-feature', $promenade).css('height', '360px');
        
        $('div#promenade-content').css({width: '970px', height: '360px'});
        
        $('div.jspContainer').css('float', 'right !important');
        
        $('div#promenade-inner-wrap', $promenade).css('float', 'right !important');
        $('div#cat-stage-content').css({height: '360px', float: 'right !important'});
        $('div#decoration-bottom').css('left', '0');
        
        $('body#home div#decoration-bottom').css({height: '200px', overflow: 'hidden'});
        $('body#categories div#decoration-bottom').css({height: '393px', overflow: 'hidden'});
        $('body#contact div#decoration-bottom').css({height: '200px', overflow: 'hidden'});
        $('body#press div#decoration-bottom').css({height: '210px !important', overflow: 'hidden'});
        
        $('div#gallery-controls').css('marginRight', '120px !important');
            
        $('ul.features').css('opacity', '1 !important');
        
        $('body#press div#promenade div#promenade-inner-wrap').css({
            float: 'left !important',
            height: 'auto !important',
            width: '650px',
            overflow: 'scroll !important',
            marginLeft: '10px'
        });
        
        $('div#promenade-inner-wrap div#promenade-content, div.scrollcontent, div.scrollwrap', $promenade).css(
            'height', 'auto !important'
        );
        
        $('div#cat-stage-content').css({float: 'right', width: '500px', marginTop: '10px'});
        
        $('div#cat-stage-content h2').css( 'font-size', '16px' );
        
        $('div#cat-stage-content, div#cat-stage-content div div, div#cat-stage-content div div b').css(
            'font-size', '12px'
        );
        
        $('body#press h2').css('font-size', '20px !important');
        
        $('body#press div.press-meta').css('font-size', '10px !important');
        
        /*$('div#promenade-inner-wrap').css('-webkit-overflow-scrolling', 'touch');*/
        
        $('div#promenade-inner-wrap').css('-webkit-overflow-scrolling', 'touch');
        
        //$('div#press-featured-photo').css('display', 'block');
        
        $('div#promenade, div#promenade div, div#promenade-inner-wrap, div#promenade-inner-wrap p, div#promenade-inner-wrap div, div#promenade-inner-wrap div p, div#promenade-inner-wrap div div, div#promenade-inner-wrap div div p').css ( 'font-size', '18px !important');
        
        $('div#promenade-inner-wrap div.press-meta').css ( 'font-size', '12px !important');
        
        $('div#promenade-inner-wrap').css({
           marginBottom: '50px',
           height: $('div#promenade-inner-wrap').height() + 'px !important',
           border: '1px solid transparent'
        });
        
    } // if iPhone
    
    
    
    $(window).trigger('resize');
    window.scroll(0, 0);
    
};