$(function(){

	$('body').addClass('js')

	// Slideshow vars
		var mainContent = $('#main-content');
		var slideshowBlips = mainContent.find('ul.blips li a');
		var slideshowDesc = mainContent.find('div.descriptive');
		 
		 // if there is slideshow descriptive on load, it needs to show
		 if (slideshowDesc){
			slideshowDesc.css('display', 'block');
		 }
		 
		 
		$(slideshowBlips).bind('click', function(e){
			
				var slideshowArea = $(e.target).parent().parent().parent().parent();
				
				handleBlips(e, slideshowBlips)
			

			
				// Swap out the caption text 
				var newCaption = $(e.target).attr('rel'),
					 newSrc = $(e.target).attr('href');
					 
					 slideshowArea.find('div.caption p').html(newCaption);
				
								
				// replacing the img
				var slideshowImg = slideshowArea.find('img')[0],
					 replacedd = slideshowArea.find('.replacement-img'),
					 replacementImg = $('<img style="display:none;" class="replacement-img" src="' + newSrc + '" alt="' + newCaption +'" />');
					
					

					
					// the animation
					if (newSrc !== $(slideshowImg).attr('src')){
					
						$(slideshowImg).after(replacementImg)
						
						replacementImg.fadeIn(function(){
							$(slideshowImg).remove();
						});
						
						if ($(e.target).hasClass('hasDesc')){
							slideshowDesc.fadeIn();
						}else{
							slideshowDesc.fadeOut();
						}

					}
					
					
				return false;
				
		});
		
	function handleBlips(e, context, offset, anchor){
	
		$(e.target).parent().parent().find('a').removeClass('selected');
		
		$(e.target).addClass('selected');
		
		var ul = $(anchor).parent().parent().parent().find('ul')[1];
		
		if (offset){
			var a = (offset-1)*2,
				 b = a +1;
				 
			$(ul).find('li.article').addClass('off');
			$($(ul).find('li.article')[a]).removeClass('off');
			$($(ul).find('li.article')[b]).removeClass('off');
		} else {
			
			//one by one
			var forms = context.find('form');
			
			forms.addClass('off')
			
			$(forms[($(e.target).attr('rel') - 1)]).removeClass('off');
			
		}
		
	}
	
	$(function switchingContent(){
		var col2 = $('#col-2');
		var articleArea = col2.find('#latest-info');
		var searchArea = col2.find('#search-boxes');
		generateBlips('article', articleArea);
		generateBlips('search', searchArea);
	});
	
	
	
	// Blips get generated for content which exists in dom, 
	// but is handled with javascipt. This is basically news
	// the various search forms.
	
	function generateBlips(type, context){	
		
		// For Articles
		if (type ===  "article"){
			var events = context.find('div.events ul.articles li.article');
			var news = context.find('div.news ul.articles li.article');
			
			var hideEvents = $.grep(events, function(n,i){
				return i >1;
			});
			
			var hideNews = $.grep(news, function(n,i){
				return i > 1;
			});
			
			$(hideEvents).addClass('off');
			$(hideNews).addClass('off');
			
			
			// Get rounded number for blips
			var blipCount = new Array();
				if (events.length > 2){
					blipCount[0] = Math.ceil(events.size() / 2);
				}
				if (news.length > 2){
					blipCount[1] = Math.ceil(news.size() / 2);
				}
			
			// Build the blip list
			var blips = buildBlipList(blipCount);
			
			// Insert the blip list
			
			if (blips[0]){
				context.find('div.events h4').after(blips[0].join(''));
			}
			if (blips[1]){
				context.find('div.news h4').after(blips[1].join(''));
			}
			
			// Handle the content
			displayArticles(context);

			
		// Manage 
		} else if (type === "search"){
			
			var forms = context.find('form');
			
			// Hide excess forms
			if (forms.length > 0){
				var hideForms = $.grep(forms, function(n,i){
					return i > 0;
				});
				
				$(hideForms).addClass('off');
				
				// Count how many blips are needed
				
				var blips = buildBlipList(forms.length);
				
				// insert
				context.prepend(blips.join(''));
				
				displayForms(context);
			
				
			}
		
		}
		
		
	}
	
	function displayArticles(context){
		$(context).find('ul.blips li a').bind('click', function(e){	
			var offset = e.target.getAttribute('rel');
			handleBlips(e, context, offset, this);
			return false;
		});
	}
	
	function displayForms(context){
		$(context).find('ul.blips li a').bind('click', function(e){
			handleBlips(e, context);
			return false;
		});
	}
	
	function buildBlipList(blipCount){
	
		var blips = new Array();
	
	

		if ($.isArray(blipCount)){
		
			for (var i=0; i < blipCount.length; i++){
				blips[i] = new Array();
				blips[i].push('<ul class="blips">');
				for (var j=0; j < blipCount[i]; j++){
						
					if (j === 0){
						blips[i].push('<li><a class="selected" href="#" rel="' + (j +1) + '">' + (j +1) + '</a></li>');
					}else{
						blips[i].push('<li><a href="#" rel="' + (j +1) + '">' + (j +1) + '</a></li>');
					}
				}
				
				blips[i].push('</ul>');
			}
		
		}else{
			
			blips.push('<ul class="blips">');
			
			for (var i=0; i < blipCount; i++){
				if (i === 0){
					blips.push('<li><a class="selected" href="#" rel="' + (i +1) + '">' + (i +1) + '</a></li>');
				}else{
					blips.push('<li><a href="#" rel="' + (i +1) + '">' + (i +1) + '</a></li>');
				}				
			}
			
			blips.push('</ul>');
		
		}
		
		return blips;
	
	}
	
	
	
	
	
});