var videoSubHeadings = { "headingList": [
                           { "tag" : "Laura", "headings": [ { "heading": "Before Birth" }, { "heading": "Newborn" }, { "heading": "Age <1" }, { "heading": "Age 1" }, { "heading": "Age 2" } ] },
                           { "tag" : "Luke",  "headings": [ { "heading": "Before Birth" }, { "heading": "Newborn" }, { "heading": "Age <1" }, { "heading": "Age 1" }, { "heading": "Age 2" } ] },
                           { "tag" : "All",   "headings": [ { "heading": "2000" }, { "heading": "2001" }, { "heading": "2002" }, { "heading": "2003" }, { "heading": "2004" }, { "heading": "2005" }, { "heading": "2006" }, { "heading": "2007" }, { "heading": "2008" }, { "heading": "2009" } ] }
                         ]
                       };


var videoTagListHTML="<a href='#' onclick='updateVideoListHTML(\"Celebrations\");'>Celebrations</a> | "+
               "<a href='#' onclick='updateVideoListHTML(\"2009\");'>2009</a> | "+
               "<a href='#' onclick='updateVideoListHTML(\"2008\");'>2008</a> | "+
               "<a href='#' onclick='updateVideoListHTML(\"2007\");'>2007</a> | "+
               "<a href='#' onclick='updateVideoListHTML(\"2006\");'>2006</a> | "+
               "<a href='#' onclick='updateVideoListHTML(\"2005\");'>2005</a> | "+
               "<a href='#' onclick='updateVideoListHTML(\"2004\");'>2004</a> | "+
               "<a href='#' onclick='updateVideoListHTML(\"2003\");'>2003</a> | "+
               "<a href='#' onclick='updateVideoListHTML(\"2002\");'>2002</a> | "+
               "<a href='#' onclick='updateVideoListHTML(\"2001\");'>2001</a> | "+
               "<a href='#' onclick='updateVideoListHTML(\"2000\");'>2000</a> | " +
               "<a href='#' onclick='updateVideoListHTML(\"Age 2\");'>Age 2</a> | " +
               "<a href='#' onclick='updateVideoListHTML(\"Age 1\");'>Age 1</a> | " +
               "<a href='#' onclick='updateVideoListHTML(\"Age <1\");'>Age &lt;1</a> | " +
               "<a href='#' onclick='updateVideoListHTML(\"Newborn\");'>Newborn</a> | " +
               "<a href='#' onclick='updateVideoListHTML(\"Before Birth\");'>Before Birth</a> | " +
               "<a onclick='hideTagList()'>Cancel</a>";

function showVideoActiveTag() {
  var tagVariable=window.chosenTag;
  var content="";
  var foundMatch=false;

  if (tagVariable=='false' || tagVariable=='All') {  
    content=content+"<a href='#' onclick='updateVideoListHTML(\"All\");'><div class='tagSelected'>All Videos<br/><img border='0' src='/images/photos/teaparty.jpg'></div></a>";
    foundMatch=true;
  } else {
    content=content+"<a href='#' onclick='updateVideoListHTML(\"All\");'><div class='tagSection'>All Videos<br/><img border='0' src='/images/photos/teaparty.jpg'></div></a>";
  }

  if (tagVariable=='Laura') {
    content=content+"<a href='#' onclick='updateVideoListHTML(\"Laura\")'><div class='tagSelected'>Laura<br/><img border='0' src='/images/photos/laura.jpg'></div></a>";
    foundMatch=true;
  } else {
    content=content+"<a href='#' onclick='updateVideoListHTML(\"Laura\")'><div class='tagSection'>Laura<br/><img border='0' src='/images/photos/laura.jpg'></div></a>";
  }

  if (tagVariable=='Luke') {
    content=content+"<a href='#' onclick='updateVideoListHTML(\"Luke\");'><div class='tagSelected'>Luke<br/><img border='0' src='/images/photos/luke.jpg'></div></a>";
    foundMatch=true;
  } else {
    content=content+"<a href='#' onclick='updateVideoListHTML(\"Luke\");'><div class='tagSection'>Luke<br/><img border='0' src='/images/photos/luke.jpg'></div></a>";
  }

/*
  if (tagVariable=='Places') {
    content=content+"<a href='#' onclick='updateVideoListHTML(\"Places\");'><div class='tagSelected'>Places<br/><img border='0' src='/images/photos/isleofman.jpg'></div></a>";
    foundMatch=true;
  } else {
    content=content+"<a href='#' onclick='updateVideoListHTML(\"Places\");'><div class='tagSection'>Places<br/><img border='0' src='/images/photos/isleofman.jpg'></div></a>";
  }

  if (foundMatch) {
    content=content+"<a href='#' onclick='showVideoTagList()'><div id='moreOptionsTagList' class='tagSectionWide'>More Options</div></a>&nbsp;";
  } else {
    content=content+"<div id='moreOptionsTagList' class='tagSectionWide'>" + tagListHTML + "</div>&nbsp;";
  }
*/
  document.getElementById('tagList').innerHTML=content;

}

function showVideoTagList() {
  document.getElementById('moreOptionsTagList').innerHTML=tagListHTML;
}
function hideVideoTagList() {
  document.getElementById('moreOptionsTagList').innerHTML="<a href='#' onclick='showVideoTagList()'>More Options</a>";
}

function updateVideoListHTML(chosenTag) {
   window.chosenTag=chosenTag;
   makeVideoListHTML();
}

function makeVideoListHTML() {
   var tagVariable=window.chosenTag;
   var content="";
   var index = videoList.videos.length-1;
   var displayIndex = 0;

   showVideoActiveTag();

   var headings;
   if (tagVariable=='Laura') {
     headings=videoSubHeadings.headingList[0].headings;
   } else if (tagVariable=='Luke') {
     headings=videoSubHeadings.headingList[1].headings;
   } else {
     headings=videoSubHeadings.headingList[2].headings;
   }
   var lastHeadingDisplayed="";


   for (var n=0; n<videoList.videos.length; n++) {

      var thumb = videoList.videos[index].thumbnail;
      var videoFile = videoList.videos[index].videoFile;
      var label = videoList.videos[index].description;
      var tags = videoList.videos[index].tags;
      var elementID = 'videoBox'+n;
      
      var showEntry = false;
      if (tagVariable=='All') {
        showEntry = true;
      } else {
         for (var m=0; m<tags.length; m++) {
            if (tags[m].tag==tagVariable) {
               showEntry = true;
            }
         }
      }

      if (showEntry==true) {

         /* If there is a tag on the list of subHeadings that does not match the last displayed subHeading, add a new subheading */
         for (var t=0; t<tags.length; t++) {
            var tempMatch=tags[t].tag;
            for (var s=0; s<headings.length; s++) {
               if ((tempMatch==headings[s].heading) && (tempMatch!=lastHeadingDisplayed)) {
                  content=content+"<div class='clear'></div><h3>" + tempMatch + "</h3>"
                  lastHeadingDisplayed=tempMatch;
                  displayIndex=0;
               }
            }
         }

         var leftOrRight = '';

         if (displayIndex%2 == 0) {
            content=content+'<div class="leftcol">';
            leftOrRight='videoLeft';
         } else {
            content=content+'<div class="rightcol">';
            leftOrRight='videoRight';
         }
         if (displayIndex<2) {
            content=content+'<div class="hr"><hr></div>';
         }

         content=content+'<p><img src="' + thumb + '" /></p>';
         content=content+'<div class="photoIndexText"><a class="imgchange" onClick="showVideo(\'' + videoFile + '\',\'' + elementID + '\')">' + label + '</a>';
         content=content+'<br/><div class="tags">Tags: ';
         for (var m=0; m<tags.length; m++) {
           content=content+tags[m].tag;
           if (m<tags.length-1) {
             content=content+', ';
           }
         }
         content=content+'</div></div>';
         content=content+'<div class="clear"></div>';
         content=content+'<div id=\'' + elementID + '\' class=\'' + leftOrRight + '\'></div>';
         content=content+'<div class="hr"><hr></div></div>';
         if (displayIndex%2 != 0) {
            content=content+'<div class="clear"></div>';
         }
         displayIndex++;
      }
      index--;
   }
   document.getElementById('videoList').innerHTML=content;
   document.getElementById('videoTitle').innerHTML="Videos : "+tagVariable;
}

function showVideo(filename,elementID) {
  var content='<object type=\"application/x-shockwave-flash\" data=\"/includes/FlowPlayer.swf\"' +
	'width=\"420\" height=\"350\" id=\"FlowPlayer\">' +
	'<param name=\"allowScriptAccess\" value=\"sameDomain\" />' +
	'<param name=\"movie\" value=\"/includes/FlowPlayer.swf\" />' +
	'<param name=\"quality\" value=\"high\" />' +
	'<param name=\"wmode\" value=\"transparent\" />' +
	'<param name=\"flashvars\" value=\"config={videoFile: \'' + filename +
	    '\', autoPlay: true, initialScale: \'fit\', loop: \'false\'}\" />' +
	'</object><br/><a onclick="closeVideo(\'' + elementID + '\')">Close Video</a><br/><br/>';
  document.getElementById(elementID).innerHTML=content;
}

function closeVideo(elementID) {
   document.getElementById(elementID).innerHTML='';
}












/*
function makeVideoListHTML(listVariable) {
   var index = listVariable.videos.length-1;
   for (var n=0; n<listVariable.videos.length; n++) {
      var thumb = listVariable.videos[index].thumbnail;
      var file = listVariable.videos[index].videoFile;
      var description = listVariable.videos[index].description;
      var elementID = 'videoBox'+n;
      var leftOrRight = '';
      if (n%2 == 0) {
         document.write('<div class="leftcol"><p>');
         leftOrRight='videoLeft';
      } else {
         document.write('<div class="rightcol">');
         leftOrRight='videoRight';
      }
      if (n<2) {
         document.write('<div class="hr"><hr></div>');
      }
      document.write('<p><a class="imgchange" onClick="showVideo(\'' + file + '\',\'' + elementID + '\')">');
      document.write('<img src="videos/' + thumb + '">' + description + '</a></p>');
      document.write('<div class="clear"></div>');
      document.write('<div id=\'' + elementID + '\' class=\'' + leftOrRight + '\'></div>');
      document.write('<div class="hr"><hr></div></div>');
      if (n%2 != 0) {
         document.write('<div class="clear"></div>');
      }
      index--;
   }
}
*/