// <script>

// ----- mouse over event control---------------------------------------------------------
function showImage(id, image)
{
	document.getElementById(id).src=image;
}

//////////////////////////////
//Popup Control
/////////////////////////////////
function at_display(x)
{
  var win = window.open();
  for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}

///////////////////////////////////////////////////////
// Show Aux
///////////////////////////////////////////////////////
function at_show_aux(parent, child)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child );

  var top  = (c["at_position"] == "y") ? p.offsetHeight+1 : 0;
  var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;

  for (; p; p = p.offsetParent)
  {
    top  += p.offsetTop;
    left += p.offsetLeft;
  }

  c.style.position   = "absolute";
  c.style.top        = top +'px';
  c.style.left       = left+'px';
  c.style.visibility = "visible";
}

////////////////////////////////////////////////////////
// Show
////////////////////////////////////////////////////////
function at_show()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  
  showImage(p.id, this["focusImage"]);
  at_show_aux(p.id, c.id);

  clearTimeout(c["at_timeout"]);
}

// ----- Hide -----

function at_hide()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child"]);

  showImage(p.id, this["initImage"]);
  c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
}

// ----- Click -----

function at_click()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  if (c.style.visibility != "visible")
       at_show_aux(p.id, c.id);
  else c.style.visibility = "hidden";

  return false;
}


///////////////////////////////////////////////////////////////////////////
// ----- Attach a child menu to the top menu-----------
//////////////////////////////////////////////////////////////////////////
// PARAMETERS:
// parent   - id of visible html element
// child    - id of invisible html element that will be dropdowned
// showtype - "click" = you should click the parent to show/hide the child
//            "hover" = you should place the mouse over the parent to show
//                      the child
// position - "x" = the child is displayed to the right of the parent
//            "y" = the child is displayed below the parent
// cursor   - Omit to use default cursor or check any CSS manual for possible
//            values of this field
////////////////////////////////////////////////////////////////////////////
function at_attach(parent, child, position, focusImage, initImage)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child);

  p["at_parent"]     = p.id;
  c["at_parent"]     = p.id;
  p["at_child"]      = c.id;
  c["at_child"]      = c.id;
  p["at_position"]   = position;
  c["at_position"]   = position;

  p["focusImage"] =focusImage;
  p["initImage"] =initImage;

  c["focusImage"] =focusImage;
  c["initImage"] =initImage;


  c.style.position   = "absolute";
  c.style.visibility = "hidden";

  //if (cursor != undefined) p.style.cursor = "pointer";

  //hover type dropdown, mean mouse over
  p.onmouseover = at_show;
  p.onmouseout  = at_hide;
  c.onmouseover = at_show;
  c.onmouseout  = at_hide;

}















///////////////////////////////////////////////////////////////////////
//build up drop down menus
//this should also be easy for future change
//This will use document DOM object to insert the submenu groups, similar to
//<div id='about_sub_menu' style='position: absolute; visibility: hidden;'>
//	<p class='sub_menu' alt='Our Pastor'><a href='pastor.html'>Our Pastor</a></p>
//	<p class='sub_menu' alt='Our Staff'><a href='staff.html'>Our Staff</a></p>
//	<p class='sub_menu' alt='Deacon Members><a href='deacon.html'>Deacon Members</a></p>
//</div>
//////////////////////////////////////////////////////////////////////
function builddropdown(topicId)
{
	//LET ME BUILD top imge menus first
	var str ="<table cellspacing='0' cellpadding='0'>"+
		"<tr>"+
		"	<td class='row_bottom'><a href='/index.php'><img id='home' src='/images/Top_button_home_s1.png' border='0' alt='Home'></a></td>"+
		"	<td class='row_bottom'><img id='about' src='/images/Top_button_about_s1.png' border='0' alt='About our church'></td>"+
		"	<td class='row_bottom'><img id='fellowship' src='/images/Top_button_fellowship_s1.png' border='0' alt='Fellowship'></td>"+
		"	<td class='row_bottom'><img id='events' src='/images/Top_button_events_s1.png' border='0' alt='Church Events'></td>"+
		"	<td class='row_bottom'><a href='/index_cn.html'><img id='Chinese' src='/images/Top_button_Chinese_s1.png' border='0' alt='Chinese Version'></a></td>"+
		"</tr>"+
		"</table>";
	//this is for the currennt visited page
	var newStr=str.replace(topicId + "_s1", topicId+"_s3");
	var topMenu=document.getElementById("top_menu_area");
	topMenu.innerHTML =newStr;
	
	if (topicId=="none"){
		topMenu.style.top = "114";
	}
	
	//these two has no sub menu yet
	createMenuGroup("home", "home_sub_menu", topicId);
	createMenuGroup("Chinese", "chinese_sub_menu", topicId);
	
	//fellowships
	createMenuGroup("fellowship", "fellowship_sub_menu", topicId);	
	createMenuItem("fellowship_sub_menu", "Canaan Fellowship", "fellowships/fellowship_canaan.html");
	createMenuItem("fellowship_sub_menu", "Zion Fellowship", "fellowships/fellowship_zion.html");
	createMenuItem("fellowship_sub_menu", "Caleb Fellowship", "fellowships/fellowship_caleb.html");
	createMenuItem("fellowship_sub_menu", "Eagle Heights Fellowship", "fellowships/fellowship_eagleheights.html");
	createMenuItem("fellowship_sub_menu", "Women's Fellowship", "fellowships/fellowship_sister.html");	
	createMenuItem("fellowship_sub_menu", "Youth Group", "fellowships/fellowship_youth.html");

	//about menu
	createMenuGroup("about", "about_sub_menu", topicId);
	createMenuItem("about_sub_menu", "Our Faith", "faith.html");
	createMenuItem("about_sub_menu", "Our Church", "church.html");
	createMenuItem("about_sub_menu", "Our Pastor", "pastor.html");
	createMenuItem("about_sub_menu", "Staff", "staff.html");
	createMenuItem("about_sub_menu", "Deacons", "deacon.html");
	createMenuItem("about_sub_menu", "Suggestions", "suggestions.php");
	createMenuItem("about_sub_menu", "Contact Us", "contact.html");

	//event menu
	createMenuGroup("events", "events_sub_menu", topicId);
	createMenuItem("events_sub_menu", "Church Calendar", "MCCCCalendarBigView.php");	
	createMenuItem("events_sub_menu", "Special Events", "specialevents.html");
	createMenuItem("events_sub_menu", "Regular Events", "regularevents.html");
	createMenuItem("events_sub_menu", "Classes", "classes.html");

	var divTag = document.createElement("div");
	divTag.id = "center_strip"; 
	divTag.style.backgroundImage = "url(images/interior/BG_center.jpg)";
	divTag.style.position = "absolute";
	divTag.style.visibility = "hidden";
	divTag.style.top=0+ 'px';
	divTag.style.left=-1+'px';
	divTag.style.height=10+'px';
	divTag.style.width=document.body.clientWidth +2;
	divTag.style.zIndex ='0';
	divTag.style.backgroundRepeat="repeat";

	document.getElementById("wrapper").appendChild(divTag);
			
		
	divTag = document.createElement("div");
	divTag.id = "bottom_strip";
	divTag.style.backgroundImage = "url(images/interior/BG_bottom.jpg)";
	divTag.style.position = "absolute";
	divTag.style.visibility = "hidden";
	divTag.style.top=0 -1 +  'px';
	divTag.style.left=-1+'px';
	divTag.style.height=175+'px';
	divTag.style.width=document.body.clientWidth +2;
	divTag.style.zIndex ='0';
	divTag.style.backgroundRepeat= "repeat-x";
	document.getElementById("wrapper").appendChild(divTag);		
}



function createMenuItem(sub_menu_group, word, link)
{
	var pTag = document.createElement("p");
	pTag.className ="sub_menu";
	pTag.innerHTML = "<a href='/" + link + "'>" + word + "</a>";
	document.getElementById(sub_menu_group).appendChild(pTag);
}

function createMenuGroup(menu, sub_menu_group, topicId) 
{   
	//create the sub_menu_group first
	var divTag = document.createElement("div");
	divTag.id = sub_menu_group; 
	divTag.style.position = "absolute";
	divTag.style.visibility = "hidden";
	divTag.style.zIndex="4";
	document.body.appendChild(divTag);
	//finally, attach each sub menu them to the main top menu images
	if (topicId==menu)
	{
		at_attach(menu, sub_menu_group, "y", "/images/Top_button_"+menu+"_s3.png", "/images/Top_button_"+menu+"_s3.png");
	}
	else
	{
		at_attach(menu, sub_menu_group, "y", "/images/Top_button_"+menu+"_s2.png", "/images/Top_button_"+menu+"_s1.png");
	}
}









function getElementsByClassName(className, tag)
{	
	var divs = document.getElementsByTagName(tag);
	for(var no=0;no<divs.length;no++)
	{
		if(divs[no].className==className){
			return divs[no];
		}
	}
	return null;
}

var numberOfImages = 0; 	// global
var numberOfImagesLoaded = 0; 	// global
////////////////////////////////////////////////
// setup the event listeners
//////////////////////////////////////////////////
function adjust() 
{
	
	//we only care about images under this section
	var p = document.getElementById("subpage_body_text_area");
	var imgs = p.getElementsByTagName('img');
	var n = imgs.length;

	numberOfImages=n;
	numberOfImagesLoaded=0;
	
	if (numberOfImages==0){
		extend();
	}
	else{
		while (n--) {
			addEvent(imgs[n], 'load', imgLoad);
		}
	}
}

//////////////////////////////////////////////////////
// addEvent function to register the event
/////////////////////////////////////////////////////////
function addEvent(obj, ev, fn) 
{
	if (obj.addEventListener) {
		obj.addEventListener(ev, fn, false);
	} else if (obj.attachEvent) {
		obj.attachEvent('on' + ev, fn);
	}
}

/////////////////////////////////////////////////////////////////////////////////
// do something when the image is loaded
// I nned to waut till all images are loaded, then I will do the extend function.
//There could eb multiple images, so I have to count till all is ready.
//////////////////////////////////////////////////////////////////////////////////
function imgLoad(e) 
{
	if (!e) var e = window.event;
	var target = e.currentTarget || e.srcElement;

	numberOfImagesLoaded++;
	
	if (numberOfImagesLoaded == numberOfImages) {
		//all images are loaded, let us do extension
		extend();
	}
}


/////////////////////////////////////////////////////////////////////////////////
//Dynamically adjust the site map section. based on the body test height
///////////////////////////////////////////////////////////////////////////////
function extend(){

 	var height=document.getElementById("subpage_body_text_area").clientHeight;
 	var top1=document.getElementById("subpage_body_text_area").offsetTop+2;
 	var pos=height+ top1-19;
 	
 	//change the back ground image, the 769 is the background image height, 
 	//the 174 is the height of the footer (water) image height
 	//we need to extend
 	if (pos +19 + 174 >769)
 	{
 		getElementsByClassName("subpage_body_centered", "table").style.height=pos+2+'px'; 
	 	//move the floating section up little bit to fill the gap
 		document.getElementById("float").style.top=pos -2 + 'px'; 
 		document.body.style.backgroundImage = "url(images/interior/BG_main.jpg)";
 		document.body.style.backgroundColor = "#E9E9E9";		
 	}
 	else
 	{
 		//we don't need extend
		//let us make the body-text section a little big to fit the site map
		getElementsByClassName("subpage_body_text", "table").style.height=450+19 +'px';
		document.body.style.backgroundColor = "#E9E9E9";

 		var ddd = document.getElementById("center_strip");
		ddd.style.visibility = "hidden";

				
		ddd = document.getElementById("bottom_strip");
		ddd.style.visibility = "hidden";
 	}
 	
 	var p = document.getElementById("thumbs");
 	if (p!=null)
 	{
 		getElementsByClassName("subpage_body_centered", "table").style.height=675+2+'px'; 
		//move the floating section up little bit to fill the gap
		document.getElementById("float").style.top=675 -2 + 'px'; 
		document.body.style.backgroundImage = "url(images/interior/BG_main.jpg)";
 		document.body.style.backgroundColor = "#E9E9E9";
 	}
}

//make the WIDTH of subpage_body_text table bigger
function wider()
{
	//let us make the body-text section a little big to fit the site map
	getElementsByClassName("subpage_body_text", "table").style.width=587+'px';
}


////////////////////////////////////////
//the site map table at boottom, so that
//I dont need to change for every page
///////////////////////////////////////
function sitemap(id)
{
	var str="<table class='page_index_content'>"+ 
		"<tr>" +
		"	<td><a href='index.php'>Home</a></td>" +
		"	<td class='subitem'><a href='/staff.html'>Staff</a></td>" +
		"	<td class='subitem'><a href='/fellowship_canaan.html'>Canaan Fellowship</a></td>" +
		"	<td class='subitem'><a href='/fellowship_youth.html'>Youth Group</a></td>" +
		"	<td class='subitem'><a href='/classes.html'>Classes</a></td>" +
		"	<td><a href='/index_cn.html'>&#20013;&#25991;</a></td>" +
		"</tr>" +
		"<tr>" +
		"	<td>About</td>" +
		"	<td class='subitem'><a href='/deacon.html'>Deacons</a></td>" +
		"	<td class='subitem'><a href='/fellowship_zion.html'>Zion Fellowship</a></td>" +
		"	<td>Events</td>" +
		"	<td><a href='/elibrary.html'>E-Library</a></td>" +
		"	<td></td>" +
		"</tr>" +
		"<tr>" +
		"	<td class='subitem'><a href='/faith.html'>Our Faith</a></td>" +
		"	<td class='subitem'><a href='/suggestions.php'>Suggestions</a></td>" +
		"	<td class='subitem'><a href='/fellowship_caleb.html'>Caleb Fellowship</a></td>" +
		"	<td class='subitem'><a href='/MCCCCalendarBigView.php'>Church Calendar</a></td>" +
		"	<td><a href='/gallery.php'>Media Gallery</a></td>" +
		"	<td></td>" +
		"</tr>" +
		"<tr>" +
		"	<td class='subitem'><a href='/church.html'>Our Church</a></td>" +
		"	<td class='subitem'><a href='/contact.html'>Contact Us</a></td>" +
		"	<td class='subitem'><a href='/fellowship_eagleheights.html'>Eagle Heights Fellowship</a></td>" +
		"	<td class='subitem'><a href='/specialevents.html'>Special Events</a></td>" +
		"	<td><a href='/sermons.php'>Sermon Recordings</a></td>" +
		"	<td></td>" +
		"</tr>" +
		"<tr>" +
		"	<td class='subitem'><a href='/pastor.html'>Our Pastor</a></td>" +
		"	<td>Fellowships</td>" +
		"	<td class='subitem'><a href='/fellowship_sister.html'>Women's Fellowship</a></td>" +
		"	<td class='subitem'><a href='/regularevents.html'>Regular Events</a></td>" +
		"	<td><a href='/student.html'>New Student Resources</a></td>" +
		"	<td></td>" +
		"</tr>" +
    		"</table>";
	document.getElementById(id).innerHTML = str;
	
	/* I need a copy sogn */
	//var s="<table class='copyright_content'><tr><td>copyright@mccc 2011</td></tr></table>"
	var s="Copyright&#169;MCCC 2011"
	var divTag = document.createElement("div");
	divTag.id = "copyright";
	divTag.style.zIndex="9";
	document.getElementById(id).appendChild(divTag);
	document.getElementById("copyright").innerHTML = s;
}


function openFullScreen(url) 
{
 params  = 'width='+screen.width;
 params += ', height='+screen.height;
 params += ', top=0, left=0';
 params += ', resizable=yes';
 params += ', menubar=yes';
 params += ', toolbar=yes';
 params += ', status=yes';
 params += ', scrollbars=yes';

 newwin=window.open(url,'windowname4', params);
 if (window.focus) {newwin.focus()}
 return false;
}


////////////////////////////////////////
//the left menu at left, so that
//I dont need to change for every page
///////////////////////////////////////
function leftmenus(id)
{
	var str="<img src='/images/Left_buttons_bg.png'  width='189' height='264'>"+
		"<div id='left_menu_area'>"+
		"	<!-- now the menus -->"+
		"	<table class='left_menus'>"+
		"		<tr><td>"+
		"			<a href='/elibrary.html'>"+
		"			<img id='elibrary' src='/images/Left_button_eLibrary_s1.png'"+
		"			onmouseover=\"showImage('elibrary', '/images/Left_button_eLibrary_s2.png' )\""+
		"			onmouseout=\"showImage('elibrary', '/images/Left_button_eLibrary_s1.png')\""+
		"			border='0'"+
		"			alt='E-Library'>"+
		"			</a>"+
		"		</td></tr>"+
		"		<tr><td>"+
		"			<a href='/gallery.php'>"+
		"				<img id='gallery' src='/images/Left_button_gallery_s1.png'"+
		"				onmouseover=\"showImage('gallery', '/images/Left_button_gallery_s2.png' )\""+
		"				onmouseout=\"showImage('gallery', '/images/Left_button_gallery_s1.png')\""+
		"				border='0'"+
		"				alt='gallary'>"+
		"			</a>"+
		"		</td></tr>"+
		"		<tr><td>"+
		"			<a href='/sermons.php'>"+
		"				<img id='sermon' src='/images/Left_button_Sermons_s1.png'"+
		"				onmouseover=\"showImage('sermon', '/images/Left_button_Sermons_s2.png' )\""+
		"				onmouseout=\"showImage('sermon', '/images/Left_button_Sermons_s1.png')\""+
		"				border='0'"+
		"				alt='sermons'>"+
		"			</a>"+
		"		</td></tr>"+
		"		<tr><td>"+
		"			<a href='/student.html'>"+
		"				<img id='student' src='/images/Left_button_student_s1.png'"+
		"				onmouseover=\"showImage('student', '/images/Left_button_student_s2.png' )\""+
		"				onmouseout=\"showImage('student', '/images/Left_button_student_s1.png')\""+
		"				border='0'"+
		"				alt='new students'></a>"+
		"		</td></tr>"+
		"	</table>"+
		"</div>";
	document.getElementById(id).innerHTML = str;
}


////////////////////////////////////////////////////////////////////////////
//Contact area
////////////////////////////////////////////////////////////////////////////
function contact(id)
{
	var str="<img src='/images/Contacts_bg.jpg' alt='contact us' width='180' height='161'>"+
		"<div id='contact_youtube'>"+
		"	<img src='/images/Contact_youtube.png' alt='find us at youtube' width='27' height='27'>"+
		"</div>"+
		"<div id='contact_facebook'>"+
		"	<a href='http://www.facebook.com/profile.php?id=100002311964486'>"+
		"		<img id='facebook' src='/images/Contact_facebook.png' alt='follow us on facebook' width='27' height='27' border='0' "+
		"			onmouseover=\"showImage('facebook', '/images/Contact_facebook_blue.png' )\""+
		"			onmouseout=\"showImage('facebook', '/images/Contact_facebook.png')\""+
		"		>"+
		"	</a>"+
		"</div>"+
		"<div id='contact_twitter'>"+
		"	<img src='/images/Contact_twitter.png' alt='follow us on twitter' width='27' height='27'>"+
		"</div>"+
		"<table  class='contact'>"+
		"	<tr><td>1510 Madison Street</td></tr>"+
		"	<tr><td>Madison, WI 53711</td></tr>"+
		"	<tr><td>608.251-2251</td></tr>"+
		"	<tr><td><a href='mailto:info@madisonccc.org'><font color='#3E3E3E'>info@madisonccc.org</font></a></td></tr>"+
		"	<tr><td><a href='/contact.html'><font color='#FFFFFF'>Full Contact Info</font></a></td></tr>"+
		"</table>";
	document.getElementById(id).innerHTML = str;
}


/////////////////////////////////////////////////
//Validate some forms
///////////////////////////////////////////////
function validateSuggestionForm()
{
	var x=document.forms["suggestionForm"]["Category"].value
	if (x==null || x=="0")
	 {
	  	alert("Please select a comment/suggestion category.");
	  	return false;
  	}
  	
  	x=document.forms["suggestionForm"]["Comments_Text"].value
	if (x==null || x=="")
	{
		 alert("Please provide comment/suggestion detail.");
		 return false;
  	}
}



//////////////////////////////////////////////////////////
//These are all for sermon pages
//////////////////////////////////////////////////////////
function OnSermonSearch()
{

    var drp=document.getElementById("searchCategory")
    myindex=drp.selectedIndex
    
    //if select by year, we will make the year visible, other wise, make the text visible
    if (myindex==0){
    	document.getElementById("searchYear_").style.visibility = "visible";
    	document.getElementById("searchStr_").style.visibility = "hidden";
    }
    else{
    	document.getElementById("searchYear_").style.visibility = "hidden";
    	document.getElementById("searchStr_").style.visibility = "visible";
    }
    
}