//We create variables which are used
      var $itemCounter = 0;
	  var $currentNewsItem = 0;
	  var $currentVideoItem = 0;	
      var $lastSwfContainer = null;
      var $lastSwfContents = null;
	  var $renderVideoItem = true;
      var $videoContent = new Array();
      var $newsContent = new Array();
	  var $animationDuration = 750;
	  var $contentWidth = 0; 

//We then create the URL for the News and Video Feeds  (www.tigeraspect.co.uk)            
	  var $newsFeed = "http://www.tigeraspect.co.uk/data/news.aspx";
	  var $videoFeed = "http://www.tigeraspect.co.uk/data/youtube.aspx";
	  
//We then create the URL for the News and Video Feeds  (www2.tigeraspect.co.uk)            
	  //var $newsFeed = "http://www2.tigeraspect.co.uk/feed/ ";
	  //var $videoFeed = "http://www2.tigeraspect.co.uk/data/youtube.php";
	  
	  
//This handles when the document has finshed loaded
    $(document).ready(function(){
			 
		//We setup the lightbox component                      
			$.fn.prettyPhoto({
				animationSpeed: 'normal', /* fast/slow/normal */
				padding: 30, /* padding for each side of the picture */
				opacity: 0.5, /* Value betwee 0 and 1 */
				showTitle: false, /* true/false */
				allowresize: true, /* true/false */
				counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
				theme: 'dark_square', /* light_rounded / dark_rounded / light_square / dark_square */
				hideflash: true, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
				modal: false, /* If set to true, only the close button will close the window */
				changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
				callback: function(){} /* Called when prettyPhoto is closed */
			});                         

		 //We then set the properties and callbacks                      
			$("#content-slider").slider({ animate: true, slide: handleSliderSlide});
			$.swapImage(".swapImage");	                                               
			loadFeeds();  
	  });


//This function handles showing the High Definition version of the YouTube video in a lightbox
    function playYouTubeVideo($youtubeVideo) {
	  var $lightboxURL = "http://www.youtube.com/watch?v=" + $youtubeVideo + "?fmt=22&iframe=true&height=370&width=590";
	  $.prettyPhoto.open($lightboxURL);
	}

//This function determine if the selected category is vaild
	function isValidCategory($category) {      
		if($category == "Children"){ return true; }
		else if($category == "Animation"){ return true; }
		else if($category == "Comedy"){ return true; }
		else if($category == "Drama"){ return true; }
		else if($category == "Factual"){ return true; }
		else if($category == "Features"){ return true; }
		else if($category == "Pictures"){ return true; }
		else if($category == "US"){ return true; }
		else{ return false; }
	}

//This handles the the slider preforms a SLIDE event	
    function handleSliderSlide(e, ui){
        var maxScroll = parseInt( $("#content-holder").width() - $("#html-body").width() );
		var scrollAmount = 	0- parseInt((ui.value/100) * maxScroll);	
		//$("#content-holder").animate({left: scrollAmount}, {duration: 150, easing: 'linear'});
		$("#content-holder").css('left', scrollAmount + 'px');
    }



//We then handle getting the lastest video feed
      function loadFeeds() {
            
		//clear the content in the div ready to show the next feed
			$("#content-holder").empty();
			$("#content-holder").css('width', '0px');
			$("#content-holder").css('position', 'absolute');
			$("#main-content").css("overflow", "hidden");
			$("#homepage-menu").css("overflow", "hidden");
 			$("#content-holder").css('left', '0px');
			  
		//We then add in the loading bar animation
			 $('<div id="loading-animation"></div>').appendTo("#content-holder");
			 $("#loading-animation" ).css('visibility', 'visible');                                                
			 $("#loading-animation" ).css('opacity', '0');
			 $("#loading-animation" ).animate({ opacity: 1}, 500);
			 var $preloaderPosition = parseInt( ($("#html-body").width() / 2)  );
			 $("#content-holder").css('left', $preloaderPosition + 'px');
			 $("#loading-animation").animate({opacity: 1}, {duration: $animationDuration, easing: 'easeOutBack'}, getFeeds());
	  }



//We then handle getting the lastest video feed
      function getFeeds() {
            
		//Firstly setup the variables needed to get the feeds
			$videoContent = new Array();
			$newsContent = new Array();
  
		//We use the JQuery get to the RSS feed for the video content
			$.get($videoFeed, function(xml){
					  
				//We then add each video                                                
					$(xml).find('entry').each(function() {
						var $videoCategory = "Entertainment";                                                      
						var $title = $(this).find('title:first').text();
						if($title.length > 30) $title = $title.substr(0,30) + " [...]";
						var $videoID = $(this).find('id:first').text().split("http://gdata.youtube.com/feeds/api/videos/")[1];
						var $publishedDateStr = $(this).find('published:first').text();
						var $publishedDate = + $publishedDateStr.substring(8,10) +"." + $publishedDateStr.substring(5,7) + "." + $publishedDateStr.substring(0,4)                                                                                                              	
						$(this).find('category').each(function() { if(isValidCategory($videoCategory) == false) { $videoCategory = $(this).attr('term');} });					
						if(isValidCategory($videoCategory) == false ){ $videoCategory = "Entertainment"; }
						else if($videoCategory == "Factual" || $videoCategory == "Features"){ $videoCategory = "Factual And Features"; }
						else if($videoCategory == "Animation" || $videoCategory == "Children"){ $videoCategory = "Animation And Children's"; }
						$videoContent.push({videoID:$videoID, title: $title, publishedDate: $publishedDate, category:$videoCategory});   
					});

				//We then add each news story    
					$.get($newsFeed, function(xml){
						$(xml).find('item').each(function() {                                   
							  var $description = $(this).find('description').text();
							  var $link = $(this).find('guid').text();                              
							  var $publishedDate = new Date(Date.parse( $(this).find('pubDate').text() ));
							  var $publishedDateStr = + $publishedDate.getDate() +"." + ($publishedDate.getMonth()+1) + "." + $publishedDate.getFullYear();
							  $newsContent.push({description: $description, link: $link, publishedDate:$publishedDateStr, link: $link, category:"latest news"});  
						});
			
						//We then add each news story  
							$itemCounter = 0;
							$currentNewsItem = 0;
							$currentVideoItem = 0;
							$renderVideoItem = true;
							$("#content-holder").empty();
							$("#content-holder").css('width', "0");						 
							$("#loading-animation" ).animate({ opacity: 1}, 500, render());
					}); 
			});
      } 

//This function adds a swf item to the scrollable container					
    function render() {       
		
		//We create local variables
			var $preformNextRender = ($newsContent[$currentNewsItem] != null || $videoContent[$currentVideoItem] != null);
 		
		//We handle adding information about the company		
			if($itemCounter == 0){
				 addAboutCompany($itemCounter);		   

		//We then handle rendering video content
			}else if(($renderVideoItem == true && $videoContent[$currentVideoItem] != null) || ($newsContent[$currentNewsItem] == null && $videoContent[$currentVideoItem] != null)){
				addWidgetItem($itemCounter, $videoContent[$currentVideoItem]);
				$currentVideoItem++;

		//Otherwise we attempt to render news content
			}else if($newsContent[$currentNewsItem] != null){                                                         
				addNewsContent($itemCounter, $newsContent[$currentNewsItem], $newsContent[$currentNewsItem + 1]);
				$currentNewsItem = $currentNewsItem + 2;									
			}

		//We then update the counter and renderstate		
			if($preformNextRender == true){
				$contentWidth = ( (364 * (($itemCounter) + 1)) + (364/2) );				
				$("#content-holder").css('width', $contentWidth + "px");					
				var scrollAmount = 	0 - ($contentWidth - $("#html-body").width());	
				$("#content-holder").animate({left: scrollAmount }, {duration: $animationDuration, easing: 'linear'});				
				if($itemCounter > 0) $renderVideoItem = !$renderVideoItem;				
				$itemCounter++;	
				window.setTimeout(render, $animationDuration + 100);
			}else{			
			   $contentWidth = (364 * $itemCounter);				
			   $("#content-holder").css('width', $contentWidth + "px");				
			   $("#content-holder").animate({left: 0}, {duration: $animationDuration, easing: 'linear'}, showScrollBar());
			}
    };

//This function adds a swf item to the scrollable container					
    function showScrollBar() {
		$("#homepage-menu").css('visibility', 'visible');                                                
		$("#homepage-menu").css('opacity', '0');
		$("#homepage-menu").animate({ opacity: 1}, 500);
		$("#homepage-menu").animate({opacity: 1}, {duration: $animationDuration, easing: 'easeOutBack'});
	}


//This function adds a swf item to the scrollable container					
    function addNewsContent($currentCount, $topNewsData, $bottomNewsData) {
		if($topNewsData != null) addNewsItem("top", $currentCount, $topNewsData)        
		if($bottomNewsData != null) addNewsItem("bottom", $currentCount, $bottomNewsData);
	}


//This function adds a swf item to the scrollable container					
    function addWidgetItem($counter, $data) {
            
		//We define the variables used to create the item       
			var $widgetContainer = "widgetContainer" + $counter;
			var $widgetHTMLContainer = "widgetHTMLContainer" + $counter;
			var $widgetSWFContainer = "widgetSWFContainer" + $counter;
			var $widgetSWFLauncher = "widgetSWFLauncher" + $counter;
			var $widgetSWFContents = "widgetSWFContents" + $counter; 
			var $htmlContent = "";

		//We then create the html version of the content
			$htmlContent += '<div id="' + $widgetContainer + '" class="widgetItem">';
			$htmlContent += '   <div id="' + $widgetSWFContainer + '" class="flashWidget"><div id="' + $widgetSWFContents + '"><a href="http://www.macromedia.com/go/getflash/"><img src="wp-content/themes/magazeen/homepage/images/flash_alternative.jpg"></a></div></div>';                              
			$htmlContent += '   <div id="' + $widgetHTMLContainer + '" class="widgetHTMLContent">';
			
		//We then determine if they have the correct flash version to view the widget
			var $htmlCategory = $data.category
			$htmlContent += '<div class="swfImage"><img src="http://img.youtube.com/vi/' + $data.videoID + '/0.jpg" width="320" height="240"/></div>';
			$htmlContent += '<div id="' + $widgetSWFLauncher + '" class="swfImageOverlay"></div>';			
			$htmlContent += '<div class="swfTitle">' + $data.title + '</div>';
			$htmlContent += '<div class="swfPublishedDate">Posted: ' + $data.publishedDate + '</div>';
			$htmlContent += '<div class="swfCategory">' + $htmlCategory + '</div>';
			$htmlContent += '</div>';
			$htmlContent += '</div>';
			$($htmlContent).appendTo("#content-holder");

		//We then insert a click event to handle showing the flash content and then animate the content in left as cards
			var $clearSpringWidget = "http://widgets.clearspring.com/o/4a8a873ea3620e02/4a97db5f524cf02e/4a8a873ea3620e02/16e161b7/-/-/-/videoID/" + $data.videoID + "/title/" + $data.title + "/publishedDate/" + $data.publishedDate + "/category/" + $data.category + "";
			$("#" + $widgetSWFLauncher).click( function(){ showFlashWidget($widgetSWFContainer +'', $widgetSWFContents+'', $clearSpringWidget +''); } );
			$("#" + $widgetContainer).css('position', 'absolute');
			$("#" + $widgetContainer).css('left', 364 * ($itemCounter - 1));
			$("#" + $widgetContainer).animate({ left: 364 * $itemCounter}, {duration: $animationDuration, easing: 'easeOutBack'});
	}

//This function adds information about the company				
    function addAboutCompany($counter) {
		var $aboutContainerClass = "aboutCompany";
		var $aboutContainer = "aboutCompany" + $itemCounter;                                                               
		var $htmlContent = '<div id="' + $aboutContainer  + '" class="' + $aboutContainerClass + '">';
		$htmlContent += '	<div class="aboutHTMLContent">'; 
		$htmlContent += '			<h6>ABOUT TIGER ASPECT</h6>';
		$htmlContent += "			<p>As one of the UK's leading TV and film production companies, Tiger Aspect works with top writers, performers and programme makers to produce great programming.</p>";
		$htmlContent += "			<p>We create genre-defining, ground-breaking and most importantly popular quality programming for all the UK's main terrestrial and non-terrestrial broadcasters and for major international markets. The company has been producing hits for over two decades, working with the UK's best talent.</p>";
		$htmlContent += "			<p>Tiger Aspect Productions<br />5 Soho Square, London W1D 3QA<br />T: +44 (0) 20 7434 6700<br />F: +44 (0) 20 7434 1798<br />E: <a href='mailto:general@tigeraspect.co.uk'>general@tigeraspect.co.uk</a></p>";
		$htmlContent += '	</div>';		
		$htmlContent += '</div>';
		$($htmlContent).appendTo("#content-holder");
		$("#" + $aboutContainer).css('position', 'absolute');
		$("#" + $aboutContainer).css('left', 364 * ($itemCounter - 1));
		$("#" + $aboutContainer).animate({ left: 364 * $itemCounter}, {duration: $animationDuration, easing: 'easeOutBack'});
     }

//This function adds a swf item to the scrollable container					
    function addNewsItem($position, $counter, $data) {
		var $newsContainerClass = "newsItemTop";
		var $newsContainer = "newsContainerTop" + $itemCounter;                   
		if($position == "bottom") $newsContainerClass = "newsItemBottom";
		if($position == "bottom") $newsContainer = "newsContainerBottom" + $itemCounter;                                              
		var $htmlContent = '<div id="' + $newsContainer  + '" class="' + $newsContainerClass + '">';                                                         
		$htmlContent += '  <div class="newsDescription">' + $data.description + '</div>';
		$htmlContent += '  <div class="newsPublishedDate">Posted: ' + $data.publishedDate + '</div>';
		$htmlContent += '  <div class="newsCategory">' + $data.category + '</div>';
		$htmlContent += '  <div class="newsReadMore"><a href="'+ $data.link  + '">Read More...</a></div>';
		$htmlContent += '</div>';
		$($htmlContent).appendTo("#content-holder");
		$("#" + $newsContainer).css('position', 'absolute');
		$("#" + $newsContainer).css('left', 364 * ($itemCounter - 1));
		$("#" + $newsContainer).animate({ left: 364 * $itemCounter}, {duration: $animationDuration, easing: 'easeOutBack'});
     }


//This function handles showing the flash widget
    function showFlashWidget($swfContainer, $swfContents, $swfURL) {                  
		$("#" + $swfContainer).css('visibility', 'visible');            
		swfobject.embedSWF($swfURL, $swfContents, "330", "354", "9.0.128", "", {mode:"external"}, {bgcolor:"EFEFEF", menu:"false"} , {name:"flash-youtube-widget", id:"flash-youtube-widget"});
		$("#" + $swfContainer).css('opacity', '0');                              
		$("#" + $swfContainer).animate({ opacity: 1.0}, 500);
		if($lastSwfContainer != null){
			$("#" + $lastSwfContainer).css('visibility', 'hidden');
			$("#" + $lastSwfContainer).html('<div id="' + $lastSwfContents + '"></div>');    
		}
		$lastSwfContainer = $swfContainer;
		$lastSwfContents =  $swfContents; 
    }