var initList = initList || []; 

initList.push(function(){

	$(".content_nav").each(
		function(){
			var content=$(this);

			// Fill the neccesary ccmponents 
			content.append('<span class="buttons "></span><span class="buttons last "></span><div class="controls"></div>');
			var controls=content.find('.controls');
			
			var flow = content.attr('data-flow');
			var buttons =content.find(".buttons");
			var sections =content.find(" .sections");
		    var stage = 1;
		    var num_sections = sections.children().length;
		    var width_sections = 0;

			var conditional = content.attr('data-conditional');

			if(flow == 'h'){
				width_sections =820;
			}else{/*v*/
				width_sections = sections.find('li').outerHeight(true);
			}
			//fill span 
			for (var i = 0; i < num_sections; i++) {
				if (i==0) {
					$('<span class="active">').appendTo(controls);
				}else{
					$('<span >').appendTo(controls);
				}
			};

			                     

			var time_factor = 1.0 * width_sections;

			buttons.click(function(){

						if(conditional && stage == 2){
							var class1 = $(".qt2 #p4").attr("class");
							var class2 = $(".qt2 #p45").attr("class");
							var class3 = $(".qt2 #p6").attr("class");

							if(class1 != "oki" || class2 != "oki" || class3 != "oki"){
								sg.sound("error");
								return;
							}
						}



					content.find(" > .controls > span").removeClass("active");
					var variation;

					if ($(this).is(".last")){
						variation = "+=";
						stage--;
					}else{
						variation = "-=";
						stage++;		
					}

					if(stage>=1 && stage <=num_sections){
						var effect = '';
						if(flow == 'h'){
							effect = { marginLeft: variation+width_sections };
						}else{
							effect = { marginTop: variation+width_sections };
						}
						
						$(this).fadeOut(50,
						function(){ 
					    	sections.animate( effect, time_factor, function(){
								if (stage > 1) {
									buttons.last().fadeIn();
								}
								if (stage < num_sections) {
									buttons.first().fadeIn();
								}
								content.find(" .controls > span:nth-child(" + stage + ")").addClass("active");
					    	});		

					    });


					    var li= content.find(" ol.sections li:nth-child(" + stage + ")");
					    var data_ins = li.attr("data-ins");					    
					    if (data_ins != undefined) {
					    	$(".act_instruction > h4").hide();
					    	var instructions = data_ins.split(',');
					    	for (var i = 0; i <instructions.length; i++) {
					    		$(instructions[i]).fadeIn();
					    	};
					    };



					}else{
						if(stage > num_sections){stage = num_sections}
						if(stage < 1){stage = 1}
					}		
			  });


			content.find(".controls span").click(function(){
				var index = $(this).index();
				var margin = index * width_sections *-1;

			    stage = index + 1;
				content.find(" .controls > span").removeClass("active");
				var effect = '';
				if(flow == 'h'){
					effect = { marginLeft: margin };
				}else{
					effect = { marginTop: margin };
				}
				buttons.fadeOut(50,
						function(){ 
					    	sections.animate( effect, time_factor, function(){
								if (stage > 1) {
									buttons.last().fadeIn();
								}
								if (stage < num_sections) {
									buttons.first().fadeIn();
								}
								content.find(" > .controls > span:nth-child(" + stage + ")").addClass("active");
					    	});		
					    });
			})

		}
	);
});