/*
	Copyright Code Computerlove Ltd 2009
	Build: 1.1.0.22
	Date: 10/09/2009 11:48:10
*/

(function($j){
	
	Code.registerNamespace('Website.Components');
	
	Website.Components.RoadMap = Code.Class.extend({
		
		//<private>
		
		_initialContent: null,
		_roadMapBrowser: $j('<div class="roadmap-browser"><div id="roadmap-overlay"><div class="js-close close"><img src="_Client/Images/Content/EventsTimeline/close.gif" alt="close" /></div><div id="post-dates"></div><div class="posts-container"></div></div></div>'),
		_activeMonths: null,
		_activeYears: null,
		
		//function is only called the first time the page is requested
		_loadInitialContent: function(){
			
			var self = this;
			
			if (self._initialContent != null){
				alert('self._initialContent is not null');
				return;
			}
			
			//Show loader
			$j('div.posts-container').html('<div style="margin:180px 20px 20px 180px;"><img style="padding-left:40px;" src="' + appPath + '_Client/Images/Global/AjaxLoaderLarge.gif" /><p style="color:#B8B3B5;">Loading North West Events...</p></div>');
			
			setTimeout(function(){
			
				$j.ajax({
					url: Code.resolveUrl('~/northwest-roadmap/index.htm'),
					dataType: 'html',
					success: function(data, textStatus){
					
						self._initialContent = '<div class="dynamic-copy">' + data + '</div>';
					},
					complete: function(XMLHttpRequest, textStatus){
					
						//When data has been loaded, initialise the navigation
						self._initialiseRoadMapNavigation();
					}
				});	
			
			}, 2000);			
		},
		
		_initialiseRoadMapNavigation: function(){
			
			var self = this;
			self._roadMapBrowser = $j();

			self._activeYears = $j('<div id="post-years"><ul></ul></div>');
			
			var years = [];
			
			$j('div.posts-container h2', self._initialContent).each(function(i){
				
				var year = $j(this).html().split(' ')[1];
				
				var isUnique = true;
				
				for (x in years) {
					if (year == years[x]){
						isUnique = false;
					}
				}
				
				if (isUnique)	{
					years.push(year);
					$j('ul', self._activeYears).append('<li><a href="#" class="js-year-link">' + year + '</a></li>');
				}
			});
			
			$j('div#post-dates', self._roadMapBrowser).append(self._activeYears);
			
			//remove css outline around anchor tags
			$j('a.js-year-link', self._roadMapBrowser).focus(function(){
				if(this.blur)this.blur();
			});
			
			self._renderEventsBrowser();
			self._initialiseNavigationEvents();
		},
		
		_initialiseNavigationMonths: function(year) {
		
			var self = this;
		
			self._activeMonths = $j('<div id="post-months"><ul></ul></div>');
			var months = [];
			
			$j('div.posts-container', self._initialContent).each(function(i){
				
				var month = $j('h2', this).html().split(' ')[0];
				var currentYear = $j('h2', this).html().split(' ')[1];
				
				if (currentYear == year) {
				
					var isUnique = true;
					
					for (x in months) {
						if (month == months[x]){
							isUnique = false;
						}
					}
					
					if (isUnique)	{
						months.push(month);
						$j('ul', self._activeMonths).append('<li><a href="#" class="js-month-link">' + month + '</a></li>');
					}
				}
			});	
			
			$j('div#post-months', self._roadMapBrowser).remove();
			$j('div#post-dates', self._roadMapBrowser).append(self._activeMonths);
			
			//Select first month by default
			$j('div#post-months li', self._roadMapBrowser).removeClass('selected');
			$j('div#post-months ul li', self._roadMapBrowser).eq(0).addClass('selected');
			
			//remove css outline around anchor tags
			$j('a.js-month-link', self._roadMapBrowser).focus(function(){
				if(this.blur)this.blur();
			});
		},
		
		_renderEventsBrowser: function(){
		
			var self = this;

			//Select first year by default
			$j('div#post-years ul li', self._roadMapBrowser).removeClass();
			$j('div#post-years ul li', self._roadMapBrowser).eq(0).addClass('selected');

			//initialise the navigation months
			var firstYear = $j('a', self._activeYears).eq(0).html();
			self._initialiseNavigationMonths(firstYear);
			
			var firstMonth = $j('a', self._activeMonths).eq(0).html();

			//Load events for the first month and year			
			self._loadEvents(firstMonth, firstYear);
		},
		
		_initialiseNavigationEvents: function(){
		
			var self = this;
		
			$('#post-dates').click(function(event){
				var myTarget = $(event.target);
				if(myTarget.is('a')){
				
					if (myTarget.parent().is('li.hidden')){
						return false;
					}

					//change selected item in the navigation
					myTarget.parent().siblings().removeClass('selected');
					myTarget.parent('li').addClass('selected');
					
					var seletedMonth = null;
					var selectedYear = null;
					
					if(myTarget.is('a.js-year-link')){
						
						//reinitialise months in navigation
						self._initialiseNavigationMonths(myTarget.html());
						
						selectedMonth = $j('div#post-months li.selected a', self._roadMapBrowser).html();
						selectedYear = myTarget.html();
						
					} else if (myTarget.is('a.js-month-link')){
						
						selectedYear = $j('div#post-years li.selected a', self._roadMapBrowser).html();
						selectedMonth = myTarget.html();
					}
					
					self._loadEvents(selectedMonth, selectedYear);
					
					return false;
				}
			});
		},
		
		_loadEvents: function(selectedMonth, selectedYear){
		
			var self = this;
			
			//remove current events
			$j('div', self._roadMapBrowser).remove('.post');
			
			$j('div.posts-container', self._initialContent).each(function(i){
				var thisMonth = $j('h2', this).html().split(' ')[0];
				var thisYear = $j('h2', this).html().split(' ')[1];
				
				if (thisMonth == selectedMonth && thisYear == selectedYear){
					var newPosts = 	$j(this).children();
					$j('div.posts-container', self._roadMapBrowser).fadeOut('fast', function(){
						$j(this).html(newPosts).fadeIn('fast');
					});
				}
			});
		},
		
		//</private>
		
		show: function(){
			
			var self = this;
			
			$j.leModal.show({
				modalTopAdjustment: 100,
				overlayOpacity: 0.5,
				clickBackgroundToHide: true,
				showAnimationSpeed: 'fast',
				modalWinBackground: 'transparent',
				setContentCallBack: function(jModalWin , jOverlay){
					jModalWin.html(self._roadMapBrowser.html());
				}
			});
			
			if(self._initialContent == null){
				self._loadInitialContent();
			}
			else
			{
				self._renderEventsBrowser();
			}
		}	
	});
	
	Website.Components.RoadMap = new Website.Components.RoadMap();

})(jQuery);