/*
	Author: The Bridge
	Copyright (c): 2011 The Bridge
	Created: 01-11-2011
	Last Modified: 20-01-2012
	Name: Director
	Description: Handle animations and functionality of the home page content
*/

function director(){  
	this.ie8 = ($.browser.msie && $.browser.version == 8);
	this.vloaded = false;
	this.globe = 1;
	this.screen = true;
	this.webpath = 'http://the-bridge.co.uk/';
	this.vmovies = ['35312325', '31780112', '29473846'];
	this.globes = [[
		{ 'id' : 'marker1', 'top' : '220px', 'left' : '330px', 'zindex' : '13', 'content' : 'In America, we\'re proud to work with some great professional technology companies on the West Coast.<br><br>Our clients in the USA include:<br><br>AJA Video Systems<br>JMR Storage Technologies'},
		{ 'id' : 'marker2', 'top' : '160px', 'left' : '545px', 'zindex' : '14', 'content' : 'We recently worked with our friends in Norway at TTA to produce product videos for their innovative StageTracker.'},
		{ 'id' : 'marker3', 'top' : '180px', 'left' : '540px', 'zindex' : '15', 'content' : 'From our home near Milton Keynes in the UK, we reach out to our clients and their customers around the world.<br><br>Our clients in the UK include:<br><br>Soundcraft/Studer<br>Yamaha Music<br>Celestion Loudspeakers<br>HHB<br>TCC<br>Denon & Marantz Professional<br>Yamaha Commercial Audio'},
		{ 'id' : 'marker4', 'top' : '190px', 'left' : '570px', 'zindex' : '16', 'content' : 'In Germany, we work with Yamaha Music Europe on pan EU-marketing activities.'},
		{ 'id' : 'marker5', 'top' : '200px', 'left' : '550px', 'zindex' : '17', 'content' : 'In France, we work closely with the good folks at NEXO as partners for their worldwide marketing efforts.'},
		{ 'id' : 'marker6', 'top' : '310px', 'left' : '600px', 'zindex' : '18', 'content' : ''}
	],
	[ 
		{ 'id' : 'marker1', 'top' : '230px', 'left' : '590px', 'zindex' : '13', 'content' : 'Our clients in Japan include:<br><br>Denon Professional<br>Marantz Professional<br>Denon DJ<br>Yamaha Music Japan'},
		{ 'id' : 'marker2', 'top' : '275px', 'left' : '565px', 'zindex' : '13', 'content' : 'Our clients in Hong Kong include:<br><br>Aquos Yachts'}
	]];
    
    // Function will load the requested page section
    this.load = function(i){  
    	switch(i){
    		case 1: content1(); break;
    		case 2: content2(); break;
    		case 3: content3(); break;
    		case 4: content4(); break;
    		case 5: content5(); break;
    		case 6: content6(); break;
    		case 7: content7(); break;
    		case 8: content8(); break;
    	}    
    };
    
    function clearTimeoutObj(id){
    	$.doTimeout(id);	
	};
	
	this.animateModalScreen = function(){
    	 $("#design_cloud").animate( { opacity : 1, top : '111px' }, 400 );
    	
		$.doTimeout('anim300', 80, function(){
			$("#h1_modal").animate( { opacity : 1, top : '10px' }, 800 );
			clearTimeoutObj('anim300');
		});	
		
		$.doTimeout('anim301', 160, function(){
			$("#h4_modal").animate( { opacity : 1, top : '80px' }, 800 );
			clearTimeoutObj('anim301');
		});	
		
		$.doTimeout('anim302', 240, function(){
			$("#p_modal").animate( { opacity : 1, top : '105px' }, 800 );
			clearTimeoutObj('anim302');
		});	
		
		$.doTimeout('anim303', 320, function(){
			$("#design_monitor").animate( { opacity : 1 }, 800 );
			clearTimeoutObj('anim303');
		});
		
		$.doTimeout('anim304', 400, function(){
			$("#modal_slider").animate( { opacity : 1 }, 600, function(){ $("#modal_slider").bridgeSlider({continuous: true, speed: 800}); });
			clearTimeoutObj('anim304');
		});	
		
		$.doTimeout('anim307', 480, function(){
			$("#design_text_view").animate( { opacity : 1, left : '150px' }, { duration : 600, easing : 'easeOutElastic' } );
			clearTimeoutObj('anim307');
		});	
    };
    
    this.animateModalClear = function(){
    	 $("#design_cloud").animate( { opacity : 1, top : '111px' }, 400 );
    	
		$.doTimeout('anim300', 80, function(){
			$("#h1_modal").animate( { opacity : 1, top : '10px' }, 800 );
			clearTimeoutObj('anim300');
		});	
		
		$.doTimeout('anim301', 160, function(){
			$("#h4_modal").animate( { opacity : 1, top : '80px' }, 800 );
			clearTimeoutObj('anim301');
		});	
		
		$.doTimeout('anim302', 240, function(){
			$("#p_modal").animate( { opacity : 1, top : '105px' }, 800 );
			clearTimeoutObj('anim302');
		});	
		
		$.doTimeout('anim304', 320, function(){
			$("#modal_slider_large").animate( { opacity : 1 }, 600, function(){ $("#modal_slider_large").bridgeSlider({continuous: true, speed: 800, media: 'clear'}); });
			clearTimeoutObj('anim304');
		});	
		
		$.doTimeout('anim307', 400, function(){
			$("#design_text_view_clear").animate( { opacity : 1, left : '300px' }, { duration : 600, easing : 'easeOutElastic' } );
			clearTimeoutObj('anim307');
		});	
    };
    
    // --------------------------------- CONTENT 1 ------------------------------------
		
    function content1(){
		$("#text_smart_people").animate( { opacity : 1, top : '33px' }, 400 );
    	
		$.doTimeout('anim1', 100, function(){
			$("#text_welcome").animate( { opacity : 1, top : '90px' }, 400 );
			clearTimeoutObj('anim1');
		});
		
		$.doTimeout('anim2', 220, function(){
			$("#ico_design").animate( { opacity : 1 }, 1400, function(){
				clearTimeoutObj('anim2');
				setHover($("#lnk_web"), $("#circle_web"));
			});
		});
		
		$.doTimeout('anim3', 240, function(){
			$("#ico_video").animate( { opacity : 1 }, 1400, function(){
				clearTimeoutObj('anim3');
				setHover($("#lnk_social"), $("#circle_social"));
			});
		});
		
		$.doTimeout('anim4', 360, function(){
			$("#ico_social").animate( { opacity : 1 }, 1400, function(){
				clearTimeoutObj('anim4');
				setHover($("#lnk_design"), $("#circle_design"));
			});
		});
		
		$.doTimeout('anim5', 480, function(){
			$("#ico_email").animate( { opacity : 1 }, 1400, function(){
				clearTimeoutObj('anim5');
				setHover($("#lnk_email"), $("#circle_email"));
			});
		});
		
		$.doTimeout('anim6', 600, function(){
			$("#ico_web").animate( { opacity : 1 }, 1400, function(){
				$("#ico_web").css({ "filter" : "none !important" });
				clearTimeoutObj('anim6');
				setHover($("#lnk_video"), $("#circle_video"));
			});
		});
    };
    
    function setHover(elHover, elAnimate){
		var baseW = parseInt(elAnimate.width());
		var baseH = parseInt(elAnimate.height());
		var perc = 20;
		var newW = baseW + 22;
		var newH = baseH + 22;
		var halfW = Math.round(baseW/2);
		var halfH = Math.round(baseH/2);
		var posLeft = parseInt(elAnimate.css('left'));
		var posTop = parseInt(elAnimate.css('top'));
		var cl = posLeft + halfW;
		var ct =  posTop + halfH;
		var newLeft = posLeft-10;
		var newTop = posTop-10;
		
		elHover.hover(
			function () {
				elAnimate.animate( { width : newW+'px', height : newH+'px', left : newLeft+'px', top : newTop+'px' }, { queue : false, duration: 140, easing : 'easeOutCubic' } );
			}, 
			function () {
				elAnimate.animate( { width : baseW+'px', height : baseH+'px', left : posLeft+'px', top : posTop+'px' }, { queue : false, duration: 160, easing : 'easeOutCubic' } );
			}	
		).click(function(){
			system.ScrollTo($(this).attr("rel"));
		});
		
		elAnimate.click(function(){
			system.ScrollTo($(this).attr("rel"));
		});
    }
    
    // ------------------------------- END CONTENT 1 ----------------------------------
    
    
    
    
    // ---------------------------------- CONTENT 2 -------------------------------------
    
    function content2(){
		$("#text_bridge_universe").animate( { opacity : 1 }, 400 );
    	
		$.doTimeout('anim7', 100, function(){
			$("#text_clients").animate( { opacity : 1 }, 400 );
			clearTimeoutObj('anim7');
		});
		
		$.doTimeout('anim7a', 320, function(){
			$("#cloud").animate( { opacity : 1 }, 1200, function(){
				clearTimeoutObj('anim7a');
			});
		});
		
		$.doTimeout('anim8', 400, function(){
			clearTimeoutObj('anim8');
			setGlobe();
		});
		
		$.doTimeout('anim9', 960, function(){
			$("#text_click_dots").animate( { opacity : 1 }, 1000, function(){
				clearTimeoutObj('anim9');
			});
		});
		
		$.doTimeout('anim10', 1040, function(){
			$("#red_tooltip").animate( { opacity : 1, top : '440px' }, { duration : 600, easing : 'easeOutBounce' , complete : function(){
				clearTimeoutObj('anim10');
				
				var posTop = parseInt($("#red_tooltip").css('top'));
				var newTop = posTop-5;
				
				$("#red_tooltip").hover(
					function(){
						$(this).animate( { top : newTop+'px' }, { queue : false, duration: 140, easing : 'easeOutBack' } );
					},
					function(){
						$(this).animate( { top : posTop+'px' }, { queue : false, duration: 140, easing : 'easeInBack' } );
					}
				).click(function(){ removeGlobe(); });
			}});
		});
    };
    
    this.initGlobe = function(){
    	var container = $("#content_2_box");
    	var globeObj = director.globes[director.globe-1];
    	
    	$(".marker").remove();
    	$(".popup").remove();
    	
    	for (var i in globeObj){
    		if (globeObj[i].content != ''){
    			container.append('<div id="'+globeObj[i].id+'" class="marker zero_opac" title="'+globeObj[i].content+'" style="top : '+globeObj[i].top+'; left : '+globeObj[i].left+'; z-index: '+globeObj[i].zindex+';"></div>');
    		}
    	}
    	
    	$('.marker').bubblepop({speed: 150, delay: 300});
    };
    
    function setGlobe(){
    	var globeObj = (director.globe ==1) ? $("#globe1") : $("#globe2");
    	var inc = 80;
    	var duration = 400;
    	
		globeObj.animate( { opacity : 1 }, 1200 );
		
		if ($("#marker1").length != 0){
			duration += inc;
			$.doTimeout('anim11', duration, function(){
				$("#marker1").animate( { opacity : 1 }, 600, function(){
					clearTimeoutObj('anim11');
				});
			});
		}

		if ($("#marker2").length != 0){
			duration += inc;
			$.doTimeout('anim12', duration, function(){
				$("#marker2").animate( { opacity : 1 }, 600, function(){
					clearTimeoutObj('anim12');
				});
			});
		}
		
		if ($("#marker3").length != 0){
			duration += inc;
			$.doTimeout('anim13', duration, function(){
				$("#marker3").animate( { opacity : 1 }, 600, function(){
					clearTimeoutObj('anim13');
				});
			});
		}
		
		if ($("#marker4").length != 0){
			duration += inc;
			$.doTimeout('anim14', duration, function(){
				$("#marker4").animate( { opacity : 1 }, 600, function(){
					clearTimeoutObj('anim14');
				});
			});
		}
		
		if ($("#marker5").length != 0){
			duration += inc;
			$.doTimeout('anim15', duration, function(){
				$("#marker5").animate( { opacity : 1 }, 600, function(){
					clearTimeoutObj('anim15');
				});
			});
		}
		
		if ($("#marker6").length != 0){
			duration += inc;
			$.doTimeout('anim16', duration, function(){
				$("#marker6").animate( { opacity : 1 }, 600, function(){
					clearTimeoutObj('anim16');
				});
			});
		}
    };
    
    function removeGlobe(){
    	var globeObj;
    	var inc = 80;
    	var duration = 0;
    	
    	if (director.globe  == 1){
    		var globeObj = $("#globe1");
    		director.globe  = 2;
    	}
    	else{
    		var globeObj = $("#globe2");
    		director.globe  = 1;
    	}
    	
    	if ($("#marker6").length != 0){
    		duration += inc;
			$("#marker6").animate( { opacity : 0 }, 600 );
		}
		
		if ($("#marker5").length != 0){
    		duration += inc;
			$.doTimeout('anim17', duration, function(){
				$("#marker5").animate( { opacity : 0 }, 600, function(){
					clearTimeoutObj('anim17');
				});
			});
		}
		
		if ($("#marker4").length != 0){
    		duration += inc;
			$.doTimeout('anim18', duration, function(){
				$("#marker4").animate( { opacity : 0 }, 600, function(){
					clearTimeoutObj('anim18');
				});
			});
		}
		
		if ($("#marker3").length != 0){
    		duration += inc;
			$.doTimeout('anim19', duration, function(){
				$("#marker3").animate( { opacity : 0 }, 600, function(){
					clearTimeoutObj('anim19');
				});
			});
		}
		
		if ($("#marker2").length != 0){
    		duration += inc;
			$.doTimeout('anim20', duration, function(){
				$("#marker2").animate( { opacity : 0 }, 600, function(){
					clearTimeoutObj('anim20');
				});
			});
		}
		
		if ($("#marker1").length != 0){
    		duration += inc;
			$.doTimeout('anim21', duration, function(){
				$("#marker1").animate( { opacity : 0 }, 600, function(){
					clearTimeoutObj('anim21');
				});
			});
		}
		
		duration += inc;
		$.doTimeout('anim22', duration, function(){
			globeObj.animate( { opacity : 0 }, 600, function(){
				clearTimeoutObj('anim22');
				director.initGlobe();
				setGlobe();
			});
		});
    };
    
    // ------------------------------ END CONTENT 2 ---------------------------------
    
    
    
    
    // ---------------------------------- CONTENT 3 -------------------------------------
    
    function content3(){
    	$("#text_design").animate( { opacity : 1 }, 1000 );

		$.doTimeout('anim59', 140, function(){
			$("#p_intro3").animate( { opacity : 1, left : '0px' }, 600 );
			clearTimeoutObj('anim59');
		});
		
		$.doTimeout('anim60', 180, function(){
			$("#h1_branding").animate( { opacity : 1, left : '0px' }, 600 );
			clearTimeoutObj('anim60');
		});
		
		$.doTimeout('anim61', 220, function(){
			$("#p_branding").animate( { opacity : 1, left : '0px' }, 600 );
			clearTimeoutObj('anim61');
		});
		
		$.doTimeout('anim62', 260, function(){
			$("#h1_advertising").animate( { opacity : 1, left : '830px' }, 600 );
			clearTimeoutObj('anim62');
		});
		
		$.doTimeout('anim63', 300, function(){
			$("#p_advertising").animate( { opacity : 1, left : '680px' }, 600 );
			clearTimeoutObj('anim63');
		});
		
		$.doTimeout('anim64', 340, function(){
			$("#h1_pos").animate( { opacity : 1, left : '900px' }, 600 );
			clearTimeoutObj('anim64');
		});
		
		$.doTimeout('anim65', 380, function(){
			$("#p_pos").animate( { opacity : 1, left : '680px' }, 600 );
			clearTimeoutObj('anim65');
		});
		
		$.doTimeout('anim66', 440, function(){
			$("#heart_words").animate( { opacity : 1 }, 1200 );
			clearTimeoutObj('anim66');
		});
		
		$.doTimeout('anim67', 900, function(){
			$("#see_design").animate( { opacity : 1, width : '174px', height : '61px', top : '0px', left : '0px' }, 320 );
			$("#see_design_shadow").animate( { opacity : 1, width : '204px', height : '23px', left : '-12px' }, 320, function(){
				$("#see_design_box").html('<a id="lnk_see_design" href="javascript:;" onclick="" title="See Design Stuff"><span id="btn_see_design" class="button_see">See Design Stuff</span></a><img id="see_design_shadow" style="position: absolute; top: 66px; left: -12px;" src="'+director.webpath+'images/home/shadow.png" width="204" height="23" alt="See Design Stuff" />');
				$("#lnk_see_design").hover(
					function(){
						$("#btn_see_design").css('backgroundPosition', '-173px 0px');
					},
					function(){
						$("#btn_see_design").css('backgroundPosition', '0px 0px');
					}
				).click(function(){
					var mlHtml = '';
					
					mlHtml += '<h1 id="h1_modal" class="zero_opac">Design</h1>';
					mlHtml += '<h4 id="h4_modal" class="zero_opac"></h4>';
					mlHtml += '<p id="p_modal" class="zero_opac"></p>';
					mlHtml += '<img id="design_cloud" class="zero_opac" src="'+director.webpath+'images/modal_large/cloud.png" width="653" height="278" alt="The Bridge - Cloud" />';
					mlHtml += '<img id="design_text_view_clear" class="zero_opac" src="'+director.webpath+'images/modal_large/text_view_large.'+(director.ie8 ? 'gif' : 'png')+'" width="267" height="123" alt="The Bridge - View Large" />';
					mlHtml += '<div id="modal_slider_large" class="zero_opac">';
					mlHtml += '	<ul>';
					mlHtml += '		<li><img id="design_Denon" src="'+director.webpath+'images/modal_large/design/denon.png" width="342" height="457" alt="The Bridge - Denon" /></li>';
					mlHtml += '		<li><img id="design_Yamaha" src="'+director.webpath+'images/modal_large/design/yamaha.png" width="342" height="457" alt="The Bridge - Yamaha" /></li>';
					mlHtml += '		<li><img id="design_AJA" src="'+director.webpath+'images/modal_large/design/aja.png" width="342" height="457" alt="The Bridge - AJA" /></li>';
					mlHtml += '	</ul>';
					mlHtml += '</div>';
					
					$("#modal_large > #modal_body > #mlbody").html('').append(mlHtml);
					
					system.modalLargeOpen('design');
				});
			});
			clearTimeoutObj('anim67');
		});
		
		$.doTimeout('anim67a', 480, function(){
			$("#bubble_2_idea").click(function(){
				/* Set the modal dark content to the contact form */
				if($.cookie('contact')){
					$("#modal_dark_sm > #mdbody").html(system.modalMessage('Thanks for getting in touch.', '')).css( { height : '95px', padding : '0 0 0 8px' });
				}
				else{
					$("#modal_dark_sm > #mdbody").html('<div id="mdbody_i">'+$("#modal_form").html()+'</ div>').css( { height : '480px', padding : '0 0 8px' });
				}
				system.modalDarkSmOpen();
			});
			$("#bubble_2_idea").animate( { opacity : 1, top : '-=130px' }, { duration : 1000, easing : 'easeOutElastic' , complete : function(){
				clearTimeoutObj('anim67a');
			}});
		});
    };
    
    // ------------------------------ END CONTENT 3 ---------------------------------
    
    
    
   
    // ---------------------------------- CONTENT 4 ------------------------------------- 
 
    function content4(){
    	$("#text_web").animate( { opacity : 1 }, 1400 );
    	
		$.doTimeout('anim68', 80, function(){
			$("#h3_welovetheweb").animate( { opacity : 1 }, 1200 );
			clearTimeoutObj('anim68');
		});
		
		$.doTimeout('anim70', 140, function(){
			$("#p_webdesign").animate( { opacity : 1, left : '0px' }, 600 );
			clearTimeoutObj('anim70');
		});
		
		$.doTimeout('anim71', 180, function(){
			$("#h1_development").animate( { opacity : 1, left : '0px' }, 600 );
			clearTimeoutObj('anim71');
		});
		
		$.doTimeout('anim72', 220, function(){
			$("#p_development").animate( { opacity : 1, left : '0px' }, 600 );
			clearTimeoutObj('anim72');
		});
		
		$.doTimeout('anim73', 260, function(){
			$("#h1_apps").animate( { opacity : 1, left : '900px' }, 600 );
			clearTimeoutObj('anim73');
		});
		
		$.doTimeout('anim74', 300, function(){
			$("#p_apps").animate( { opacity : 1, left : '690px' }, 600 );
			clearTimeoutObj('anim74');
		});
		
		$.doTimeout('anim75', 340, function(){
			$("#h1_seo").animate( { opacity : 1, left : '790px' }, 600 );
			clearTimeoutObj('anim75');
		});
		
		$.doTimeout('anim76', 380, function(){
			$("#p_seo").animate( { opacity : 1, left : '690px' }, 600 );
			clearTimeoutObj('anim76');
		});

		$.doTimeout('anim77', 380, function(){
			$("#qr").animate( { opacity : 1, width : '227px', height : '227px', left : '370px', top : '198px' }, 100, function(){
				$("#qr").animate( { opacity : 1, width : '207px', height : '207px', left : '375px', top : '208px' }, 200 );
			});
			clearTimeoutObj('anim77');
		});
		
		$.doTimeout('anim82', 440, function(){
			$("#trail").animate( { opacity : 1 }, 10, function(){
				$("#trail_mask").animate( { left : '800px' }, 500 );			
			});
			clearTimeoutObj('anim82');
		});
		
		$.doTimeout('anim83', 770, function(){
			$("#scan_me").animate( { opacity : 1, width : '213px', height : '163px', left : '737px', top : '5px' }, 100, function(){
				$("#scan_me").animate( { opacity : 1, width : '193px', height : '143px', left : '745px', top : '17px' }, 100, function(){ $("#scan_me").css({ "filter" : "none !important" }); } );
			});
			clearTimeoutObj('anim83');
		});
		
		 $.doTimeout('anim83a', 850, function(){
			$("#see_web").animate( { opacity : 1, width : '174px', height : '61px', top : '0px', left : '0px' }, 320 );
			$("#see_web_shadow").animate( { opacity : 1, width : '204px', height : '23px', left : '-12px' }, 320, function(){
				$("#see_web_box").html('<a id="lnk_see_web" href="javascript:;" onclick="" title="See Web Stuff"><span id="btn_see_web" class="button_see">See Web Stuff</span></a><img id="see_web_shadow" style="position: absolute; top: 66px; left: -12px;" src="'+director.webpath+'images/home/shadow.png" width="204" height="23" alt="See Web Stuff" />');
				$("#lnk_see_web").hover(
					function(){
						$("#btn_see_web").css('backgroundPosition', '-173px 0px');
					},
					function(){
						$("#btn_see_web").css('backgroundPosition', '0px 0px');
					}
				).click(function(){
					var mlHtml = '';

					mlHtml += '<h1 id="h1_modal" class="zero_opac">Web</h1>';
					mlHtml += '<h4 id="h4_modal" class="zero_opac"></h4>';
					mlHtml += '<p id="p_modal" class="zero_opac"></p>';
					mlHtml += '<img id="design_cloud" class="zero_opac" src="'+director.webpath+'images/modal_large/cloud.png" width="653" height="278" alt="The Bridge - Cloud" />';
					mlHtml += '<img id="design_monitor" class="zero_opac" src="'+director.webpath+'images/modal_large/'+(director.ie8 ? 'monitor_ie8' : 'monitor')+'.png" width="601" height="423" alt="The Bridge - Monitor" />';
					mlHtml += '<img id="design_text_view" class="zero_opac" src="'+director.webpath+'images/modal_large/text_view_large.'+(director.ie8 ? 'gif' : 'png')+'" width="267" height="123" alt="The Bridge - View Large" />';
					mlHtml += '<div id="modal_slider" class="zero_opac">';
					mlHtml += '	<ul>';
					mlHtml += '		<li><img id="web_HHB" src="'+director.webpath+'images/modal_large/web/hhb.jpg" width="469" height="265" alt="The Bridge -  HHB  - hhb.co.uk" /></li>';
					mlHtml += '		<li><img id="web_Aquos-Yachts" src="'+director.webpath+'images/modal_large/web/aquos.jpg" width="469" height="265" alt="The Bridge - Aquos - aquosyachts.com" /></li>';
					mlHtml += '		<li><img id="web_Nexo" src="'+director.webpath+'images/modal_large/web/nexo.jpg" width="469" height="265" alt="The Bridge - Nexo - nexo-sa.com" /></li>';
					mlHtml += '	</ul>';
					mlHtml += '</div>';
					
					$("#modal_large > #modal_body > #mlbody").html('').append(mlHtml);
					
					system.modalLargeOpen('web');
				});
			});
			clearTimeoutObj('anim83a');
		});
    };
    
    // ------------------------------ END CONTENT 4 ---------------------------------
    
    
    
    
    // ---------------------------------- CONTENT 5 -------------------------------------

    function content5(){
		$("#text_social").animate( { opacity : 1 }, 1400 );

		$.doTimeout('anim24', 80, function(){
			$("#text_so_cool").animate( { opacity : 1 }, 1200, function(){
				clearTimeoutObj('anim24');
			});
		});
		
		$.doTimeout('anim25', 140, function(){
			$("#break").animate( { opacity : 1 }, 1200, function(){
				clearTimeoutObj('anim25');
			});
		});
		
		$.doTimeout('anim27', 180, function(){
			$("#p_intro5").animate( { opacity : 1, left : '0' }, 600, function(){
				clearTimeoutObj('anim27');
			});
		});
		
		$.doTimeout('anim28', 220, function(){
			$("#h1_facebook").animate( { opacity : 1, left : '0' }, 600, function(){
				clearTimeoutObj('anim28');
			});
		});
		
		$.doTimeout('anim29', 320, function(){
			$("#p_facebook").animate( { opacity : 1, left : '0' }, 600, function(){
				clearTimeoutObj('anim29');
			});
		});
		
		$.doTimeout('anim30', 360, function(){
			$("#h1_twitter").animate( { opacity : 1, left : '880px' }, 600, function(){
				clearTimeoutObj('anim30');
			});
		});
		
		$.doTimeout('anim31', 400, function(){
			$("#p_twitter").animate( { opacity : 1, left : '690px' }, 600, function(){
				clearTimeoutObj('anim31');
			});
		});
		
		$.doTimeout('anim32', 460, function(){
			$("#h1_youtube").animate( { opacity : 1, left : '860px' }, 600, function(){
				clearTimeoutObj('anim32');
			});
		});
		
		$.doTimeout('anim33', 500, function(){
			$("#p_youtube").animate( { opacity : 1, left : '680px' }, 600, function(){
				clearTimeoutObj('anim33');
			});
		});
		
		$.doTimeout('anim34', 600, function(){
			$("#blue_bird").animate( { opacity : 1, top : '205px' }, { duration : 1000, easing : 'easeOutElastic' , complete : function(){
				clearTimeoutObj('anim34');
			}});
		});
		
		$.doTimeout('anim34a', 960, function(){
			$("#see_social").animate( { opacity : 1, width : '174px', height : '61px', top : '0px', left : '0px' }, 320 );
			$("#see_social_shadow").animate( { opacity : 1, width : '204px', height : '23px', left : '-12px' }, 320, function(){
				$("#see_social_box").html('<a id="lnk_see_social" href="javascript:;" onclick="" title="See Social Stuff"><span id="btn_see_social" class="button_see">See Social Stuff</span></a><img id="see_design_shadow" style="position: absolute; top: 66px; left: -12px;" src="'+director.webpath+'images/home/shadow.png" width="204" height="23" alt="See Social Stuff" />');
				$("#lnk_see_social").hover(
					function(){
						$("#btn_see_social").css('backgroundPosition', '-173px 0px');
					},
					function(){
						$("#btn_see_social").css('backgroundPosition', '0px 0px');
					}
				).click(function(){
					var mlHtml = '';
					mlHtml += '<h1 id="h1_modal" class="zero_opac">Social</h1>';
					mlHtml += '<h4 id="h4_modal" class="zero_opac"></h4>';
					mlHtml += '<p id="p_modal" class="zero_opac"></p>';
					mlHtml += '<img id="design_cloud" class="zero_opac" src="'+director.webpath+'images/modal_large/cloud.png" width="653" height="278" alt="The Bridge - Cloud" />';
					mlHtml += '<img id="design_monitor" class="zero_opac" src="'+director.webpath+'images/modal_large/'+(director.ie8 ? 'monitor_ie8' : 'monitor')+'.png" width="601" height="423" alt="The Bridge - Monitor" />';
					mlHtml += '<img id="design_text_view" class="zero_opac" src="'+director.webpath+'images/modal_large/text_view_large.'+(director.ie8 ? 'gif' : 'png')+'" width="267" height="123" alt="The Bridge - View Large" />';
					mlHtml += '<div id="modal_slider" class="zero_opac">';
					mlHtml += '	<ul>';
					mlHtml += '		<li><img id="social_Denon-Dj" src="'+director.webpath+'images/modal_large/social/denondj.jpg" width="469" height="265" alt="The Bridge - Denon Dj" /></li>';
					mlHtml += '		<li><img id="social_Yamaha-Commercial-Audio-Europe" src="'+director.webpath+'images/modal_large/social/yamahacomp.jpg" width="469" height="265" alt="The Bridge - Yamaha Commercial Audio Europe Photo Competition" /></li>';
					mlHtml += '		<li><img id="social_Siemens" src="'+director.webpath+'images/modal_large/social/siemens.jpg" width="469" height="265" alt="The Bridge - Siemens Home UK - Mobile" /></li>';
					mlHtml += '	</ul>';
					mlHtml += '</div>';
					
					$("#modal_large > #modal_body > #mlbody").html('').append(mlHtml);
					
					system.modalLargeOpen('social');
				});
			});
			clearTimeoutObj('anim34a');
		});
    };
    
    // ------------------------------ END CONTENT 5 ---------------------------------




	// ---------------------------------- CONTENT 6 -------------------------------------

    function content6(){
    	$("#phone").animate( { opacity : 1, top : '230px' }, { duration : 400, queue : false } );
    	$("#phone_screen_off").animate( { opacity : 1, top : '316px' }, { duration : 400, queue : false } );
    	
		$.doTimeout('anim35', 380, function(){
			$("#text_email").animate( { opacity : 1 }, 1200 );
			clearTimeoutObj('anim35');
		});
		
		$.doTimeout('anim38', 460, function(){
			$("#email").animate( { opacity : 1, top : '140px' }, 600 );
			clearTimeoutObj('anim38');
		});
		
		$.doTimeout('anim39', 540, function(){
			$("#h1_campaigns").animate( { opacity : 1, top : '340px' }, 600 );
			clearTimeoutObj('anim39');
		});
		
		$.doTimeout('anim40', 620, function(){
			$("#p_campaigns").animate( { opacity : 1, top : '380px' }, 600 );
			clearTimeoutObj('anim40');
		});
		
		$.doTimeout('anim41', 700, function(){
			$("#analytics").animate( { opacity : 1, top : '160px' }, 600 );
			clearTimeoutObj('anim41');
		});
		
		$.doTimeout('anim42', 780, function(){
			$("#h1_analytics").animate( { opacity : 1, top : '340px' }, 600 );
			clearTimeoutObj('anim42');
		});
		
		$.doTimeout('anim43', 960, function(){
			$("#p_analytics").animate( { opacity : 1, top : '380px' }, 600 );
			clearTimeoutObj('anim43');
		});
		
		$.doTimeout('anim44', 1920, function(){
			$("#new_mail").animate( { opacity : 1, top : '408px' }, { duration : 800, easing : 'easeOutElastic' });
			clearTimeoutObj('anim44');
		});
		
		$.doTimeout('anim44a', 4000, function(){
			$("#new_mail").animate( { opacity : 1, top : '418px' }, { duration : 400, queue : false } );
			$("#phone").animate( { opacity : 1, top : '240px' }, { duration : 400, queue : false } );
    		$("#phone_screen_off").animate( { opacity : 1, top : '326px' }, { duration : 400, queue : false, complete : function(){
    			$("#text_email").animate( { opacity : 0, top : '45px' }, { duration : 100, queue : false } );
    			$("#phone").animate( { top : '90px' }, { duration : 400, queue : false } );
    			$("#phone_screen_off").animate( { top : '176px' }, { duration : 400, queue : false } );
    			$("#new_mail").animate( { top : '268px' }, { duration : 400, queue : false } );
    		}});
			clearTimeoutObj('anim44a');
		});
		
		$.doTimeout('anim44b', 4400, function(){
			$("#new_mail").animate( { opacity : 0 }, 400, function(){
				$("#phone_screen_on").animate( { opacity : 1 }, 400, function(){
					$("#phone_screen_off").animate( { opacity : 0, top : '-1000px' }, { duration : 10 } );
					$("#email_header").animate( { opacity : 1, left : '380px' }, 400);
				});	
			});
			clearTimeoutObj('anim44b');
		});
		
		$.doTimeout('anim44c', 5300, function(){
			$("#email_body").animate( { opacity : 1}, 400);
			clearTimeoutObj('anim44c');
		});
		
		$.doTimeout('anim44d', 5500, function(){
			$("#p_c7_phone").animate( { opacity : 1, top : '350px' }, 400);
			clearTimeoutObj('anim44d');
		});
		
		$.doTimeout('anim44e', 5700, function(){
			$("#h5_c7_phone").animate( { opacity : 1, top : '455px' }, 400);
			clearTimeoutObj('anim44e');
		});
    };
    
    // ------------------------------ END CONTENT 6 ---------------------------------




	// ---------------------------------- CONTENT 7 -------------------------------------

    function content7(){
    	$("#cloud_left").animate( { opacity : 1, top : '314px', left : '0px' }, 800 );
    	$("#cloud_right").animate( { opacity : 1, top : '314px', left : '478px' }, 800 );
    	
		$.doTimeout('anim45', 390, function(){
			$("#television").animate( { opacity : 1 }, 1600 );
			$("#screen_black").animate( { opacity : 1 }, 1400);
			//$("#control_mask").animate( { opacity : 1 }, 1400);
			$("#screen").animate( { opacity : 1 }, 1200, function(){ $("#video").css('display', 'block'); } );
			clearTimeoutObj('anim45');
		});	
		
		$.doTimeout('anim46', 780, function(){
			$("#tvbutton1").animate( { opacity : 1 }, 600, function(){
				bindTvBtn1();
				
				$("#tv_lnk_1").click(function(){
					unbindTvBtn($("#tv_lnk_1"), $("#tvbutton1"));
					setScreen();
					bindTvBtn2();
					bindTvBtn3();
					loadMovie(director.vmovies[0]);
				});
			});
			clearTimeoutObj('anim46');
		});	
		
		$.doTimeout('anim47', 880, function(){
			$("#tvbutton2").animate( { opacity : 1 }, 600, function(){
				bindTvBtn2();
				
				$("#tv_lnk_2").click(function(){ 
					unbindTvBtn($("#tv_lnk_2"), $("#tvbutton2"));
					setScreen();
					bindTvBtn1();
					bindTvBtn3();
					loadMovie(director.vmovies[1]);
				});
			});
			clearTimeoutObj('anim47');
		});	
		
		$.doTimeout('anim48', 980, function(){
			$("#tvbutton3").animate( { opacity : 1 }, 600, function(){
				bindTvBtn3();
				
				$("#tv_lnk_3").click(function(){ 
					unbindTvBtn($("#tv_lnk_3"), $("#tvbutton3"));
					setScreen();						
					bindTvBtn1();
					bindTvBtn2();
					loadMovie(director.vmovies[2]);
				});
			});
			clearTimeoutObj('anim48');
		});	
		
		$.doTimeout('anim48x', 1060, function(){
			$("#btn_stop").animate( { opacity : 1 }, { duration : 600, easing : 'easeOutElastic', complete : function(){ 
				$("#btn_stop").click(function(e){
					e.preventDefault();
					$("#video").html('');
				});
			 } } );
			clearTimeoutObj('anim48x');
		});	

		$.doTimeout('anim48b', 1400, function(){
			$("#text_change_channels").animate( { opacity : 1, width: '224px', height : '131px', top : '-=20px', left : '-=20px' }, { duration : 800, easing : 'easeOutElastic', complete : function(){ $("#text_change_channels").css({ "filter" : "none !important" }); } } );
			clearTimeoutObj('anim48b');
		});	
    };
    
    function setScreen(){
    	if (director.screen){
			director.screen = false;
			$("#screen").animate( { opacity : 0, width : '0px', height : '0px', top : '+=155px', left : '+=204px' }, 400 );
		}
    };
    
    function loadMovie(vimeoId){
		$("#video").html('<iframe id="vimeo_tv" src="http://player.vimeo.com/video/'+vimeoId+'?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1&amp;api=1&amp;player_id=vimeo_tv" width="448" height="252" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');
    };
    
    function bindTvBtn1(){
    	$("#tv_lnk_1").css('cursor', 'pointer');
		$("#tvbutton1").css('backgroundPosition', '0px 0px');
					
    	$("#tv_lnk_1").hover(
			function(){
				$("#tvbutton1").css('backgroundPosition', '0px -20px');
			},
			function(){
				$("#tvbutton1").css('backgroundPosition', '0px 0px');
			}
		);
    };
    
    function bindTvBtn2(){
    	$("#tv_lnk_2").css('cursor', 'pointer');
		$("#tvbutton2").css('backgroundPosition', '0px 0px');
					
    	$("#tv_lnk_2").hover(
			function(){
				$("#tvbutton2").css('backgroundPosition', '0px -20px');
			},
			function(){
				$("#tvbutton2").css('backgroundPosition', '0px 0px');
			}
		);
    };
    
    function bindTvBtn3(){
    	$("#tv_lnk_3").css('cursor', 'pointer');
		$("#tvbutton3").css('backgroundPosition', '0px 0px');
					
    	$("#tv_lnk_3").hover(
			function(){
				$("#tvbutton3").css('backgroundPosition', '0px -20px');
			},
			function(){
				$("#tvbutton3").css('backgroundPosition', '0px 0px');
			}
		);
    };
    
    function unbindTvBtn(el1, el2){
    	el1.unbind('mouseenter mouseleave').css('cursor', 'text');
		el2.css('backgroundPosition', '0px -20px');
    };
    
    // ------------------------------ END CONTENT 7 ---------------------------------




	// ---------------------------------- CONTENT 8 -------------------------------------

    function content8(){
    	$("#c8_bridge_logo").animate( { opacity : 1 }, 1000 );
    	
		$.doTimeout('anim49', 120, function(){
			$("#h1_hello").animate( { opacity : 1 }, 1000 );
			$("#p_hear").animate( { opacity : 1 }, 1000 );
			clearTimeoutObj('anim49');
		});	
		
		$.doTimeout('anim50', 120, function(){
			$("#h4_address").animate( { opacity : 1 }, 1000 );
			$("#p_barn").animate( { opacity : 1 }, 1000 );
			$("#p_bridge").animate( { opacity : 1 }, 1000 );
			$("#p_address").animate( { opacity : 1 }, 1000 );
			$("#p_details").animate( { opacity : 1 }, 1000 );
			clearTimeoutObj('anim50');
		});
		
		$.doTimeout('anim51', 240, function(){
			$("#c8break").animate( { opacity : 1 }, 1000 );
			clearTimeoutObj('anim51');
		});
		
		$.doTimeout('anim52', 360, function(){
			$("#twitter").animate( { opacity : 1 }, 1000, function(){
				$("#twitter").click(function(){ window.open('http://twitter.com/thebridgemk', 'target-name'); });
			});
			$("#c8facebook").animate( { opacity : 1 }, 1000 );
			clearTimeoutObj('anim52');
		});

		$.doTimeout('anim53', 600, function(){
			$("#h5_details").animate( { opacity : 1 }, 1000 );
			$("#frm_e1").animate( { opacity : 1 }, 1000 );
			clearTimeoutObj('anim53');
		});
		
		$.doTimeout('anim54', 720, function(){
			$("#frm_e2").animate( { opacity : 1 }, 1000 );
			clearTimeoutObj('anim54');
		});
		
		$.doTimeout('anim55', 840, function(){
			$("#frm_e3").animate( { opacity : 1 }, 1000 );
			clearTimeoutObj('anim55');
		});
		
		$.doTimeout('anim56', 960, function(){
			$("#frm_e4").animate( { opacity : 1 }, 1000 );
			$("#frm_e5").animate( { opacity : 1 }, 1000 );
			clearTimeoutObj('anim56');
		});
		
		$.doTimeout('anim57', 1080, function(){
			$("#bubble_idea").animate( { opacity : 1, top : '-=120px' }, { duration : 1600, easing : 'easeOutElastic' } );
			clearTimeoutObj('anim57');
		});
		
		$("#frm_contact").submit(function(e){
			e.preventDefault();
			if($.cookie('contact')){
				if($(".form_message").is(":visible")){
		    		flashIt();
		    	}
				else{
					showMessage('good', 'Thank you for your recent submission.  We will be in touch shortly.');
				}
				return false;
			}
			else{
				var proceed = director.validateFrom($("#txt_name"), $("#txt_company"), $("#txt_email"), $("#txt_message"));
				
				if (proceed){
					director.sendMessage($("#frm_contact"), 'static');
				}
			}
		});
    };
    
    this.validateFrom = function(el1, el2, el3, el4){
    	var name = el1.val();
    	var company = el2.val();
    	var email = el3.val();
    	var message = el4.val();
    	
    	if (name == '' || name == 'Full name'){
    		showError(el1, 'Please fill in your full name');
    		return false;
    	}
    	
    	if (company == '' || company == 'Company name'){
    		showError(el2, 'Please fill in your company name');
    		return false;
    	}
    	
    	if (!isValidEmailAddress(email)){
    		showError(el3, 'Please fill in a valid email address');
    		return false;
    	}
    	
    	if (message == ''){
    		showError(el4, 'Please fill in a message');
    		return false;
    	}
    	
    	hideError();
    	return true;
    };
    
    function isValidEmailAddress(emailAddress) {
		var pattern = new RegExp(/^(("[\w-+\s]+")|([\w-+]+(?:\.[\w-+]+)*)|("[\w-+\s]+")([\w-+]+(?:\.[\w-+]+)*))(@((?:[\w-+]+\.)*\w[\w-+]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
		return pattern.test(emailAddress);
	};
    
    function showError(el, msg){
    	var erobj = $("#form_error");
    	var ofs = el.offset();
    	var elWidth = parseInt(el.width());
    	var posLeft = ofs.left + elWidth + 4;
    	var posTop = ofs.top - 5;
    	var txt = "*   "+msg+"   *";
    	var px = textWidth(txt);
    	
    	hideError();
    	
    	$("#form_error > #message").html(txt);
    	erobj.css( { left : posLeft+'px', top : posTop+'px', padding : '5px 10px 0 0' } );
    	erobj.animate( { opacity : 1, left : '-=30px' }, 200, function(){
    		erobj.animate( { left : '+=20px' }, 100 );
    	});

    	erobj.unbind().hover(
    		function(){
    			$("#form_error > #message").animate( { width : px+'px' }, 400 );
    			$("#form_error").animate( { left : '-='+(px-5)+'px' }, 400 );
    		},
    		function(){
    			$("#form_error > #message").animate( { width : '5px' }, 400 );
    			$("#form_error").animate( { left : '+='+(px-5)+'px' }, 400 );
    		}
    	);
    };
    
    function textWidth(txt){
    	var w = 0;
    	$('body').append("<span id=\"temp\" style=\"font-size: 14px; position: absolute; top: -100px; left: -100px;\">"+txt+"</span>");
    	w = $("#temp").width();
    	$("#temp").remove();
    	return w+15;
    };
    
    function hideError(){
    	if($("#form_error").is(":visible")){
    		$("#form_error").css( { opacity : 0 } );	
    	}
    };
    
    this.sendMessage = function(frmobj, type){  
    	if(type == 'static') $("#working_static").css('display', 'block');
    	
    	$.ajax({
    		type: 'GET',
    		cache: false,
			url: director.webpath+"ajax/req_contact.php",
			context: document.body,
			data : frmobj.serialize(),
			dataType : 'json',
			success: function(data, textStatus, jqXHR){
				if (data.status=='good'){
					if(type=='static'){
						$("#working_static").css('display', 'none');
						$.cookie('contact', 'sent', { expires: 1, path: '/' });
						showMessage(data.status, data.message);
						clearForm();
					}
					else{
						system.modalComplete('contact', 'sent', 1, 'Thanks for getting in touch.', 'zero_opac', 120);
					}
				}
				else{
					if(data.field != ''){
						if(type=='static'){
							switch (data.field){
								case 'name': showError($("#txt_name"), 'Please fill in your full name'); break;
				        		case 'company': showError($("#txt_company"), 'Please fill in your company name'); break;
								case 'email': showError($("#txt_email"), 'Please fill in your email address'); break;
				        		case 'message': showError($("#txt_message"), 'Please fill in a message'); break;
				        		default: showMessage(data.status, data.message); break;
				        	}		
			        	}
			        	else{
			        		switch (data.field){
				        		case 'name': showError($("#modal_txt_name"), 'Please fill in your full name'); break;
				        		case 'company': showError($("#modal_txt_company"), 'Please fill in your company name'); break;
								case 'email': showError($("#modal_txt_email"), 'Please fill in your email address'); break;
				        		case 'message': showError($("#modal_txt_message"), 'Please fill in a message'); break;
				        		default: showMessage(data.status, data.message); break;
				        	}	
			        	}
					}
					else{
						showMessage(data.status, data.message);
					}
				}
			},
			error: function(jqXHR, textStatus, errorThrown){
				console.log(errorThrown);
			}
		});
    };
    
    function clearForm() {
    	$("#txt_name").val('Full name');
    	$("#txt_company").val('Company name');
    	$("#txt_email").val('Email address');
    	$("#txt_message").val('');
    	$("#modal_txt_name").val('Full name');
    	$("#modal_txt_company").val('Company name');
    	$("#modal_txt_email").val('Email address');
    	$("#modal_txt_message").val('');
    };
    
    function showMessage(status, msg){
    	$(".form_message").html('<span id="'+status+'">'+msg+'</span>').show(400);
    };
    
    function hideMessage(status, msg){
    	$(".form_message").html('').hide(400);
    };
    
    function flashIt(){
    	$(".form_message").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
    };
    
    // ------------------------------ END CONTENT 8 ---------------------------------
};