var vidWidth;           // Holds the width of the video playing parsed into an int.
  var vidHeight;          // Holds the height of the video playing parsed into an int.
  var timer               // Used to call the movevideo() function which ensures a playing video remains in a constant
                          // position on the screen whilst the user is scrolling the page.
  var showElements        // Used to control the interval between closing the video player and the images re-appearing
                          // used to fix a problem in firefox with page crashes.
  var selects;            // Used to store a list of all the pages select elements in the DOM
                          // this is because they need to be set to invisible before applying the transparent layer
                          // to avoid them showing through in IE.
  var embeds;             // Used to store a list of all the pages embed elements in the DOM
  var footerHeight        // Holds the position relative to the top of the screen that the footer should take below the
                          // video player. Only used in Firefox - has to be outside the Iframe to maintain a correct path
                          // as Iframe is using about:blank as source so as not to effect web monitoring.
                          
                          // bear in mind the the script is significantly different between firefox and IE this is because
                          // of a strange .dll error in firefox when using the original implementation on sites
                          // large (massive) amounts of existing script, as such the Firefox version now uses an iFrame
                          // to seperate the player from the original document. The title bar and footer are still page elements
                          // though to allow them access to the pages domain path (for loading images) and to access the pages
                          // javascript.
                          
  
  var firefox = (document.getElementById&&!document.all);

  function showInteractive(videoFile,title, w, h){
  
    var videoObject = '<iframe id="mediaPlayer" src="' + videoFile + '" width="' + w + '" height="'+ h +'" frameborder="0"></iframe><div id="videoplayer"></div>'

     //alert(videoObject);

    var player = document.getElementById("videoplayer");
    
    if(!firefox) {                // adjudst for IE/firefox measuring differences
      vidWidth = vidWidth + 10;
    }
    
    vidWidth = parseInt(w);       // convert string to int
    vidHeight = parseInt(h);
    height = h;
           
    player.style.width = vidWidth + 20;

    setBackGround();
        
    document.getElementById("videoarea").innerHTML = videoObject;
    
    selects = document.getElementsByTagName('select');    // create array of all selects (as they always render on top in IE)
    embeds = document.getElementsByTagName('object');     // create array of all objects (for tricky flash elements)
    
            // iterate through selects and objects and remove from page to stop from showing through the transparent layer
    
    for (x=0; x<selects.length; x++) {
      selects[x].style.visibility = "hidden";
    }
    
    for (x=0; x<embeds.length; x++) {
      embeds[x].style.visibility = "hidden";
    }
    
            // make the video player visible again!
        
    document.getElementById('mediaPlayer').style.visibility = "visible";
    
    if(w < 760 && h < 414) {	

      centerInteractive();
      moveInteractive();
    }                
 
    if(w >= 760 || h >= 414) {     
		  window.scrollTo(0,0);
   	}
   	
       

    if(firefox) {
    
      document.getElementById("titletextFF").innerHTML = title;

      document.getElementById('titlebarFF').style.width = vidWidth + 20;
      document.getElementById('footerFF').style.width = vidWidth + 20;
      document.getElementById('vidiframe').style.width = vidWidth + 30;    
      document.getElementById('vidiframe').style.height = vidHeight+100;
      
      footerHeight = vidHeight + 16 + 75;     
      document.getElementById('footerFF').style.top = footerHeight;             
      document.getElementById('titlebarFF').style.top = 50;
      document.getElementById('vidiframe').style.top = 66;
              // lochost needed as new window needs to be opened with src="about:blank" so as to avoid double page hits in reporting
              // this means page has no root domain and as such needs path given to it to be able to link to css relatively
      
      var lochost = 'http://' + location.host + '/_tech_includes/videoplayer/css/videostyle.css';    
    
      ihtml="<html><head><link href='"+lochost+"' rel='stylesheet' type='text/css'></head><body style='margin:0;'>"+document.getElementById("zzplayer").innerHTML;+"</body></html>";
      window.frames["vidiframe"].document.body.innerHTML=ihtml;
      window.frames["vidiframe"].document.getElementById('videoplayer').style.display = 'block';
      document.getElementById('titlebarFF').style.display = 'block';
      document.getElementById('footerFF').style.display = 'block';
      document.getElementById('vidiframe').style.display='block'

      
    } else {
      document.getElementById("titletextIE").innerHTML = title;
      player.style.display = "block";
      document.getElementById('footerIE').style.display = 'block';
      document.getElementById('titlebarIE').style.display = 'block';
      document.getElementById('titlebarIE').style.width = vidWidth + 20;
    }
         

    try {
      window.frames['videoholder'].document.getElementById("mediaPlayer").src = videoFile;
    }
    catch(e){}
    

  }
       
   
	
  function hidePlayer() {     
    clearTimeout(timer);
    showElements = setTimeout('showHiddenElements()', 100);
    document.getElementById('videobackground').style.display = 'none';
    
    
    if (firefox) {
      document.getElementById('vidiframe').style.display='none';
      document.getElementById('titlebarFF').style.display = 'none';
      document.getElementById('footerFF').style.display = 'none';
    } else {
      document.getElementById('videoplayer').style.display='none';      
    }       
  } 
   
  function showHiddenElements () {
  
    for (x=0; x<selects.length; x++) {
      selects[x].style.visibility = "visible";
    }
    
    for (x=0; x<embeds.length; x++) {
      embeds[x].style.visibility = "visible";
    }
  
  }
  
  function setBackGround () {
    var background = document.getElementById('videobackground');
    background.style.display = "block";
    background.style.height = document.body.clientHeight+1000;      // big value (can be changed if needed; page cannot simply be 100% as this only renders
  }                                                                 // viewable portion. cannot use document length as IE/Firefox handle differntly
  
  function centerInteractive() {
     
    var browserX = document.body.clientWidth;
    var browserY = document.body.clientHeight;
    
    leftResult = (850-vidWidth-20)/2;
    
    if(firefox) {
      document.getElementById('titlebarFF').style.left = leftResult;
      document.getElementById('titlebarFF').style.top = 50;
      
      document.getElementById('vidiframe').style.left = leftResult;
      document.getElementById('vidiframe').style.top = 66;
      
      document.getElementById('footerFF').style.left = leftResult;
      document.getElementById('footerFF').style.top = footerHeight;
      
    } else {
      document.getElementById('videoplayer').style.left = leftResult;
      document.getElementById('videoplayer').style.top = 50;
    }

  }
  
  function moveInteractive()
  {
    var pos;
    if (window.innerHeight)
    {
      pos = window.pageYOffset
    }
    else if (document.documentElement && document.documentElement.scrollTop)
    {
      pos = document.documentElement.scrollTop
    }
    else if (document.body)
    {
      pos = document.body.scrollTop
    }
    
    if(firefox) {
      document.getElementById('titlebarFF').style.top = pos+50;
      document.getElementById('vidiframe').style.top = pos+66;    
      document.getElementById('footerFF').style.top = pos+footerHeight;
    } else {
      document.getElementById('videoplayer').style.top = pos+50;
    }
    


    timer = setTimeout('movevideo()',50);
    
  }