var relatedContentObj = new Object();
var objIds = new Array();
var currentIndex = 0;
var vPath = 'http://newsroom.cisco.com/dlls/video_audio_archive/images/'

function videoSyndication () {
 //default values
 this.dateFormat = null;
 this.showVideoArea = videoArea;
}

// Get the ids in the object. This provides us with both a total count and a variable to manipulate the object
function getIds () {
  if (objIds.length == 0) { // Extra precaution not to append to the objIds array if it was already populated
    for (i in relatedContentObj) {
      objIds.push(i);
    }
  }
  
  return objIds;
}

// Split Title, SubTitle and Thumb URL that were separated by !? and add the two first values of the obj also to a single array
// that will be manipulated by the calling functions
function breakVals (index) {
  var ids;

// Only call getIds once otherwise it will keep on adding up to the objIds array
  if (index == null) {
    var ids = getIds();
	index = 0;
  } else { 
    ids = objIds;
  }
  
  var splitInfo = relatedContentObj[ids[index]][2].split('||');
  var date = relatedContentObj[ids[index]][0].replace(new RegExp(/\s+/),""); // Remove spaces from the date
  splitInfo.push(date);
  splitInfo.push(relatedContentObj[ids[index]][1]);
  
  return splitInfo;
}

function videoArea (pos) {
  if (pos == null) {
    pos = 0;
  }

  var intro = '<div class="content-region-right-header"> <h6 class="alt-1">FEATURED VIDEOS</h6>';
  var values = breakVals();

  var curPage = pos + 1; 
  
// Now finish populating the video area
  var thumb = '<img id="fvThumb" src="'+vPath+values[2]+'" alt="Video: '+values[0]+'" width="195" height="146" border="0" />';
  var navigation = '<div id="featVideo"><h6> <span style="margin-right:12px"><a href="javascript:increment(-1)"><img src="'+vPath+'button_video_rew_17x16.gif" name="button_rew" alt="Previous" width="17" height="16" align="absbottom" /></a> (<span id="fvIndex">'+curPage+'</span> of '+objIds.length+') <a href="javascript:increment(1)"><img src="'+vPath+'button_video_ff_17x16.gif" name="button_ff" alt="Next" width="17" height="16" align="absbottom" /></a></span>';
  var url = '<a href="'+values[4]+'" id="fvPlay" name="Play Video" title="Play Video" target="_blank"><img src="'+vPath+'button_video_play_17x16.gif" name="button_play" alt="Play Video" width="17" height="16" align="absbottom" /></a> PLAY VIDEO</h6>';
  var title = '<div class="item"><h2 id="fvTitle">'+values[0]+'</h2>';
  var subTitle = '<h5 id="fvSubTitle">'+values[1]+'</h5>';
  var date = '<h5 id="fvDate">'+values[3]+'</h5>';
  var end = '</div> <!-- item --></div> <!-- featVideo --></div> <!-- content-region-right-header -->';
	
  return intro + thumb + navigation + url + title + subTitle + date + end;
}

function increment (steps) {
  if ((currentIndex + steps) < 0) {
    currentIndex = objIds.length + steps;
  } else if ((currentIndex + steps) >= objIds.length) {
    currentIndex = steps-1;
  } else {
	currentIndex = currentIndex + steps;
  }
  
  var values = breakVals(currentIndex);

  writeToObj('fvTitle', values[0] );
  writeToObj('fvSubTitle', values[1]);
  writeToObj('fvDate', values[3]);
  writeToObj('fvIndex', currentIndex+1);

  var hrefObj = getObject('fvPlay');
  hrefObj.href = values[4];
  
  var ImageObj = getObject('fvThumb');
  ImageObj.src = vPath+values[2];
}

function writeToObj (objName, theText) {
  var theObj = getObject(objName); 
  if (theObj != null && theObj.innerHTML != null) {
    theObj.innerHTML = theText;
  }
}
function getObject (objName) {
    if (document.all) {return document.all[objName];}
    else if (document.layers && document.layers[objName] != null) {
      return document.layers[objName];
    }
    else {return document.getElementById(objName);}
}