/*---------------------------------------------------------------
 (c) 2008 Divine Savior United Methodist Church
     5702 South Hill Drive, Madison, WI  53705
     (608) 238-7753, dsumc@wisconsinumc.org

 TITLE: Divine Savior United Methodist Church (dsshow.js)
 URL..: www.divinesaviorumc.org
 DATA.: This file uses J-script
 Notes: Contains all 'effects,' except the menus (since that needs to be loaded for every page) and those that have a ton of data (like the lectionary)
---------------------------------------------------------------*/

function loadYouth(youthNum)
{
youth = new Array("youth_missiontrip.JPG", 
"youth_hiking.jpg", 
"youth_horsebackriding.jpg", 
"youth_retreat.JPG", 
"youth_climbing.jpg")
document.getElementById('slideScreen').innerHTML = '<img id="youthPicture" alt="Youth Photos" src="images/' + youth[youthNum] + '" height="200" align="middle">'
showSlideControl("loadYouth",(youthNum+1),5,"Previous","Next"); /* youthNum +1 is because array starts at 0 but control at 1 */
}

function loadCom(comNum)
{
com = new Array("community_habitat2.jpg", 
"community_habitat1.jpg", 
"community_serviceday.jpg", 
"community_habitat3.JPG", 
"community_serviceday2.jpg")
document.getElementById('slideScreen').innerHTML = '<img id="comPicture" alt="Community Outreach Photos" src="images/' + com[comNum] + '" height="200" align="middle">'
showSlideControl("loadCom",(comNum+1),5,"Previous","Next"); /* comNum +1 is because array starts at 0 but control at 1 */
}

function loadMiss(missNum)
{
miss = new Array("gytte_01.jpg",
"gytte_01.jpg",
"gytte_02.jpg",
"gytte_03.jpg",
"gytte_04.jpg",
"gytte_05.jpg",
"gytte_06.jpg",
"gytte_07.jpg",
"gytte_08.jpg",
"gytte_09.jpg",
"gytte_10.jpg",
"gytte_11.jpg",
"gytte_12.jpg",
"gytte_13.jpg",
"gytte_14.jpg",
"gytte_15.jpg",
"gytte_16.jpg")
document.getElementById('slideScreen').innerHTML = '<img id="missionPicture" alt="GYTTE Photos" src="images/' + miss[missNum+1] + '" height="200" align="middle">'
showSlideControl("loadMiss",(missNum+1),16,"Previous","Next"); /* misNum +1 is because array starts at 0 but control at 1 */
}

function loadPuppets(puppNum)
{
pupp = new Array("mastershands_puppets.jpg", 
"mastershands.jpg", 
"mastershands_banner.jpg")
document.getElementById('slideScreen').innerHTML = '<img id="puppetPicture" alt="The Master\'s Hands pictures" src="images/' + pupp[puppNum] + '" height="220" align="middle">'
showSlideControl("loadPuppets",(puppNum+1),3,"Previous","Next"); /* lectNum +1 is because array starts at 0 but control at 1 */
}

/* puts the next and previous buttons on the page and calls the given function when clicked */
function showSlideControl(routine, displayNum, numQuotes, prevStr, nextStr) {
  var spaces = ' &nbsp&nbsp&nbsp ';
  if (displayNum==1) {
    /* var first = 'First'; */
    var prev = prevStr;
  } else {
    /* var first = '<a href=\"#\" onclick=\"loadLect(1);\">First</a>'; */
    var prev = '<a href=\"#\" onclick=\"' + routine + '(' + (displayNum - 2) + ');\">' + prevStr + '</a>'; /* displayNum -2 is because array starts at 0 but control at 1 */

  }
  var count = displayNum + " of " + numQuotes;
  if (displayNum==numQuotes) {
    /* var last = 'Last'; */
    var next = nextStr;
  } else {
  	var next = '<a href=\"#\" onclick=\"' + routine + '(' + (displayNum) + ');\">' + nextStr + '</a>'; /* displayNum isn't +1 because array starts at 0 but control at 1 */
    /* var last = '<a href=\"#\" onclick=\"loadLect(' + numQuotes + ');\">Last</a>'; */
  }
  document.getElementById('slideControl').innerHTML = spaces + prev + spaces + count + spaces + next + spaces + "&nbsp";
  /* document.getElementById('slideControl').innerHTML = first + spaces + prev + spaces + count + spaces + next + spaces + last + "&nbsp"; */

}


/* Used to display and hide text as a heading is clicked. For example, to hide directions that aren't relevant without reloading an entire page. An example is:
  <a href="#" class="toggle" onclick="toggleDisplay('test');">This is the text to click.</a>
  <p id="test" style="display:none">
  This is a paragraph that sometimes hides itself.</p>
Note the contrast with toggleDisplayBlock, which toggles between "none" and "block" */
function toggleDisplayInline(id)
{
var state = document.getElementById(id).style;
if (state.display == "none"){
state.display = "inline"; /*note that this function (as currently written) doesn't care if the text was originally block; so it'll look sloppy if 'id' refers to a block element*/
} else {
state.display = "none";
}
}

function toggleDisplayInlineSeven(id1, id2, id3, id4, id5, id6, id7)
{
toggleDisplayInline(id1);
toggleDisplayInline(id2);
toggleDisplayInline(id3);
toggleDisplayInline(id4);
toggleDisplayInline(id5);
toggleDisplayInline(id6);
toggleDisplayInline(id7);
}

/* Used to display and hide text as a heading is clicked. For example, to hide directions that aren't relevant without reloading an entire page. An example is:
<a href="#" class="toggle" onclick="toggleDisplay('test');">This is the text to click.</a>
<p id="test" style="display:none">
This is a paragraph that sometimes hides itself.</p> 
Note the contrast with toggleDisplayInline, which toggles between "none" and "inline" */
function toggleDisplayBlock(id)
{
var state = document.getElementById(id).style;
if (state.display == "none"){
state.display = "block"; /*note that this function (as currently written) doesn't care if the text was originally inline; so it'll look sloppy if 'id' refers to an inline element*/
} else {
state.display = "none";
}
}