$(function(){
    
    $('.arrow-list').click(function(e){
        var elm = $(e.target);
        if (elm.hasClass('title')) {
            elm.parent().children('p').show();
            return false;
        }
    });
    
    $('.expandable .title').toggle(
        function(){
            $(this).addClass('open');
            $(this).parent().children('p').slideDown();
        },
        function(){
            $(this).removeClass('open');
            $(this).parent().children('p').slideUp();
        }
    );
        
    $('#home #banner').cycle({ 
        fx:     'fade', 
        speed:   2000, 
        timeout: 6000, 
        next:   '#banner', 
        pause:   0
    });
    
    new Menu({
        elm: '#nav', 
        left: -5, 
        adjust: -28,
        zIndex: 10,
        delay: 0    
    });
    
    if ($('#work').length) {
        $('#work a').click(function(){
            Overlay.mask('body', 'mask', '0.85', '#000');
            var parts = this.id.split("-");
            if (parts[0] === 'v') {
                video(this, parts);
            } else if (parts[0] === 'i') {
                images();
            }
            $('#player .close').click(function(){
                $('#player').remove();
                Overlay.unmask('body', 'mask');
            });
            return false;
        });
        
    }
    
    function images(){
        $('body').append("<div id='player'><div class='titlebar'><span class='close'><em>X</em></span></div><div id='images'><img src='/assets/images/safety-card-1.jpg' id='sc' /><div class='controls'><a id='prev'></a><a id='next'></a></div></div></div>");
        $('#player').css('z-index',1000);
        var i = 1;
        $('#prev').mouseover(function(){
            if (i > 1) {
                $(this).addClass('prev-active');
            }
        });
        $('#prev').mouseout(function(){
            $(this).removeClass('prev-active');
        });
        $('#next').mouseover(function(){
            if (i < 2) {
                $(this).addClass('next-active');
            }
        });
        $('#next').mouseout(function(){
            $(this).removeClass('next-active');
        });
        $('#prev').click(function(){
            if (i == 2) {
                $('#sc').attr('src', '/assets/images/safety-card-1.jpg');
                i = 1;
            }
        });
        $('#next').click(function(){
            if (i == 1) {
                $('#sc').attr('src', '/assets/images/safety-card-2.jpg');
                i = 2;
            }
        });
    }
    
    function video(atag, parts){
        $('body').append("<div id='player'><div class='titlebar'><span class='close'><em>X</em></span></div><a href='" + atag.href + "' class='player' id='p-" + parts[1] + "'></a></div>");
        $('#player').css('z-index',1000);
        var pid = "p-" + parts[1];
        var player = $f(pid, "/assets/js/flowplayer.commercial-3.1.3.swf", {
        
            plugins: {controls: null},
        
            canvas: {backgroundColor: "#857363" },
            
            // play button 
		    play: { 
		        url: '/assets/images/video-play-button.png', 
		        width: 141, 
		        height: 141 
		    },
		    
		    clip: { 
		        autoPlay: true, 
		        autoBuffering: true 
		    },
            
            key: '$0b03eb0dcd178bea074',
		                
            plugins: {
               controls: {
                  backgroundColor: '#ffffff',
                  bufferGradient: 'none',
                  tooltipColor: '#e37222',
                  sliderColor: '#857363',
                  timeColor: '#e37222',
                  progressGradient: 'medium',
                  timeBgColor: '#51463d',
                  volumeSliderColor: '#857363',
                  sliderGradient: 'none',
                  volumeSliderGradient: 'none',
                  durationColor: '#ffffff',
                  buttonColor: '#857363',
                  progressColor: '#e37222',
                  borderRadius: '0',
                  bufferColor: '#884414',
                  buttonOverColor: '#e37222',
                  backgroundGradient: 'low',
                  tooltipTextColor: '#ffffff',
                  height: 20,
                  autoHide: 'always',
                  opacity: 1.0
               }
            }
        });
    }

});

/*
 * Menu with submenu
 */
Menu = function(params) {
    
    var menuObj = this;
    
    // get the menu root element and set it's z-index
    var menu = $(params.elm);
    menu.css('z-index', params.zIndex);
    
    // get all submenus
    $('ul', menu).each(function(){
        
        // bring stuff into scope
        var left = params.left;
        var that = $(this);
        var mObj = menuObj;
        
        // hide the submenus
        $(this).css('left', '-999em');
        
        // if IE then get the width of the ul elm and apply to all a tags
        // so they stretch (can't use 100% in CSS as that breaks it)
        if ($.browser.msie) {
            var ulWidth = $(this).width() + params.adjust;
            $('a', this).each(function(){
                $(this).width(ulWidth);
            });
        }
        
        // show submenu on  mouseover
        $(this).parent().mouseenter(function() {
            that.css('left', left + 'px');
        });
        
        // hide submenu on mouseout
        $(this).parent().mouseleave(function() {
            if ($.browser.msie) {
                that.css('left', '-999em');
            } else {
                $(this).timeout = setTimeout(function(obj, elm) { obj.hide(elm); }, params.delay, mObj, that);
            }
        });
        
    });
    
    menuObj.hide = function(elm){
        if (elm) {
            elm.css('left', '-999em');
        }
    }
    
};

var Overlay = {
    
    curIndex: 100,
    
    mask: function(elm, id, opacity, color){        
        if (elm === 'body') {
            $('body').append("<div id='" + id + "'></div>");
            
        } else if ($('#' + elm).length) {
            $('#' + elm).append("<div id='" + id + "'></div>");
            
        }
        var parent = $('#' + id).parent();
        $('#' + id).css({
            display: 'block',
            height: parent.height(),
            width: parent.width(),
            position: 'fixed',
            left: parent.position().left,
            top: parent.position().top,
            'z-index': Overlay.curIndex,
            opacity: opacity,
            background: color
        });
        Overlay.curIndex++;
        
        if ($('body').height() < $(window).height()) {
            $('#' + id).height($(window).height());
        }
    },
    
    unmask: function(elm, id) {
        $('#' + id).remove();
    }
    
};