//
//  DHTML functions
//
//  Clio Soleil (clio@PrettyGetter.TV)
//  PrettyGetter Productions (http://PrettyGetter.TV)
//  

//--------------------------------------------------------------------------------------------------------------------------------------------
// clears a text field if the value in it is = dummy (useful for clearing self-descriptive text fields)
function clearText(textInput, dummy)
//--------------------------------------------------------------------------------------------------------------------------------------------
{
  t = document.getElementById(textInput);
  if (t && t.value == dummy)
    t.value="";
}


//--------------------------------------------------------------------------------------------------------------------------------------------
// fix for IE not implementing getElementsByName like everyone else
// assuming the name is correct, IE won't work for getting elements by name if the element in question isn't one of:
// A, APPLET, BUTTON, FORM, FRAME, IFRAME, IMG, INPUT, OBJECT, MAP, META, PARAM, TEXTAREA or SELECT
function _getElementsByName(name, tag)
//--------------------------------------------------------------------------------------------------------------------------------------------
{
  e = document.getElementsByName(name);      // get a list of elements with the name of div
  if ((e.length == 0) && (tag !=undefined))  // if no values returned, element name might not exist
  {
    // or we just might be in IE... go through the DOM elements by tag name and gets the element(s) that way.
    e = new Array();
    elem = document.getElementsByTagName(tag);
    for (i = 0; i < elem.length; i++) 
      if (elem[i].getAttribute("name") == name) 
        e.push(elem[i]);
  }
  return e;
}

//--------------------------------------------------------------------------------------------------------------------------------------------
// ways to call:
// To get all a elements in the document with a “info-links” class.
//    getElementsByClassName(document, "a", "info-links");
// To get all div elements within the element named “container”, with a “col” class.
//    getElementsByClassName(document.getElementById("container"), "div", "col"); 
// To get all elements within in the document with a “click-me” class.
//    getElementsByClassName(document, "*", "click-me"); 
function getElementsByClassName(className, tag, elm){
//--------------------------------------------------------------------------------------------------------------------------------------------
	var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
	var tag = tag || "*";
	var elm = elm || document;
	var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
	var returnElements = [];
	var current;
	var length = elements.length;
	for(var i=0; i<length; i++){
		current = elements[i];
		if(testClass.test(current.className)){
			returnElements.push(current);
		}
	}
	return returnElements;
}


//--------------------------------------------------------------------------------------------------------------------------------------------
// toggles the display of an element
function toggleDisplayByID(divName)
//--------------------------------------------------------------------------------------------------------------------------------------------
{
  // get the named div's DOM object and toggle the classname
  div = document.getElementById(divName);
  div.style.display = (div.style.display == "") ? "none" : "";
}

//--------------------------------------------------------------------------------------------------------------------------------------------
// toggles the CSS classname of a element between the two specified classes
function toggleClassByID(divName, class1, class2)
//--------------------------------------------------------------------------------------------------------------------------------------------
{
  // get the named div's DOM object and toggle the classname
  div = document.getElementById(divName);
  div.className = (div.className == class1) ? class2 : class1;
}

//--------------------------------------------------------------------------------------------------------------------------------------------
// toggles the CSS classname of an element between the two specified classes
function toggleClassByName(divName, class1, class2)
//--------------------------------------------------------------------------------------------------------------------------------------------
{
  // toggle the classname of all DIVs that match the divName
  divs = document.getElementsByName(divName);
  for (i = 0; i < divs.length; i++)
    divs[i].className = (divs[i].className == class1) ? class2 : class1;
}

//--------------------------------------------------------------------------------------------------------------------------------------------
// returns the size of the browser window (works in all browsers)
function getBrowserSize() 
//--------------------------------------------------------------------------------------------------------------------------------------------
{
  var width = 0, height = 0;
  
  if (typeof(window.innerWidth) == 'number') 
  {
    //Non-IE
    width = window.innerWidth;
    height = window.innerHeight;
  } 
  else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) 
  {
    //IE 6+ in 'standards compliant mode'
    width = document.documentElement.clientWidth;
    height = document.documentElement.clientHeight;
  } 
  else if (document.body && (document.body.clientWidth || document.body.clientHeight)) 
  {
    //IE 4 compatible
    width = document.body.clientWidth;
    height = document.body.clientHeight;
  }
  
  object = new Object();
  object.width = width;
  object.height = height;
  return object;
}


//--------------------------------------------------------------------------------------------------------------------------------------------
//  Toggles an image
function toggleImage(div, img1, img2)
//--------------------------------------------------------------------------------------------------------------------------------------------
{ 
  // if there's an element with the given name
  if (e = document.getElementById(div))
  {
    // toggle its display
    if (e.src.match(img1))
      e.src = img2;
    else
      e.src = img1;
  }
}

//--------------------------------------------------------------------------------------------------------------------------------------------
//  Toggles an image that has a hover behavior specified in its containing anchor.  
// NOT FINISHED... TODO:
// 1) determine which image to subts for
// 2) copy code from createJSButton in HTML.php
function toggleHoverImage(div, url, button, img1, hoverImg1, img2, hoverImg2, spacing, atags, itags)
//--------------------------------------------------------------------------------------------------------------------------------------------
{ 
  if (!spacing) spacing = "";
  if (!atags) atags = "";
  if (!itags) itags = "";

  // if there's an element with the give name
  if (e = document.getElementById(div))
  {
    // toggle its display
    if (e.src.match(img1))
      e.src = img2;
    else
      e.src = img1;
  }
}

//--------------------------------------------------------------------------------------------------------------------------------------------
// replaces the contents of a div with a Video (Flash?) applet that plays a video clip, if specified
function writeVideoOBJ(divID, url)
//--------------------------------------------------------------------------------------------------------------------------------------------
{
  document.getElementById(divID).innerHTML = "<IMG style='width:100%;height:100%' src='" + url + "'>";
}

//--------------------------------------------------------------------------------------------------------------------------------------------
// writes out code to display an Axis camera stream
function showAxisCamera(host, url) 
//--------------------------------------------------------------------------------------------------------------------------------------------
{
  var output = "<DIV style='width:100%;height:100%'>";

  // If Internet Explorer under Windows then use ActiveX 
  if ((navigator.appName == "Microsoft Internet Explorer") && 
     (navigator.platform != "MacPPC") && (navigator.platform != "Mac68k"))
  {
    output =  '<OBJECT ID="Player" width=100% height=100%'
    output += ' CLASSID="CLSID:745395C8-D0E1-4227-8586-624CA9A10A8D" ';
    output += 'CODEBASE="' + host + '/activex/AMC.cab#version=3,12,3,5">';
    output += '<PARAM NAME="MediaURL" VALUE="' + url + '">';
    output += '<param name="MediaType" value="mjpeg-unicast">';
    output += '<param name="ShowStatusBar" value="0">';
    output += '<param name="ShowToolbar" value="0">';
    output += '<param name="AutoStart" value="1">';
    output += '<param name="StretchToFit" value="1">';
    //  output += '<param name="PTZControlURL" value="/axis-cgi/com/ptz.cgi?camera=1">';
    //  output += '<param name="UIMode" value="ptz-relative">'; // or "ptz-absolute"
    output += '<BR><B>Axis Media Control</B><BR>';
    output += 'The AXIS Media Control, which enables you ';
    output += 'to view live image streams in Microsoft Internet';
    output += ' Explorer, could not be registered on your computer.';
    output += '<BR></OBJECT>';
  } 
  // If not IE for Windows use the browser itself to display
  else 
  {
    theDate = new Date();
    output = '<IMG width=100% height=100% SRC="' + url + '&dummy=' + theDate.getTime().toString(10) + '" ALT="Camera Image">';
  }
  output += "</DIV>";
  document.write(output);

  // configure the activeX player
  if (document.Player) 
    document.Player.ToolbarConfiguration = "play,+snapshot,+fullscreen";
}