/***************************************************************************************
 * ChannelDetail JScript - to manage AJAX screen interactions on bobg.tv               *
 *                                                                                     *
 * (c) 2006, Bob German                                                                *
 ***************************************************************************************/

var SLIDE_TIMEOUT = 5000;

var navSpChannelName;
var navDvPlayerControls;
var navDvImagePreview;
var navTdImagePreview;
var navDvImageIndex;
var navImPlayPause;
var mainDvImage;
var mainDvImageHorizontal;
var mainTdImageHorizontal;
var mainTdCaptionHorizontal;
var mainDvImageVertical;
var mainTdImageVertical;
var mainTdCaptionVertical;

var channelDirectory;
var selectedItem = 0;
var maxItem = 0;


/***************************************************************************************
 * Page Initialization                                                                 *
 ***************************************************************************************/

function pageLoad(channelDir)
{
   // Get well-known HTML elements
   navSpChannelName = document.getElementById("navSpChannelName");
   navDvPlayerControls = document.getElementById("navDvPlayerControls");
   navDvImagePreview = document.getElementById("navDvImagePreview");
   navTdImagePreview = document.getElementById("navTdImagePreview");
   navDvImageIndex = document.getElementById("navDvImageIndex");
   navImPlayPause = document.getElementById("navImPlayPause");
   mainDvImage = document.getElementById("mainDvImage");
   mainDvImageHorizontal = document.getElementById("mainDvImageHorizontal");
   mainTdImageHorizontal = document.getElementById("mainTdImageHorizontal");
   mainTdCaptionHorizontal = document.getElementById("mainTdCaptionHorizontal");
   mainDvImageVertical = document.getElementById("mainDvImageVertical");
   mainTdImageVertical = document.getElementById("mainTdImageVertical");
   mainTdCaptionVertical = document.getElementById("mainTdCaptionVertical");
   
   // Initialize the state of the well-known elements
   navDvPlayerControls.style.display = "inline";
   navDvImagePreview.style.display = "none";
   navDvImageIndex.style.display = "inline";
   mainDvImageHorizontal.style.display = "inline";
   mainDvImageVertical.style.display = "none";

/*
   channelDirectory = document.location.search.substr (1);
   channelDirectory = channelDirectory.substr (channelDirectory.indexOf ("channel=")+8);
   if (channelDirectory.indexOf ("&") > 0)
   {
     channelDirectory = channelDirectory.substr (0, channelDirectory.indexOf ("&"));
   }
*/
   channelDirectory = channelDir;
   
   LoadXmlDoc (channelDirectory + "/index.xml");

/*
   navSpChannelName.innerHTML = GetGalleryName();
*/
   
   var image;

   var imageIndexHTML = '';
   imageIndexHTML += '<table border="0" cellspacing="0" cellpadding="0" width="100%">';
   maxItem = GetImageCount()-1;
   
   for (i=0; i<=maxItem; i++)
   {
     imageNum = GetImageAttribute (i, "index");
     imageId = getId (i);
     imageIndexHTML += '<tr><td id="' + imageId;
     imageIndexHTML += '" class="navIndex" ';
     imageIndexHTML += 'onmouseOver="onImageIndexMouseOver(\'' + imageId + '\');" onmouseout="onImageIndexMouseOut(\'' + imageId + '\');" '
     imageIndexHTML += 'onclick="onImageIndexClick(\'' + imageId + '\');"'
     imageIndexHTML += '>' + imageNum + '</td></tr>';
   }
   imageIndexHTML += '</table>';
   navDvImageIndex.innerHTML = imageIndexHTML;

   selectImage (0);
   
   // Now cache them!
   
   var imageCache;
   for (i=0; i<=maxItem; i++)
   {
		imageCache = new Image();
		imageCache.src = channelDirectory + '/' + GetImageAttribute (i, 'url');
   }
}

/***************************************************************************************
 * Event Handlers                                                                      *
 ***************************************************************************************/

/*
 * Image Index
 */
 
function onImageIndexMouseOver (elementId)
{
   var e = document.getElementById (elementId);
   e.className = 'navIndexMouseover';

   var i = getIndex(e);
   var url = GetImageAttribute (i, 'thumbnailUrl');
   navDvImagePreview.style.display = "inline";
   navDvPlayerControls.style.display = "none";  
   navTdImagePreview.style.backgroundImage = "url(" + channelDirectory + "/" + url + ")";
   navTdImagePreview.style.backgroundRepeat = "no-repeat";
   navTdImagePreview.style.backgroundPosition = "top center";
}

function onImageIndexMouseOut (elementId)
{
   var e = document.getElementById (elementId);
   if (getIndex(e) == selectedItem)
   {
     e.className = 'navIndexSelected';
   }
   else
   {
     e.className = 'navIndex';
   }
   navDvImagePreview.style.display = "none";
   navDvPlayerControls.style.display = "inline";  
}

function onImageIndexClick(elementId)
{
   var e = document.getElementById (elementId);
   selectImage (getIndex (e));
}

function OnClickHome()
{
    window.location.href = "default.aspx";
}

function OnClickUp()
{
    var parentUrl = GetGalleryParentUrl();
    if (parentUrl.indexOf ('default.aspx') < 0)
    {
        window.location.href = 'TravelBlog.htm?tblog=' + parentUrl;
    }
    else
    {
        window.location.href = parentUrl;
    }
}

function OnClickLeftArrow()
{
  if (selectedItem == 0)
  {
    window.location.href = GetGalleryParentUrl();
  }
  else
  {
    selectImage (selectedItem-1);
  }
}

var slideShowOn = false;
var slideShowTimeoutID;

function OnClickPlayPause()
{
  if (slideShowOn)
  {
    navImPlayPause.src = "pixlib/play.gif";
    clearTimeout(slideShowTimeoutID);
    slideShowOn = false;
  }
  else
  {
    navImPlayPause.src = "pixlib/pause.gif";
    advanceSlide();
    slideShowOn = true;
  }
}

function advanceSlide()
{
  if (selectedItem >= GetImageCount()-1)
  {
    // We hit the last slide, abort show
    navImPlayPause.src = "pixlib/play.gif";
    clearTimeout(slideShowTimeoutID);
    slideShowOn = false;
  }
  else
  {
    selectImage (selectedItem+1);
    slideShowTimeoutID = setTimeout ("advanceSlide()", SLIDE_TIMEOUT);
  }
}

function OnClickRightArrow()
{
  if (selectedItem < maxItem)
  {
    selectImage (selectedItem+1);
  }
  else
  {
    window.location.href = GetGalleryParentUrl();
  }
}

/***************************************************************************************
 * Navigation Functions                                                                *
 ***************************************************************************************/

function selectImage (index)
{
   document.getElementById(getId (selectedItem)).className = 'navIndex';
   document.getElementById(getId (index)).className = 'navIndexSelected';
   selectedItem = index;

	var captionHtml = "";
	
/*
   var photoDate = new Date (GetImageAttribute (selectedItem, 'year'),
                             GetImageAttribute (selectedItem, 'month'),
                             GetImageAttribute (selectedItem, 'day'));
   
   var photoCredit = GetImageAttribute (selectedItem, 'byline');
   if (photoCredit != '')
   {
        var bylineTitle = GetImageAttribute (selectedItem, 'bylineTitle');
        if (bylineTitle == "")
        {
            bylineTitle = "Photographer";
        }
        
        photoCredit = bylineTitle + ': ' + photoCredit
                        + '\n';
   }
   
   var photoModel = GetImageAttribute (selectedItem, 'model');
   var photoDetails;
   
   if (photoModel != "")
   {
        photoDetails = photoCredit +
                       photoModel +
                      '\n' +
                      GetImageAttribute (selectedItem, 'exposureMode') + ' exposure (' +
                      GetImageAttribute (selectedItem, 'shutter') + ' sec. @ f' +
                      GetImageAttribute (selectedItem, 'aperture') + ')' +
                      '\nFlash: ' +
                      GetImageAttribute (selectedItem, 'flash')               
                      ;
   }
   else
   {
        photoDetails = photoCredit;
   }
   var photoCopyright = GetImageAttribute (selectedItem, 'copyright');
   var photoTitle = GetImageAttribute (selectedItem, 'title');
   var photoCaption = GetImageAttribute (selectedItem, 'caption') + " " +
                 GetImageCaption (selectedItem);
   var photoStory = GetImageAttribute (selectedItem, 'story');
   
   if (photoTitle == "")
   {
        photoTitle = photoCaption;
        photoCaption = photoStory;
        photoStory = "";
   }
   
   captionHtml = '<span class="captionTitle">' +
                 photoTitle + 
                 '</span><br />' +
                 '<span class="captionCaption">' +
                 photoCaption +
                 '</span><br />' +
                 '<span class="captionStory">' +
                 photoStory +
                 '</span><br />' +
                 '<span class="captionDateTime">' +
                 photoDate.toDateString() +
                 '</span><br />' +
                 '<br /><img src="images/camera.gif" title="' +
                 photoDetails + '" /><br />';
                 
    if (photoCopyright != '')
    {
    captionHtml +=
                 '<span class="captionCopyright">&copy;&nbsp;' +
                 photoCopyright +
                 '</span>';
    }

*/
	   
   width = parseInt (GetImageAttribute (selectedItem, 'width'), 10);
   height = parseInt (GetImageAttribute (selectedItem, 'height'), 10);

   if (mainDvImage.filters)
   {
     mainDvImage.filters.item(0).Apply();
   }
     
   if (width >= height)
   {
     // Display horizontal image
     mainTdImageHorizontal.innerHTML = 
       '<img src="' + channelDirectory + '/' + GetImageAttribute (selectedItem, 'url') + '" ' +
          'height="'+ GetImageAttribute (selectedItem, 'height') + '" ' +
          'width="' + GetImageAttribute (selectedItem, 'width') + '">';
     mainTdCaptionHorizontal.innerHTML = captionHtml;
     mainDvImageHorizontal.style.display = "inline";
     mainDvImageVertical.style.display = "none";
   }
   else
   {
     // Display vertical image
     mainTdImageVertical.innerHTML = 
       '<img src="' + channelDirectory + '/' + GetImageAttribute (selectedItem, 'url') + '" ' +
          'height="'+ GetImageAttribute (selectedItem, 'height') + '" ' +
          'width="' + GetImageAttribute (selectedItem, 'width') + '">';
     mainTdCaptionVertical.innerHTML = captionHtml;
     mainDvImageVertical.style.display = "inline";
     mainDvImageHorizontal.style.display = "none";
   }
   
   if (mainDvImage.filters)
   {
     mainDvImage.filters.item(0).Play();
   }
}

var IMAGE_INDEX_ID_PREFIX = "imageIndex";
function getId (index)
{
  return (IMAGE_INDEX_ID_PREFIX + index);
}

function getIndex (element)
{
   var index = element.id;
   index = parseInt (index.replace ("imageIndex",""), 10);
   return (index);
}

/***************************************************************************************
 * XML Management Functions                                                            *
 ***************************************************************************************/

/* Cross-browser version
*/

var galleryNode;
var imageXmlNodeList;
function LoadXmlDoc (url)
{
  var http_request;
  var imageXmlDocument;
  
  if (window.XMLHttpRequest)
  { 
    // Get XMLHttpRequest object for W3C standard browsers
    // This will include current IE as well as FF etc.
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {
      http_request.overrideMimeType('text/xml');
                // See note below about this line
    }
  }
  else if (window.ActiveXObject) 
  {
    // Get XmlHttpRequest object for older Internet Explorer versions
    try 
    {
      http_request = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
      try
      {
        http_request = new ActiveXObject("Microsoft.XMLHTTP");
      } 
      catch (e) 
      {
        alert ('Sorry, your browser is not able to retrieve the XML for this channel.');
      }
    }
  }

  if (!http_request)
  {
     alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
  }

  http_request.open('GET', url, false);
  http_request.send(null);
  if (http_request.readyState == 4)
  {
    imageXmlDocument = http_request.responseXML;
    galleryNode = imageXmlDocument.getElementsByTagName("gallery").item(0);
    imageXmlNodeList = imageXmlDocument.getElementsByTagName("image");
  }
}

function GetGalleryName ()
{
  return (galleryNode.attributes.getNamedItem ("title").nodeValue);
}

function GetGalleryParentUrl ()
{
  return (galleryNode.attributes.getNamedItem ("parentUrl").nodeValue);
}

function GetImageCount ()
{
  return (imageXmlNodeList.length);
}

function GetImageAttribute (index, attributeName)
{
  var imageNode;
  imageNode = imageXmlNodeList.item(index);
  imageNodeItem = imageNode.attributes.getNamedItem (attributeName);
  return (imageNodeItem.nodeValue);
}

function GetImageCaption (index)
{
  var imageNode;
  imageNode = imageXmlNodeList.item(index);
  var caption = "";
  if (imageNode.hasChildNodes())
  {
    for (var j=0; j<imageNode.childNodes.length; j++)
    {
      caption += imageNode.childNodes[j].data;
    }
  }
  return (caption);
}