// Home page tab switcher
$(function() {
    if ($('.card-list').size() != 0) {
        // SETUP
        var cardTriggers = $('.card-list li'),
			cards = $('.card'),
			i = 0;

        // INIT
        $(cards)
			.addClass('hasJS')
			.eq(0)
			.addClass('revealCard');

        $(cardTriggers).each(function() {
            $(this).data('targ', $(cards).eq(i));
            i++;
        });

        // EFFECT
        $(cardTriggers).click(function() {
            if ($(this).data('targ').is(':visible')) { return false; } // kick out

            $(cardTriggers).filter('.curr').removeClass('curr');

            $(cards + ':visible').removeClass('revealCard');
            $(this)
				.addClass('curr')
				.data('targ')
				.addClass('revealCard');
            return false;
        });
    }
})


$(function() {
    mainStage = function() {
        var stage = $("#stage"),
	  		brand = $("#brand"),
	  		buttons = $('.cast-button'),
	  		cast = $('.cast-member'),
	  		quotes = $('.quote'),
	  		markerContainers = $('#markers > div'),
	  		markers = $('.marker'),
	  		popups = $('.pop'),
	  		closers = $('.closer'),
	  		back = $("#back");
        bgLazyLoad = new Array(																			// image url | alt | class | id
	  			"img/header/bg-dining.jpg||background dining-background|",
				"img/header/bg-transition.jpg||background transition-background|",
				"img/header/bg-pet.jpg||background pet-background|",
				"img/header/bg-manager-v2.jpg||background manager-background|"
				);

        lazyLoadImg(bgLazyLoad, $('div#acts'), 'start');

        var scenes = $('.background');

        function lazyLoadImg(imageEls, container, insertPosition) {											// imageEls image url | alt | class | id
            // crawl array
            if (!imageEls || !container || !insertPosition) {
                return;
            }
            // explode el
            var htmlStr = '';
            for (var i = 0, l = imageEls.length - 1; i <= l; i++) {
                var a = imageEls[i].split('|'),
	  					htmlStr = htmlStr + '<img src="' + a[0] + '" class="' + a[2] + '" id="' + a[3] + '" alt="' + a[1] + '" />';
            }
            if (insertPosition == 'start') {
                $(container).prepend(htmlStr);
            } else {
                $(container).append(htmlStr);
            }
        }
        $(popups).each(function() {																			// Determine pop height for anim later
            $(this)
		  			.toggle()
		  			.data('realHeight', $(this).height())
		  			.css({ 'height': '0', 'width': '0' })
		  			.toggle();
        });
        $(markerContainers).css('display', 'none');
        $('#markers').css('left', '55px');


        /* params */

        popWidth = 270;
        popGrowTime = 350;

        delayMarker = 3000;

        buttonAnim = 275;
        buttonAnimStair = .8;

        buttonAS = buttonAnim * buttonAnimStair;

        castAnimStair = 275;


        return {
            currentScene: null,
            currentStep: 0,
            firstStep: 0,
            stepIncrement: 0,
            opacityTo: null,
            showingNewSet: true,


            /* UTILS */

            stagger: function(els, effect, duration, callback) {
                var i = 0,
					l = $(els).size() - 1,
					staticAnim = (effect['display'] !== undefined),
					work = function() {
					    if (staticAnim) {
					        $(els).eq(i).css(effect);
					    } else {
					        $(els).eq(i).animate(effect, duration);
					    }

					    if (i++ < l) {
					        setTimeout(function() { work(); }, duration);
					    } else {
					        callback != null ? callback() : null;
					    }
					};
                work();

            },


            /* ACTION */
            initSceneChange: function(e) {
                mainStage.showingNewSet = mainStage.currentScene == null ? true : false; 			// Set showingNewSet
                if (mainStage.showingNewSet) {															// NEW SCENE
                    mainStage.currentScene = $(buttons).index(e.currentTarget); 						// Determine scene # by looking at calling button index
                    mainStage.stepIncrement = 1;
                } else {																					// BACK TO INTRO
                    mainStage.stepIncrement = -1;
                    $(markerContainers).filter(':visible').children('span.marker').css('margin-left', 'auto'); 	// Reset markers hidden by pop focus
                    $(popups).filter(':visible').toggle().css({ 'width': 1, 'height': 1 }); 				// Reset any displayed pops
                }
                mainStage.stepRegister = Array(
					mainStage.toggleCast
					, mainStage.toggleButtons
				  	, mainStage.toggleQuote
				  	, mainStage.toggleBG
				  	, mainStage.toggleMarkers
				  	, mainStage.toggleBack
				),
				mainStage.lastStep = mainStage.stepRegister.length - 1;
                mainStage.changeSet();
                return false;
            },

            changeSet: function() {
                if ((!mainStage.showingNewSet && mainStage.currentStep < mainStage.firstStep) || (mainStage.showingNewSet && mainStage.currentStep > mainStage.lastStep)) { // catch last step
                    if (!mainStage.showingNewSet) { // showing intro
                        mainStage.currentScene = null;
                        mainStage.currentStep++; // adjust currencurrentSteptScene for over incrementing
                    } else { // showing a scene
                        mainStage.currentStep--; // adjust currentStep for over incrementing
                    }
                    return;
                } else {
                    mainStage.stepRegister[mainStage.currentStep]();
                };
            },

            incrementStep: function() {
                mainStage.currentStep += mainStage.stepIncrement;
            },

            passBack: function(timer) {
                if (timer == undefined) {
                    mainStage.incrementStep();
                    mainStage.changeSet();
                } else {
                    var timeoutID = window.setTimeout(function() {
                        mainStage.incrementStep();
                        mainStage.changeSet();
                    }, timer);
                }
            },

            toggleCast: function() {																// View change non-hit cast
                var i = 0,
					set = $(cast).not(($(cast))[mainStage.currentScene]);
                if (mainStage.ie) {
                    var val = mainStage.showingNewSet ? 'none' : 'block';
                    mainStage.stagger(set, { 'display': val }, castAnimStair, function() { mainStage.passBack(250); });
                } else {
                    var val = mainStage.showingNewSet ? '0' : '1';
                    mainStage.stagger(set, { 'opacity': val }, castAnimStair, function() { mainStage.passBack(250); });
                }
            },

            toggleButtons: function() {															// View change non-hit buttons
                var i = 0,
					set = $(buttons).not(($(buttons))[mainStage.currentScene]),
					val = mainStage.showingNewSet ? '-42px' : '0px';
                mainStage.stagger(set, { 'bottom': val }, buttonAnim, function() { mainStage.passBack(250); });
            },

            toggleQuote: function() {																// QUOTES: reveal, animate, hide
                if (!mainStage.showingNewSet) {
                    mainStage.passBack();
                    return;
                }
                var quote = $($(quotes).get(mainStage.currentScene));
                $(quote)
	  				.css('display', 'block')
	  				.animate({ 'opacity': 1 }, 1000)
	  				.delay(1200)
	  				.animate({ 'opacity': 0 }, 800)
	  				.css('display', 'block');
                mainStage.passBack(
	  				350 + (mainStage.showingNewSet ? 3000 : 0)
	  			);
            },

            toggleBG: function() {																	// View change hit bg image 
                $($(scenes).get(mainStage.currentScene))
	  				.fadeToggle(350);
                mainStage.passBack(350);
            },

            toggleMarkers: function() {
                var nextStep = mainStage.toggleBack;
                if (mainStage.ie) {														// IE anim
                    $($(markerContainers).get(mainStage.currentScene))
						.toggle()
						.children('span.marker')
						.children('span')
						.everyTime(2100, function() {
						    $(this).animate({ "opacity": "0" }, 1000)
								.delay(1500)
								.animate({ "opacity": "1" }, 1000)
						}, 7);
                } else {																				// Modern Browser anim
                    $($(markerContainers).get(mainStage.currentScene))
						.toggle()
						.children('span.marker')
						.css({ 'visibility': 'visible' })
						.children('span')
						.everyTime(3000, function() {
						    $(this)
						    	.animate({ 'opacity': '0', 'left': '-11px', 'top': '-11px', 'padding': '7px' }, 700)
						    	.delay(1949)
						    	.animate({ 'padding': '0px', 'left': '-3px', 'top': '-3px' }, 1)
						    	.animate({ 'opacity': '1' }, 450)
						}, 10);
                }

                mainStage.incrementStep();
                mainStage.changeSet();
                return false;
            },

            toggleBack: function() {
                $(back).toggle();
                $(brand).css('cursor', mainStage.showingNewSet ? 'hand' : "pointer")
                mainStage.passBack();
            },

            showPop: function(e) {																// SHOWPOP
                var marker = e.currentTarget;
                var curMarkAndPop = $(markers).index(
	  				$(marker)); 																	// Get pos. in set
                $(marker).css("margin-left", "-1000em"); 																// Hide marker
                $($(popups).get(curMarkAndPop)).each(function() {
                    $(this)
	  					.toggle()
	  					.animate({ 'width': popWidth, 'height': $(this).data('realHeight') }, { 'duration': popGrowTime, 'easing': 'swing' });
                })																					// Show pop
                return false;
            },

            closePop: function(e) {
                if (!$(e.target).hasClass('closer')) { e.stopPropagation(); return false; } 		// Filter for popCloser clicks
                var curMarkAndPop = $(closers).index(e.target); 									// Get pos. in set
                $($(popups).get(curMarkAndPop))														// Hide pop
					.animate({ 'height': '1px', 'width': '1px' }, 350, function() {
					    $(this).toggle();
					});
                $($(markers).get(curMarkAndPop)).css("margin-left", "auto"); 										// Show marker
            },

            initStage: function() {																// INTRODUCTION
                mainStage.ie = $.browser['msie'] != undefined;
                $(brand).delay(1500).animate({ top: 0 }, 300, function() {								// delay		

                    $('#bg-intro').animate({ opacity: 0 }, 1000);
                    $("#wordmark").remove(); 														// remove wordmark
                    $('#jq-logo').css({ 'margin-top': '10px' });
                    $(brand)
	  					.css({ 'top': '259px', 'left': '13px', 'width': '79px', 'height': '71px' })		// repos logo and fade in
	  					.delay(1000)
	  					.bind('click', mainStage.initSceneChange);

                    $(buttons)
	  					.bind('click', mainStage.initSceneChange)									// button onclick							
	  					.css({ 'bottom': '-42px', 'display': 'block' });

                    mainStage.stagger($(buttons), { 'bottom': "0" }, 350, null);
                    if (mainStage.ie) {
                        mainStage.stagger($(cast), { 'display': 'block' }, 350, null);
                    } else {
                        $(cast).css({ 'opacity': 0, 'display': 'block' });
                        mainStage.stagger($(cast), { 'opacity': 1 }, 350, null);
                    }


                    $('#back').bind('click', mainStage.initSceneChange); 						// back onclick

                    $(markers)
						.bind('click', mainStage.showPop); 										// marker onclick

                    $('.closer').bind('click', mainStage.closePop); 								// Pop closer onclick

                });
            } /* end initStage */
        }; /* end public return */

    } (); /* end mainstage obj */


    //$(mainStage.initStage());
    $('body').load(mainStage.initStage());


});