// JavaScript Document

/*
When loading:
- build a textnode in p#description and place the wording of the title attribute in that p#description text node.
- build a textnode in span#number and place the number of the first thumbnail img in that text node.
- build img tag#placeholder in table #screen
- assign first image in img#placeholder

Now we have to deal with thumbnails.
# bg for table cell w/o a thumbnail picture: white bg with grey frame and wording showing the number of the table cell.
# bg for the first table cell: blabk bg with no grey border.
# bg for other thumbnail table cell" black bg with grey border.

well, here is the problem. 
1. Some browsers :FF, Chrome, Netscape, do not show the table cells' width and height correctly.  Therefore, bgs which have black square with grey border do not show fully.  The grey frame or border is missing.
If I want to fix the problem above, I have to enlarge table cell so every part of the bg picture is shown.  However, this will not look pretty when hovering and I want that when hovering bg of the table cell we be just black square w/o frame. 

2. We have to know the current picture that is shown in table#screen since when mouse is on the tablecells with a thumbnail picture, the bg will be just black square and when the mouse leaves, bg will be black square with grey frame, except the thumbnail which has its picture on the table#screen, the bg will still be black square without a frame.

สรุป anchor tag ที่มีรูปที่กำลัง active บน table#screen มีความสำคัญ เพราะ
ต้องวางรูปบน table#screen   <a src>
วาง title บน text node ที่ p#description    <a title>
วางลำดับของภาพ ไว้ที่ span#number 
table cell ที่เป็น parentNode ต้องมี border เป็นสีส้ม
table cell ที่เป็น parentNode ต้องมี bg เป็น black square w/o frame
table cell ที่เป็น parentNode ตอนที่ mouse moveout แล้ว ยังต้องเป็น black square w/o frame เหมือนเดิม คือไม่เปลี่ยน  หากอันอื่น หากอันอื่น ตอนที่ mouse move out จะเป็น black square with grey frame\
ดังนั้น เราต้องทำ flag ให้กับ <a> ที่ถูกคลิก

*/
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
			window.onload = func;
		} else {
			window.onload = function() {
			oldonload();
			func();
		}
	}
}

/*สร้าง img#placeholder ใน table#screen
สร้าง text node ใน p#description
สร้าง text node ใน span#number และ span#totalphotos
ใส่ bg ให้เป็น wording (ภาพ 1, ภาพ 2, ...)ใน td ที่ไม่มีรูป
- นำจำนวนภาพที่นับได้ทั้งหมด ไปใส่ที่ span#totalphotos*/
function preparePlaceholder() {
	if (!document.createElement) return false;
	if (!document.createTextNode) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById("imagegallery")) return false;

//สร้าง <img id = "placeholder" /> ที่ td ของ table#screen
	var tablescreen = document.getElementById("screen");
	var td = tablescreen.getElementsByTagName("td")[0];
	var placeholder = document.createElement("img");
	td.appendChild(placeholder);
	placeholder.setAttribute("id","placeholder");
	
//สร้าง textnode เปล่าๆ ที่ p#description
	var description = document.getElementById("description");
	var desctext = document.createTextNode("");
	description.appendChild(desctext); 
	
//td ที่ไม่มี <a> ให้ใส่ bg ที่เป็นพื้นขาว กรอบสีเทา และมีคำว่า ภาพ ตามด้วยลำดับภาพที่ควรจะเป็น
	var imagegallery = document.getElementById("imagegallery");
	var td_links = imagegallery.getElementsByTagName("td");
	
	var number_of_pictures = 0;
	for(var i = 0; i<td_links.length; i++){
		if(td_links[i].getElementsByTagName("a").length <1 ){
			//td ที่ไม่มี <a> ให้ใส่ bg ที่เป็นพื้นขาว กรอบสีเทา
			td_links[i].style.background = "url(../img/profile/thumbnail-no-pix-bg.gif) no-repeat 50% 50%";
			
			//สร้าง text node ใส่คำว่า ภาพ ตามด้วยลำดับภาพ ใน td ที่ไม่มี <a> 
			var picture_number = i+1;
			var picture_number = "ภาพ " + picture_number;
			var txt = document.createTextNode(picture_number);
			td_links[i].appendChild(txt);
		}else{
			number_of_pictures++;
		}
	}
	
	//สร้าง textnode มีค่า = จำนวนภาพที่นับได้ทั้งหมด แล้วไปใส่ที่ span#totalphotos
	var totalphotos = document.getElementById("totalphotos");
	var txt = document.createTextNode(number_of_pictures);
	totalphotos.appendChild(txt);	
	
	//สร้าง textnode เปล่าๆที่ span#number
	var at_picture_number = document.getElementById("number");
	var txt = document.createTextNode("");
	at_picture_number.appendChild(txt);	
}


/*
- หากมี event onclick  เรียก function prepareGallery
- หากมี event onmouseover เรียก function over
- หากมี event onmouseout เรียก function
*/
function prepareGallery() {
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById("imagegallery")) return false;
	var gallery = document.getElementById("imagegallery");
	var links = gallery.getElementsByTagName("a")
	
	for ( var i=0; i < links.length; i++) {
		links[i].onmouseover = function(){
			return over(this);
		}
		links[i].onmouseout = function(){
			return out(this);
		}		
		links[i].onclick = function() {
			return showPic(this);
		}
		links[i].onkeypress = links[i].onclick;
	}
	
}


/*ให้ td ที่บรรจุ a เปลี่ยน bg-image เป็นพื้นดำ ไม่มีกรอบ  thumbnail-click.gif
ส่วนสี bg-color ก็เป็นสีส้ม*/
function over(picture){
	var td = picture.parentNode;
	td.style.background= "url(../img/profile/thumbnail-click.gif) 50% 50% no-repeat #FFA602";
}

/*ให้ td ที่บรรจุ a เปลี่ยน bg-image เป็นพื้นดำ มีกรอบเทา  thumbnail-bg.gif ยกเว้น td ที่บรรจุ a#chosen
ส่วนสี bg-color ก็เป็นสีขาว ทุก td */
function out(picture){
	var td = picture.parentNode;
	if(picture.getAttribute("id") == "chosen" ){
		td.style.background= "url(../img/profile/thumbnail-click.gif) 50% 50% no-repeat #FFFFFF";
	}else{
		td.style.background = "url(../img/profile/thumbnail-bg.gif) 50% 50% no-repeat #FFFFFF";
	}
}


/*ตอนคลิกภาพไหน จะมีเหตุการณ์ ดังนี้
- ภาพนั้น จะเข้าไปอยู่ที่ img#placeholder
- title  จะเข้าไปอยู่ใน text node ที่ p#description
- ลำดับภาพ จะเข้าไปโชว์ที่ ข้างบนภาพ span#number

- set td ของภาพที่ถูกคลิก bg จะเป็นภาพ thumbnail-click.gif (คือเป็นพื้นสีเทาเฉยๆ ไม่มีกรอบ)
- set td bg ของภาพที่ไม่ได้ถูกคลิก ให้เป็น พื้นสีดำ กรอบสีเทา (thumbnail-bg.gif)

- set <a> ของภาพที่ถูกคลิก ให้มี id เป็น chosen เพราะว่า หาก onmouseout จะได้ไม่ต้องเปลี่ยน bg เพราะปกติ onmouseout bg จะเปลี่ยนเป็น พื้นสีดำ กรอบสีเทา (thumbnail-bg.gif)

- border ของtd ที่มีภาพนั้น จะกลายเป็น สีส้ม (เดิมสีขาว) border ของ td อันอื่นก็จะกลายเป็นสีขาว
*/
function showPic(whichpic) {
	if (!document.getElementById("placeholder")) {return true;	}
	
	//ภาพที่ถูกคลิก จะเข้าไปปรากฏ อยู่ที่ img#placeholder
	var source = whichpic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	placeholder.setAttribute("src", source);
	
	//title ของภาพ จะเข้าไปอยู่ที่ p#description
	var text = "";
	if (whichpic.getAttribute("title")) {
		text = whichpic.getAttribute("title");
	} 
	var description = document.getElementById("description");
	if (description.firstChild.nodeType == 3) {
		description.firstChild.nodeValue = text;
	}
	whichpic.setAttribute("id", "clicked");
	
	var gallery = document.getElementById("imagegallery");
	var tds = gallery.getElementsByTagName("td");
	for(var i = 0; i < tds.length; i++){
		if(tds[i].getElementsByTagName("a").length >0){
			var a_tag = tds[i].getElementsByTagName("a")[0];
			var id_attr = a_tag.getAttribute("id");
			if(id_attr =="clicked"){
				tds[i].style.border = "3px solid #FFA602";
				tds[i].style.background ="#FFFFFF url(../img/profile/thumbnail-click.gif) 50% 50% no-repeat";
				a_tag.setAttribute("id", "chosen");
				var rank = i;
			}else{
				tds[i].style.border = "3px solid #FFFFFF";
				tds[i].style.background ="#FFFFFF url(../img/profile/thumbnail-bg.gif) 50% 50% no-repeat";
				a_tag.removeAttribute('id');
			}
		}	
	}
	
	var at_picture_number = document.getElementById("number");
	if (at_picture_number.firstChild.nodeType == 3) {
		at_picture_number.firstChild.nodeValue = rank + 1;
	}
	return false;
}

function picture_one_start(){
	if (!document.createElement) return false;
	if (!document.createTextNode) return false;
	if (!document.getElementById) return false;
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById("imagegallery")) return false;
	
	var gallery = document.getElementById("imagegallery");
	var links = gallery.getElementsByTagName("a");
	var pixone = links[0];
	showPic(pixone);
}


//ส่วนที่จะเขียนข้างล่างนี้ จะเป็นส่วนที่ manage เกี่ยวกับ ส่วนของ tab รายละเอียด

/*เริ่มต้น เวลา load  tab จะไปอยู่ที่ tabรายละเอียด
	display เฉพาะ you_soulmate.php
*/

function info_start(){
	if (!document.getElementById) return false;
	if(!document.getElementsByTagName) return false;
	var tabs = document.getElementById("tabs");
	var links_li = tabs.getElementsByTagName("li");
	links_li[0].setAttribute("id", "current");
}

function prepareSection(){
	if (!document.getElementById) return false;
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById("tabs")) return false;
	var tabs = document.getElementById("tabs");
	var links_a = tabs.getElementsByTagName("a");
	if (links_a.length == 1)  { 
		var tabs = document.getElementById("tabs");
		var links_li = tabs.getElementsByTagName("li");
		links_li[0].setAttribute("id", "current");
		return false;//สมมติว่า มีแค่ tab เดียว คือ tab รายละเอียด เพราะสมาชิกคนนั้น ไม่ได้ Upload รูป ก็ไม่จำเป็นต้องให้มี event onclick 
	}
	for(var i = 0; i < links_a.length; i++){
		links_a[i].onclick = function(){
			return showSection(this);
		}
	}
}


/*
หากคลิกที่ anchor tag อันไหน อันนั้นจะขึ้น id เป็น justpicked
ไปเลือก tag div#tabs document.getElementById("tabs") แล้ว ให้มัน getElementsByTagName("li") 
แล้ว remove attribute id ของ li ออกให้หมด
เช็คดูหาก li อันไหน มี anchor tag ที่มี id == justpicked    li อันนั้น จะถูก set id เป็น current
จากนั้น anchor tag id == justpicked  จะถูกเปลี่ยนชื่อเป็น picked

แสดงส่วน section nonphoto หรือ section photo ขึ้นอยู่กับว่า click อะไร  
*/
function showSection(section){
	if (!document.getElementById) return false;
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById("tabs")) return false
	section.setAttribute("id", "justpicked");
	var tabs = document.getElementById("tabs");
	var links_li = tabs.getElementsByTagName("li") 
	if (links_li.length < 2) return false; // กันไม่ให้ function นี้ทำงาน หากมีแค่ tab เดียว
	for(var i = 0; i< links_li.length; i++){
		links_li[i].removeAttribute('id');//เอา id ออกจาก li tag ทุกอัน
	}
	for(var i = 0; i< links_li.length; i++){
		if(links_li[i].getElementsByTagName("a")[0].getAttribute("id") == "justpicked"){ // li tag ที่มี anchor tag เพิ่งถูกคลิก จะถูกassign id = "current"
			links_li[i].setAttribute("id", "current");
			var section_picked = i;
		}
	}
	section.setAttribute("id", "picked");
	
	if(section_picked == 0){
		if(document.getElementById("you_soulmate")) {
		var nonphotosection = document.getElementById("you_soulmate");
		nonphotosection.style.display="block";}
		
		if(document.getElementById("photosection")) {
		var photosection = document.getElementById("photosection");
		photosection.style.display="none";}
	}
	if(section_picked == 1){
		if(document.getElementById("photosection")) {
		var photosection = document.getElementById("photosection");
		photosection.style.display="block";}
		
		if(document.getElementById("you_soulmate")) {
		var nonphotosection = document.getElementById("you_soulmate");
		nonphotosection.style.display="none";
		}
	}	
	return false;
}

//ตอนเริ่มโหลด ให้เหมือนกับว่า tab แรกถูกคลิก
function sectionOneStart(){
	if (!document.getElementById) return false;
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById("tabs")) return false
	var tabs = document.getElementById("tabs")
	var links_li = tabs.getElementsByTagName("li")
	if (links_li.length < 2) return false;
	if(!tabs.getElementsByTagName("a")) return false;
	if(window.location.hash=='#photo') {
		var first_section = tabs.getElementsByTagName("a")[1]
	} else {
		var first_section = tabs.getElementsByTagName("a")[0]
	}
	showSection(first_section);
	
}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
addLoadEvent(picture_one_start);
addLoadEvent(prepareSection);
addLoadEvent(sectionOneStart);