
function unedButtons(id, pc, mobile){
	var pcHTML = "";
	var pcHTMLRight = ""; 
	var mobileHTML = "";
	
	if(id=="1"){
		var selected = "selected";
		var current = "current";
		var currentPC = "current";
	}else{
		var selected = ""; 
		var current = "closed";
		var currentPC = "hidden";
	}
	/* PC HTML */
	pcHTML += "<div class='uned "+selected+"' data-uned='"+id+"'> \
				 <p>"+pc+"</p> \
				</div>";
	$(".fullSize .leftButtons").append(pcHTML);
	pcHTMLRight += "<div class='mainBox "+currentPC+"' data-uned='"+id+"'> \
						<div class='paddingBox unedTitle'> \
							"+mobile+" \
						</div> \
						<div class='uContent'></div> \
					</div>";
	$(".fullSize .rightContent").append(pcHTMLRight);
	
	/* MOBILE HTML */
	
	mobileHTML += "<div class='unedContent "+current+"'data-uned='"+id+"'> \
					<div class='mainBox'> \
						<div class='paddingBox unedTitle'> \
							"+mobile+" \
						</div> \
						<div class='uContent'></div> \
					</div>\
				</div>";
	$(".smallScreens").append(mobileHTML);
}

function adranTitles(unedID, uned, adran, adranTitle){
	var pcHTML = ""; 
	var mobileHTML = ""; 
	if(unedID=="1"){
		var selected = "selected";
		var current = "current";
	}else{
		var selected = ""; 
		var current = "closed";
	}
	
	pcHTML += "<div class='paddingBox'> \
					<div class='adranName'> \
						"+adran+" \
					</div> \
					<div class='adranTitle'> \
						"+adranTitle+" \
					</div> \
					<div class='adranContent' data-adran='"+adran+"'> \
					</div> \
				</div>";
	$(".fullSize .mainBox[data-uned='"+unedID+"']").append(pcHTML);
	$(".smallScreens .unedContent[data-uned='"+unedID+"'] .uContent").append(pcHTML);

}

function createSection(unedID, sectionID, sectionTitle, adran){
	var html = ""; 
	html += "<div class='section'> \
				<p> \
					<img src='img/toggle_arrow.png' class='toggleArrow closed' /> \
					<span class='sectionID'> \
						"+sectionID+" \
					</span> \
					<span class='sectionName'> \
						"+sectionTitle+" \
					</span> \
				</p> \
			 </div> \
			 <div class='sectionContent' data-section='"+sectionID+"'></div>";
			 
	$(".fullSize .mainBox[data-uned='"+unedID+"'] .adranContent[data-adran='"+adran+"']").append(html);
	$(".smallScreens .unedContent[data-uned='"+unedID+"'] .adranContent[data-adran='"+adran+"']").append(html);
}

function addResource(unedID, sectionID, topicID, topicName, gweithgareddau){
	var html = "";
	
	html += "<div class='resourceWrapper'> \
				<table class='resource'> \
					<tr> \
					<td class='resourceDetails'> \
						<p> \
							<span class='resourceID'> \
								"+topicID+" \
							</span> \
						<p> \
					</td> \
					<td class='resourceName'> \
						"+topicName+" \
					</td>";
					
	
					if(gweithgareddau[0] != ""){
						if(gweithgareddau[1]){
							var display = "showResource";
						}else{
							var display = "hiddenResource";
						}
						html += "<td class='gweithgareddau first'> \
									<a href='"+gweithgareddau[0]+"' class='"+display+"'> \
									<div class='gweithgaredd "+display+"'> \
										<div> \
											<p> \
												Gweithgaredd 1\
												<a href='downloads/"+topicID+"_1.zip' download>\
													<img src='img/download.png' /> \
												</a>\
											</p> \
										</div> \
									</div> \
								</a></td>";							
											
					}
					
					if(gweithgareddau[2] != ""){
						if(gweithgareddau[3]){
							var display = "showResource";
						}else{
							var display = "hiddenResource";
						}
						html += "<td class='gweithgareddau'> \
									<a href='"+gweithgareddau[2]+"' class='"+display+"'> \
									<div class='gweithgaredd "+display+"'> \
										<div> \
											<p> \
												Gweithgaredd 2 \
												<a href='downloads/"+topicID+"_2.zip' download>\
													<img src='img/download.png' /> \
												</a>\
											</p> \
										</div> \
									</div> \
								</a></td>";					
											
					}
					
	
	
	html += "</tr> \
				</table> \
		</div> ";
		
	var mobHTML = "<div class='resourceWrapper'> \
				<div class='resource'> \
					<table> \
					<tr class='resourceDetails'> \
						<td class='resourceID'> \
								"+topicID+" \
							</td> \
							<td class='resourceName'> \
								"+topicName+" \
							<td> \
						</tr> \
					</table> \
					<div class='gweithgareddau'>";
	
					
					
					if(gweithgareddau[0] != ""){
						if(gweithgareddau[1]){
							var display = "showResource";
						}else{
							var display = "hiddenResource";
						}
						mobHTML += "<a href='"+gweithgareddau[0]+"' class='"+display+"'> \
									<div class='gweithgaredd "+display+"'> \
										<div> \
											<p> \
												Gweithgaredd 1 \
												<a href='downloads/"+topicID+"_1.zip' download>\
													<img src='img/download.png' /> \
												</a>\
											</p> \
										</div> \
									</div> \
								</a>";					
											
					}
					
					if(gweithgareddau[2] != ""){
						if(gweithgareddau[3]){
							var display = "showResource";
						}else{
							var display = "hiddenResource";
						}
						mobHTML += "<a href='"+gweithgareddau[2]+"' class='"+display+"'> \
									<div class='gweithgaredd "+display+"'> \
										<div> \
											<p> \
												Gweithgaredd 2 \
												<a href='downloads/"+topicID+"_2.zip' download>\
													<img src='img/download.png' /> \
												</a>\
											</p> \
										</div> \
									</div> \
								</a>";					
											
					}
	
	
	mobHTML += "</div> \
				<div class='clear'></div> \
			</div> \
		</div> ";
		
	
	$(".fullSize .mainBox[data-uned='"+unedID+"'] .sectionContent[data-section='"+sectionID+"']").append(html);
	$(".smallScreens .unedContent[data-uned='"+unedID+"'] .sectionContent[data-section='"+sectionID+"']").append(mobHTML);
}


function init(){

	$.each(unedau, function(uned,unedVal) {
		unedButtons(unedVal["uned"][0], unedVal["uned"][1], unedVal["uned"][2]);
		$.each(unedVal["adrannau"], function(adran, adranVal){
			adranTitles(unedVal["uned"][0], unedVal["uned"][2], adranVal["adran"], adranVal["adranTitle"]);
			$.each(adranVal["eitemau"], function(eitem, eitemVal){
				$.each(eitemVal["section"], function(section, sectionVal){
					createSection(unedVal["uned"][0], sectionVal["id"], sectionVal["name"], adranVal["adran"]);
					$.each(sectionVal["topics"], function(topic, topicVal){
						addResource(unedVal["uned"][0], sectionVal["id"], topicVal["id"], topicVal["name"], topicVal["gweithgareddau"]);
					});
				});
			});
		});
	}); 
}


$('document').ready(function(){

var adnoddID = $('.adnoddID').text()[0]+"."+$('.adnoddID').text()[2];
	var href = $("#hLinks a:nth-child(1)").attr('href');
	href=href+"?uned="+adnoddID;
	$("#hLinks a:nth-child(1)").attr('href', href);

	 $('#image-gallery').lightSlider({
                gallery:true,
                item:1,
                thumbItem:9,
                slideMargin: 0,
                speed:500,
                auto:false,
                loop:true,
				controls: true,
				adaptiveHeight:true,
				prevHtml: '<img src="img/icon_previous.png" />',
				nextHtml: '<img src="img/icon_next.png" />',
                onSliderLoad: function() {
                    $('#image-gallery').removeClass('cS-hidden');
					setTimeout(function(){
						$('#image-gallery').find("li").css("background", "none");
					},600);
                }  
            });

	
	$('body').on('click', '.filterBtn', function(){
		var id = $(this).attr('data-id');
		$('.filterBtn').removeClass('active');
		$(this).addClass('active');
		$('#hiddenQuestions div').hide();
		$('#hiddenQuestions div[data-id="'+id+'"]').show();
		window.fixmeTop = $('#hiddenQuestions div[data-id="'+id+'"]').offset().top;
		window.fixedDiv = $('#hiddenQuestions div[data-id="'+id+'"]');
		$('#cwestiwnArrow').find('img').removeClass("closed");
			$('#cwestiwnArrow').find('img').css({
					  '-webkit-transform' : 'rotate(180deg)',
					  '-moz-transform'    : 'rotate(180deg)',
					  '-ms-transform'     : 'rotate(180deg)',
					  '-o-transform'      : 'rotate(180deg)',
					  'transform'         : 'rotate(180deg)'
					});
			setTimeout(function(){
				$('#cwestiwnArrow').find('img').addClass("open");
			},300);
		
	});
	
	$('body').on('click', '#cwestiwnArrow', function(){
		$('.filterBtn').removeClass('active');
		$('#hiddenQuestions div').hide();
		window.fixmeTop = 0;
		window.fixedDiv = 0;
		if($('#cwestiwnArrow').find('img').hasClass("open")){
			//closed so must open
			//$('#hiddenQuestions li[data-id="'+id+'"]').fadeOut();
			$('#cwestiwnArrow').find('img').removeClass("open");
			$('#cwestiwnArrow').find('img').css({
					  '-webkit-transform' : 'rotate(0deg)',
					  '-moz-transform'    : 'rotate(0deg)',
					  '-ms-transform'     : 'rotate(0deg)',
					  '-o-transform'      : 'rotate(0deg)',
					  'transform'         : 'rotate(0deg)'
					});
			setTimeout(function(){
				$('#cwestiwnArrow').find('img').addClass("closed");
			},300);
		}
	});
	$('body').on('click','.uned', function(){
		$('.fullSize .selected').removeClass('selected');
		$('.fullSize .uned').css('margin-bottom','10px');
		$(this).addClass('selected').css('margin-bottom','0px');;
		$(this).prev().css('margin-bottom','0px');
		
		var uned = $(this).attr("data-uned");
		
		$('.fullSize .mainBox').removeClass("current").addClass("hidden");
		$('.smallScreens .unedContent').removeClass("current").addClass("closed");
		$('.fullSize .mainBox[data-uned="'+uned+'"]').addClass("current").removeClass("hidden");
		$('.smallScreens .unedContent[data-uned="'+uned+'"]').addClass("current").removeClass("closed");
	});
	
	$('body').on('click','.smallScreens .unedTitle', function(){
		var uned = $(this).parents('.unedContent').attr("data-uned");
		
		$('.fullSize .selected').removeClass('selected');
		$('.fullSize .uned').css('margin-bottom','10px');
		$('.fullSize .uned[data-uned="'+uned+'"]').addClass('selected').css('margin-bottom','0px');;
		$('.fullSize .uned[data-uned="'+uned+'"]').prev().css('margin-bottom','0px');
		
		
		
		$('.fullSize .mainBox').removeClass("current").addClass("hidden");
		$('.smallScreens .unedContent').removeClass("current").addClass("closed");
		$('.fullSize .mainBox[data-uned="'+uned+'"]').addClass("current").removeClass("hidden");
		$('.smallScreens .unedContent[data-uned="'+uned+'"]').addClass("current").removeClass("closed");
	});
	
	$('body').on('click','.section', function(){
		var section = $(this).find('.sectionID').text().trim();
	
		if($(this).find('img').hasClass('closed')){
			$('.toggleArrow').removeClass('open').addClass("closed");
			$(this).find('img').removeClass("closed").addClass("open");
		}
		if(!$(".sectionContent[data-section='"+section+"']").hasClass("open")){
			$(".sectionContent").slideUp().removeClass("open");
			$(".sectionContent[data-section='"+section+"']").slideDown().addClass("open");
		}
		
		
		
		
		
	});
	
	
	
	
		$(window).scroll(function() {
			if(window.fixmeTop > 0){
				var currentScroll = $(window).scrollTop();
				if (currentScroll >= window.fixmeTop) {
					 window.fixedDiv.addClass('fixedMp3').addClass('setWidth');
				} else {
					  window.fixedDiv.removeClass('fixedMp3').removeClass('setWidth');
				}
			}
		});
	
	
});