// scrtipt.js - Javascript file for the Elevator site 01/06/2011
	// To do - 
	//		Pre load all the images in images/studio/thumbs-hover/
	
		/**
		* Function to change the size of the sections to stay the same size as the windows
		*/
		function fnResizeSection()
		{
			var windowHeight = $(window).height(); // Get the height of the window			
			var thisAnchor = $(".menu .active").attr('href'); // The active anchor
			
			// Make the height of every section the height of the window
			$(".clSection").height(windowHeight);
			
			// Find the active link and get the ID and slide back to it			
			$('html, body').stop().animate( // Stops any animation going on at the moment
			{
				scrollTop: $($(".menu .active").attr('href')).offset().top
			}, 1500,'easeInOutExpo');
				
			// Font size of the residents page
				/*var fontSize = 22;
				
				fontSize = parseInt($(document).width()/ 48);
				$('#idResidentsList, #idResidentsList a').css('font-size',fontSize + 'px');*/
			
		}
		
		/**
		 * Function to take in a class and make that element
		 * the same width and height as the screen
		 * If the screen is larger than the element the element
		 * will gerow to meet the screen size and be masked by
		 * the screen so you will only ever see the image
		 */
		function fnFullPageImage(imageClass)
		{
			// Setup the vars
			var thisImage = $('img.' + imageClass);
			var thisImageWidth = thisImage.width();
			var thisImageHeight = thisImage.height();
			var windowHeight = $(window).height();
			var windowWidth = $(window).width();

			// Reset the width and height
			//thisImage.css('height', 'auto');
			//thisImage.css('width', '100%');	
			
			// Position it absolutely and center it
			thisImage.css('position', 'absolute');
			thisImage.css('zIndex', 1);
			
			//$('.clCol3 h2').html('Using auto width');	
			
			// Change the height if the image is smaller than the window height
			if(thisImage.height() <= windowHeight && thisImage.width() > windowWidth)
			{
				thisImage.css('height', windowHeight);	
				//$('.clCol3 h2').html('1 Using window height ' + windowHeight);			
			}
			else // Change the width if the image is smaller than the window width
			{
				thisImage.css('width', windowWidth);
				//$('.clCol3 h2').html('1 Using window width ' + windowWidth);				
			}
			
			// Change the height if the image is smaller than the window height
			if(thisImage.height() <= windowHeight)
			{
				thisImage.css('width', 'auto');
				thisImage.css('height', windowHeight);	
				//$('.clCol3 h2').html('2 Using window height ' + windowHeight);			
			}
			
			if(thisImage.width() <= windowWidth) // Change the width if the image is smaller than the window width
			{
				thisImage.css('height', 'auto');
				thisImage.css('width', windowWidth);
				//$('.clCol3 h2').html('2 Using window width ' + windowWidth);				
			}

			var imageTop = (windowHeight - thisImage.outerHeight()) / 2;
			var imageLeft = (windowWidth - thisImage.outerWidth()) / 2;
			
			thisImage.css("top", imageTop);
			thisImage.css("left", imageLeft);
			
			thisImage.fadeIn('slow');
			
			//$('.clCol3 h2').html('Image top is (' + windowHeight + ' - ' + thisImage.outerHeight() + ') /2 = '  + imageTop);
			
		}
		
		//document.write('<style>#welcome .clStrapLine{display:none}</style>');
			
		
		/**
		 * Don't do anything in this function until the document is fully loaded
		 */
		$(document).ready(function()
		{
			// Fade in the page
				//$('#idPage').fadeIn('fast');	
			// If there is an Anchor on load make the corresponding menu item active (the next function will scroll to it)
				var thisURL = document.location.toString();
			
				if (thisURL.match('#')) // the URL contains an anchor
				{ 
					var urlAnchor = '#' + thisURL.split('#')[1]; // Split URL at #, take everything after (anchor), prepend with #
					
					$('.menu ul a').removeClass('active'); // Strips the actice class from the menu
					
					//$('.menu ul a').attr('href[' + urlAnchor +']').addClass('active'); // Find the menu item with this Anchor and make active
					 $('.menu ul a[href="' + urlAnchor + '"]').addClass('active'); // Find the menu item with this Anchor and make active
				}
				
			// Backstretch the rehearsal image
				//$.backstretch("/images/leon2.jpg", {theContainer: '#idActivityBack'});
				//$.backstretch("/images/rehearsal.jpg", {theContainer: '#idRehearsalBack'});
				
			// Resize the section on document ready
				fnResizeSection();
				
			// Resize the images on ready
				$('img.clFullPage').hide(); // Hide the images until the page is loaded
				$(window).bind("load", function()
				{
					fnFullPageImage('clFullPage');
					fnFullPageImage('clFullPage2');
					fnFullPageImage('clFullPage3');
				});	// After the page is loaded add the images			
			
			// When the user resizes the window
				$(window).resize(function()
				{
					fnResizeSection(); // Resize the section
					fnFullPageImage('clFullPage'); // Resize the images
					fnFullPageImage('clFullPage2'); // Resize the images
					fnFullPageImage('clFullPage3'); // Resize the images
				});
			
			// Check if the user has used a # to get to the page
				var myFile = document.location.toString();
			
			/**
			 * This will scroll down the page to the anchor cliked
			 * on but it will animate it instead of just going to it
			 */
				$('.menu ul a').bind('click',function(event)
				{
					var thisAnchor = $(this); // Makes the place in the DOM the anchor
									
					$('.menu ul a').removeClass('active'); // Strips the actice class from the menu
					$(this).addClass('active'); // Adds the active class to the menu at the place in the DOM we are in
									
					$('html, body').stop().animate( // Stops any animation going on at the moment
					{
						scrollTop: $(thisAnchor.attr('href')).offset().top
					}, 1500,'easeInOutExpo');
								
					event.preventDefault();
				});
				
				$('a .clSmallArrow').click(function()
				{
					var thisAnchor = $(this).parent('a'); // Makes the place in the DOM the anchor				
					$('.menu ul a').removeClass('active'); // Strips the actice class from the menu
					
					$('.menu ul a').each(function(index)
					{
						if($(this).attr('href') == thisAnchor.attr('href'))
						{
							$(this).addClass('active');
						}
					});
									
					$('html, body').stop().animate( // Stops any animation going on at the moment
					{
						scrollTop: $(thisAnchor.attr('href')).offset().top
					}, 1500,'easeInOutExpo');
					
					event.preventDefault();
				});
				
			// On a mouseover of the main menu get rid of the tooltip and put it back on the moueseout
				$('.menu ul a').hover(function() // Mouseover
				{
					var toolTip = $(this).attr('title'); // Create the tooTip var
					$(this).data('toolTip', toolTip); // Store the tooltip (title)
					$(this).removeAttr('title');// Take out the tootip
					
					//alert($(this).data('toolTip')); // Show the data held in the toolTip
				},
				function() // Mouseout
				{
					$(this).attr('title',$(this).data('toolTip')); // Put the title back
				});
			
			/**
			 * This is the function to create a slideshow
			 * Old version 2.0
			 */
				/*$(function()
				{					
					$.fn.supersized.options = {  
						startwidth: 300,  
						startheight: 200,
						vertical_center: 0,
						slideshow: 0,
						navigation: 1,
						transition: 5, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
						pause_hover: 1,
						slide_counter: 1,
						slide_captions: 1,
						slide_interval: 2000  
					};				
						
					$('#supersize').supersized(); // This will supersize anything under the ID of supersize
				});*/
			
			
			// Function to animate content when the arrow button is clicked
				$('.clArrowTop, .clArrowBottom').click(function()
				{
					var clicked = $(this); // Make the var for later
					var clickedParent = $(this).parent('.clContentPanel');
					
					clickedParent.find('.clContent').toggle('slow','swing', function() // Hide or show
					{
						if(clicked.hasClass('clArrowUp')) // Find if the element is displayed
						{
							clicked.removeClass('clArrowUp'); // Remove the class clArrowUp
							clicked.addClass('clArrowDown');// Add the class clArrowDown

						}
						else  // Find if the element is NOT displayed
						{							
							clicked.removeClass('clArrowDown'); // Remove the class clArrowDown
							clicked.addClass('clArrowUp');// Add the class clArrowUp
						}
					});
					
				});
			
			// Light box gallery
			// When the lightbox is set to a fixed width and height it looks strange if the images are smaller than the box,
			// To combat this we calculate the screen height and width and is they are smaller than the image we set the 
			// box to that width and height, else set the box to the height and width of the image
						
				var boxHeight = $("#studio").height(); // Get the height
				var boxWidth = $("#studio").width(); // Get the width			
				var imageHeight = 650;// Find the image height
				var imageWidth = 990;// Find the image width
				 
				 // Find 90% of the window
				boxHeight = (boxHeight/100)*90;
				boxWidth = (imageWidth/100)*90;
				
				if(boxHeight >= imageHeight){boxHeight = imageHeight;} // If the window is larger than the image use the image
				if(boxWidth >= imageWidth){boxWidth = imageWidth;} // If the window is larger than the image use the image
				
				$(".clStudioGallery a[rel='elevatorGallery1']")
				.colorbox(
				{
					slideshow: true,
					slideshowSpeed: 5000,
					scalePhotos: true,
					width: boxWidth,
					height: boxHeight
				});

			
			// Twitter Feed
				$("#idActivityContent .clCol2").getTwitter({
					userName: "ElevatorStudios",
					numTweets: 10,
					loaderText: "Loading tweets...",
					slideIn: true,
					showHeading: false,
					headingText: "<a href='#'>Twitter</a>",
					showProfileLink: true
				});
				
			// Control the Studio gallery mouse over
				$('.clImageHolder a').hover(function(){
					//alert('Your over');
					var thisURL = $(this).find('img').attr("src"); // Get the url					
					var beginURL = thisURL.split('thumbs')[0]; // Split the url at thumbs
					var endURL = thisURL.split('thumbs')[1]; // Split the url at thumbs					
					var hoverURL = beginURL + 'thumbs-hover' + endURL // Hover URL 
					
					$(this).find('img').attr("src", hoverURL); // Change it to the hover version					
				},
				function ()
				{
					//alert('Your out');
					var thisURL = $(this).find('img').attr("src"); // Get the url					
					var beginURL = thisURL.split('thumbs-hover')[0]; // Split the url at thumbs
					var endURL = thisURL.split('thumbs-hover')[1]; // Split the url at thumbs					
					var hoverURL = beginURL + 'thumbs' + endURL // Hover URL 
					
					$(this).find('img').attr("src", hoverURL); // Change it to the hover version					
				});
				
				
			 // Vimeo feed
				/*$('#idActivityContent .clCol3 .clVimeoFeed').rssfeed('http://vimeo.com/elevatorstudios/videos/rss', {
					limit: 5
				});
				// Have the feed noe we have to change it
				
					// div: #idActivityContent .clCol3 .clVimeoFeed
					// url: 'http://vimeo.com/elevatorstudios/videos/rss',

			
			// Facebook iFrame extra css
			/*var cssLink = document.createElement("link") 
			cssLink.href = "/styles/facebook.css"; 
			cssLink.rel = "stylesheet"; 
			cssLink.type = "text/css"; 
			frames['facebook-frame'].document.body.appendChild(cssLink);*/
			
			/*var iframe = top.frames[facebook-frame].document;
			var css = '' +
					  '<style type="text/css">' +
					  'body{margin:0;padding:0;background:transparent}' +
					  '</style>';
			iframe.open();
			iframe.write(css);
			iframe.close();*/
			//$("#idFaceBookFrame").contents().find("#stream_content").css("background","#000");
			//$("#idFaceBookFrame").contents().find("a").css("background-color","#BADA55");
			/*$("#idFaceBookFrame").contents().find("#stream_content").html();
			
			$("#idFaceBookFrame").ready(function() { 
				$("#idFaceBookFrame").contents().find("body").css("background","#000");
			});*/
			
			/*$.fn.iframeReady = function(callback){
			return this.each(function(){
				var e = this;
				var intervalId = setInterval(function(){
					if ( $(e).contents().find('body').size() > 0 ) {
						callback.apply( $(e).contents().find('body') , [] );
		
						clearInterval(intervalId);
					}
				}, 100);
			});
			
			alert();
		};*/
		
			/*$("#idFaceBookFrame").load(function() { 
				$("#idFaceBookFrame").contents().find("body").css("background","#000");
			});*/
		
			/*$("#idFaceBookFrame").ready(function() { 
				$("#idFaceBookFrame").css("background","#f00");
				$("#idFaceBookFrame").contents().find("#stream_content").css("background","#000");
			});*/
			
			// Fade in the strapline
				//$('#welcome .clStrapLine').slideDown(800);
			
					
		});