/*
 * $HeadURL: http://selma.exit10.local/repos/kol-website/trunk/www-bor/js/home-stage.js $
 * $LastChangedRevision: 1519 $
 * $LastChangedDate: 2011-12-14 13:32:23 -0600 (Wed, 14 Dec 2011) $
 * $LastChangedBy: dshifflett $
 */

$(function() {
    var collapsedHeight = '3px';
    var expandedHeight = '169px';
    var animationSpeed = 750;
    var animationSpeedBackground = 500;
    var easingMethod = 'swing';
    var easingMethodBackground = 'swing';
    var autoDelayMs = 10000;
    
    var jqTabUl = $('<ul />').attr('id', 'stageTabs');
    var jqsTabUlLi = [ ];
    var jqsDiv = [ ];
    var jqStage = $('#stage').addClass('Scripted');
    var jqHighlight = jqStage.find('#stageHighlight');
    
    var currentOffset = 0;
    var transitionBusy = true;
    var autoTimer = false;
    
    var jumpIndex = function(newOffset) {
        if(transitionBusy || newOffset == currentOffset)
            return;
        
        transitionBusy = true;
        jqHighlight.animate({ height: collapsedHeight }, animationSpeed, easingMethod, function() {
            jqsDiv[currentOffset].hide();
            jqsTabUlLi[currentOffset].removeClass('Active');
            jqsDiv[newOffset].show();
            jqsTabUlLi[newOffset].addClass('Active');
            
            jqStage.css(
                'background-position',
                '50% -' + (
                    newOffset == jqsDiv.length - 1 && currentOffset == 0
                    ? 375 * jqsDiv.length    // special for going from the first slide to the last slide
                    : 375 * currentOffset    // general case
                ) + 'px'
            );
            jqStage.animate(
                {
                    backgroundPosition:
                        '50% -' +
                        (
                            newOffset == 0 && currentOffset == jqsDiv.length - 1
                            ? 375 * jqsDiv.length   // special case for going from last slide to first slide
                            : 375 * newOffset       // general case
                        ) + 'px'
                },
                animationSpeedBackground,
                easingMethodBackground,
                function() {
					jqStage.css({
						'background-position':
							'50% -' +
							(
								newOffset == 0 && currentOffset == jqsDiv.length - 1
								? 375 * jqsDiv.length   // special case for going from last slide to first slide
								: 375 * newOffset       // general case
							) + 'px'
					});
                    jqHighlight.animate({ height: expandedHeight }, animationSpeed, easingMethod, function() {
                        currentOffset = newOffset;
                        transitionBusy = false;
                    });
                }
            );
        });
    }
    
    var jumpAutoClear = function() {
        if(autoTimer) {
            clearInterval(autoTimer);
            autoTimer = false;
        }
    }
    var jumpAuto = function() { jumpIndex(currentOffset == jqsDiv.length - 1 ? 0 : currentOffset + 1); };
    
    var jumpTab = function() { jumpAutoClear(); jumpIndex(this.myIndex); };
    var jumpBackward = function() { jumpAutoClear(); jumpIndex(currentOffset > 0 ? currentOffset - 1 : jqsDiv.length - 1); };
    var jumpForward = function() { jumpAutoClear(); jumpIndex(currentOffset == jqsDiv.length - 1 ? 0 : currentOffset + 1); };
    
    jqHighlight
        .before(
            $('<ul />')
                .attr('id', 'stageArrows')
                .append(
                    $('<li />')
                        .addClass('Top')
                        .append(
                            $('<a />')
                                .attr('href', 'javascript:void(0)')
                                .attr('title', 'Move Backward')
                                .click(jumpBackward)
                                .append(
                                    $('<img />')
                                        .attr('src', '/images/layout/controls/large-upward-arrow.' + (window.isLtIe7 ? 'gif' : 'png'))
                                        .attr('alt', '^')
                                        .attr('title', 'Move Backward')
                                        .attr('width', 41)
                                        .attr('height', 29)
                                )
                        )
                )
                .append(
                    $('<li />')
                        .addClass('Bottom')
                        .append(
                            $('<a />')
                                .attr('href', 'javascript:void(0)')
                                .attr('title', 'Move Forward')
                                .click(jumpForward)
                                .append(
                                    $('<img />')
                                        .attr('src', '/images/layout/controls/large-downward-arrow.' + (window.isLtIe7 ? 'gif' : 'png'))
                                        .attr('alt', 'v')
                                        .attr('title', 'Move Forward')
                                        .attr('width', 41)
                                        .attr('height', 29)
                                )
                        )
                )
        )
        .append(jqTabUl)
        .children('div').each(function(i) {
            var jqThis = $(this);
            
            var jqThisLink = jqThis.find('a');
            if(jqThisLink.length == 1 && jqThisLink.attr('href')) {
                this.myHref = jqThisLink.attr('href');
                jqThis
                    .click(function() {
                        window.location.href = this.myHref;
                        return false;
                    })
                    .css('cursor', 'pointer')
            }
            
            var jqTabUlLiLink = $('<a />')
                .attr('href', 'javascript:void(0)')
                .attr('title', 'Jump to ' + jqThis.attr('class') + ' Tab')
                .click(jumpTab)
                .append(
                    $('<img />')
                        .attr('alt', jqThis.attr('class'))
                        .attr('title', 'Jump to ' + jqThis.attr('class') + ' Tab')
                        .attr('src', '/images/layout/alphas/transparent.gif')
                )
            jqTabUlLiLink.get(0).myIndex = i;
            
            var jqTabUlLi = $('<li />')
                .attr('class', jqThis.attr('class'))
                .append(jqTabUlLiLink);
            
            jqsDiv.push(jqThis);
            jqTabUl.append(jqTabUlLi);
            jqsTabUlLi.push(jqTabUlLi);
            
            if(i)
                jqThis.hide();
            else
                jqTabUlLi.addClass('Active');
        });
    
    transitionBusy = false;
    autoTimer = setInterval(jumpAuto, autoDelayMs);
});