var topbarItems;

$(document).ready(function(){
	topbarItems = new Array();
	$(".topbaritem").each(function(){
		var id = $(this).attr("id");
		var title =	$(this).find(".topbartitle").text();
		topbarItems.push({"id":id, "title": title});
	});	
	
	if(topbarItems.length > 0){
		for(i=0; i< topbarItems.length; i++ ){
			$("#header2 .contents #menu a#l"+ (i+1))
				.attr("role", topbarItems[i].id)
				.text(topbarItems[i].title)
				.addClass(topbarItems[i].id);	
		}	
	}	
	
	$("#header2 .contents #menu a").click(function(){
		var id = $(this).attr("role");
		NanoShowPage(id);
		return false;
	});
	
	if( window.location.hash.length > 0){
		var id = window.location.hash.replace(/#/,"").substr(1);
		console.log(id, window.location.hash);
		NanoShowPage(id);
	}
	
});

function NanoShowPage(id){
	$("ul#placebar .selected").removeClass("selected").hide(); 
	
	$("#"+id).fadeIn(200, function(){ 
		$(this).addClass("selected"); 
	});
	
	$("#header2 .contents #menu a").removeClass("active");
	$("#header2 .contents #menu a."+ id).addClass("active");
	$("#placebar .no-contents").hide();
	
	window.location.hash = "p"+id;
}

(function($){  
  
	$.fn.extend({ 
		ytGalleryOptions: {},
		  		  
		//pass the options variable to the function  
		ytGallery: function(options) {  
			
			//Set the default values, use comma to separate the settings, example:  
			var defaults = {  
				items: [],  
				width : 500,  
				height : 300,
				tn_width: 72,
				tn_height: 42
			}  
				  
			var options =  $.extend(defaults, options);  
  
			return this.each(function() {  
				var o = options;  
				var el = $(this);
				
				var items = [];
				var titles = [];
				var tt = el.attr("items").split(",");
				for( var i=0; i<tt.length; i++){
					var t = tt[i].split(":");
					titles.push(t[0]);
					items.push(t[1].replace(/ /,""));
						
				}
				o.items = items;
				o.titles = titles;
				
				$.fn.ytGalleryOptions = o;
				
				el.append('<h2 id="ytGalleryTitle"></h2>');
				el.append('<a href="#" id="ytGalleryNavPrev">Prev</a>');
				el.append('<a href="#" id="ytGalleryNavNext">Next</a>');
				el.append('<div id="ytGalleryMain"></div>');			  
				
				el.append('<div class="ytGalleryThumbnails"><ul class="ytGalleryThumbnails"></ul></div>');
				
				for( var i=0; i<o.items.length; i++){
					$("ul.ytGalleryThumbnails").append('<li><a href="http://www.youtube.com/watch?v='+ o.items[i] +'" yt:play="'+ i +'" id="ytGalleryTn_'+ i +'" class="ytGalleryTn" title="'+ o.titles[i] +'">'+
					'<img src="'+ $.fn.ytGalleryGetThumb(o.items[i], "small") +'" width="'+ o.tn_width +'" height="'+ o.tn_height +'" /></a></li>');
				}

				$("ul.ytGalleryThumbnails a").click(function(){
					
					var index = parseInt($(this).attr("yt:play"));
					$.fn.ytGalleryShow(index);
					return false;	
				});
				
				$("#ytGalleryNavNext").click(function(){
					var o = $.fn.ytGalleryOptions;
					if(o.current < o.items.length-1) $.fn.ytGalleryShow(o.current + 1);
					return false;	
				});
				
				$("#ytGalleryNavPrev").click(function(){
					var o = $.fn.ytGalleryOptions;
					if(o.current > 0) $.fn.ytGalleryShow(o.current - 1);
					return false;	
				});
			  	
				$.fn.ytGalleryShow(0);
			});  
		},
		
		ytGalleryShow: function(index){
			var o = $.fn.ytGalleryOptions;
			
			var ytEmbed = '<object id="ytGalleryMainVideo" width="'+ o.width +'" height="'+ o.height +'">'+
							  '	<param name="movie" value="http://www.youtube.com/v/'+ $.fn.ytGalleryGetYoutubeCode(o.items[index]) +'?fs=1&amp;hl=en_US"></param>'+
							  ' <param name="allowFullScreen" value="true"></param>'+
							  ' <param name="allowscriptaccess" value="always"></param>'+
							  ' <embed id="ytGalleryMainVideo" src="http://www.youtube.com/v/'+ $.fn.ytGalleryGetYoutubeCode(o.items[index]) +'?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" '+
							  ' allowscriptaccess="always" allowfullscreen="true" width="'+ o.width +'" height="'+ o.height +'"></embed></object>';
			$("#ytGalleryTitle").text(o.titles[index]);
			$("#ytGalleryMain").html(ytEmbed);
			
			$("ul.ytGalleryThumbnails a img").removeClass("ytGalleryActive");
			$("a#ytGalleryTn_"+index+" img").addClass("ytGalleryActive");
			
			if(index == 0 ){
				$("#ytGalleryNavPrev").hide();	
			}else{
				$("#ytGalleryNavPrev").show();		
			}
			
			if(index == o.items.length - 1 ){
				$("#ytGalleryNavNext").hide();	
			}else{
				$("#ytGalleryNavNext").show();		
			}
			
			o.current = index;
			
		},
		
		ytGalleryGetThumb: function(url, size){
			  if(url === null){ return ""; }
			  size = (size === null) ? "big" : size;
			  if(size == "small"){
				return "http://img.youtube.com/vi/"+$.fn.ytGalleryGetYoutubeCode(url)+"/2.jpg";
			  }else {
				return "http://img.youtube.com/vi/"+$.fn.ytGalleryGetYoutubeCode(url)+"/0.jpg";
			  }
		},
		
		ytGalleryGetYoutubeCode: function(url){
			  if(url === null){ return ""; }
			  var results;
			  results = url.match("[\\?&]v=([^&#]*)");
			  return  ( results === null ) ? url : results[1]; 	
		}
		  
	});  
	  
})(jQuery);