// JavaScript Document

var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject()
{
	 // will store the reference to the XMLHttpRequest object
  var xmlHttp;
  // create the XMLHttpRequest object
  try
  {
    // assume IE7 or newer or other modern browsers
    xmlHttp = new XMLHttpRequest();
  }
  catch(e)
  {
    // assume IE6 or older
    try
    {
      xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
    }
    catch(e) { }
  }
  // return the created object or display an error message
  if (!xmlHttp)
    alert("Error creating the XMLHttpRequest object.");
  else 
    return xmlHttp;
}



function loadSpokespersons()
{
	
	if (xmlHttp)
	{
		try
		{
		  xmlHttp.open("GET", "php/get_spokesperson_data.php", true);
		  xmlHttp.onreadystatechange = handleRequestStateChange;
		  xmlHttp.send(null);
		}
		catch(e)
		{
			alert('Something went wrong');
		}
	}
}
// function called when the state of the HTTP request changes
function handleRequestStateChange() 
{
	if (window.console)console.log(xmlHttp.readyState);
	
	
	
  // when readyState is 4, we can read the server response
  if (xmlHttp.readyState == 4) 
  {
    // continue only if HTTP status is "OK"
    if (xmlHttp.status == 200) 
    {
      try
      {
        // do something with the response from the server
        handleServerResponse();
      }
      catch(e)
      {
        // display error message
        alert("Error reading the response: " + e.toString());
      }
    } 
    else
    {
      // display status message
      alert("There was a problem retrieving the data:\n" + 
            xmlHttp.statusText);
    }
  }
}
// handles the response received from the server
function handleServerResponse()
{
  // read the message from the server
  responseJSON = JSON.parse(xmlHttp.responseText);
  
   //myDiv2 = document.getElementById("myDivJSON");
   //myDiv2.innerHTML = "<pre>" + xmlHttp.responseText  + "</pre>";
  // generate HTML output
  var colsPerRow = responseJSON.configuration.cols;
  var thumbNailFolderPath = responseJSON.configuration.thumb_nails.folder_path;
  var thumbNailWidth = responseJSON.configuration.thumb_nails.width;
  var thumbNailHeight = responseJSON.configuration.thumb_nails.height;
  var colsPerRowCount = 0;
  var rowCount = 0;
  var html = '';  
  html += '<table style = "border-collapse: collapse;margin:auto;">';  
  if (window.console) console.log (responseJSON.spokespersons.spokesperson.length) ;
  // iterate through the arrays and create an HTML structure
  for (var i = 0; i < responseJSON.spokespersons.spokesperson.length; i++)
  {
	  
	  if (colsPerRowCount == colsPerRow)
	  {
		  colsPerRowCount = 0;
		   html+="</tr>\n<tr>";
		  rowCount++;
	  }
	  

	 
	 

/*	  html += "<td>" + responseJSON.spokespersons.spokesperson[i].label + "</td>";
	  html += "<td>" + responseJSON.spokespersons.spokesperson[i].vimeo_id + "</td>";
	  html += "<td>" + responseJSON.spokespersons.spokesperson[i].thumb_nail_file + "</td>";
*/		
//<a  class="vimeo_test4" href="http://vimeo.com/15299399&autoplay=true&wmode=transparent&fullscreen=1" title="Test"><img width="160" height="128" border = "0" alt="Joe" src="../../contentAdzzoo/assets/template/photos/Joe_Assante.png"></a> 
//<a title="Test" href="http://vimeo.com/14655376&amp;autoplay=true&amp;wmode=transparent&amp;fullscreen=1" class="vimeo_test4"><img width="160" height="128" border="0" src="../../contentAdzzoo/assets/template/photos/shannon.png" alt="Shannon"></a>
//<a title="Test" href="http://vimeo.com/14655376&amp;autoplay=true&amp;wmode=transparent&amp;fullscreen=1" class="vimeo_test4"><img width="160" height="128" border="0" src="../../contentAdzzoo/assets/template/photos/shannon.png" alt="Joe"></a>

		html += '<td style = "padding:0px;">' 
		if (rowCount == 0)
		{
			if (colsPerRowCount == 0)
			{
				html += '<div style = "font-family: Arial,Tahoma,Verdana,sans-serif;font-size: 11px;line-height: normal;color: #0A6B01;font-weight: bold;text-align:center;border:solid #000 1px;">'
			}
			else
			{
				html += '<div style = "font-family: Arial,Tahoma,Verdana,sans-serif;font-size: 11px;line-height: normal;color: #0A6B01;font-weight: bold;text-align:center;border-top:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;">'
			}
		}
		else
		{
			if (colsPerRowCount == 0)
			{
				html += '<div style = "font-family: Arial,Tahoma,Verdana,sans-serif;font-size: 11px;line-height: normal;color: #0A6B01;font-weight: bold;text-align:center;border-left:solid #000 1px;border-right:solid #000 1px;border-bottom:solid #000 1px;">'
			}
			else
			{
				html += '<div style = "font-family: Arial,Tahoma,Verdana,sans-serif;font-size: 11px;line-height: normal;color: #0A6B01;font-weight: bold;text-align:center;border-right:solid #000 1px;border-bottom:solid #000 1px;">'
			}
		}
	 
	 
	 	colsPerRowCount++;
	
		html += ''
			+ '<a  class="vimeo_test4" href="http://vimeo.com/'
			+ responseJSON.spokespersons.spokesperson[i].vimeo_id
			+ '&amp;autoplay=true&amp;wmode=transparent&amp;fullscreen=1&amp;title=true" ' 
			+ 'title="'
			+ responseJSON.spokespersons.spokesperson[i].name + ", " + responseJSON.spokespersons.spokesperson[i].title
			+ '">' 
			+ '<img width="' + thumbNailWidth + '" height="' + thumbNailHeight + '" border = "0" alt="'
			+ responseJSON.spokespersons.spokesperson[i].label
			+ '" src="'
			+ thumbNailFolderPath 
			+ responseJSON.spokespersons.spokesperson[i].thumb_nail_file 
			+ '" />'
			+ '</a>';
		html += '<p>' 
		html += responseJSON.spokespersons.spokesperson[i].name; 
		html += '</p>' 
		html += '</div>' 
		html += '</td>' 
  }
  html += '</tr></table>';
  
   
   
  // obtain a reference to the <div> element on the page
  myDiv = document.getElementById("spokesperson_div");

  // display the HTML output
  myDiv.innerHTML = html;
  		var fb_opts = {
			'padding'		: 0,
			//'cyclic'        : true,
			'centerOnScroll': true,
			//'speedIn'		: 1000,
			'autoScale'		: false,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic',
			'width'			: responseJSON.configuration.vimeo.width ,
			'height'		: responseJSON.configuration.vimeo.height,
			'type'			: 'swf',
			'overlayShow'	: true,
			'showNavArrows' : false,
			'titleShow' 	: true,
			'autoDimensions': true,
			'titlePosition' : 'inside',
			'titleFormat'	: formatTitle,
			'swf'           : {
				'wmode'				: 'transparent',
				'allowfullscreen'	: 'true'
			}
		};

			$(".vimeo_test4").click(function() {
				$.fancybox(
					//$.extend(fb_opts, {'href' : 'http://vimeo.com/moogaloop.swf?clip_id=15299224&fullscreen=1&autoplay=true&wmode=transparent&title=true'})
					$.extend(fb_opts, {
							 'title'			: this.title,
						 'href' : this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1')
					 	
					})
			);
										 
			return false;
		});


}
  function formatTitle(title, currentArray, currentIndex, currentOpts)
  {
	  if (window.console)console.log('[ ' + title  + ' ]');
		return   '<div style = "background-color:#000;"><span style = "font-family: Arial,Tahoma,Verdana,sans-serif;font-size: 24px;line-height: normal;color: #0A6B01;font-weight: bold;">' 
				+  title 
				+ '</span></div>';
  }