var camSwap;
var imagepath = "/santaclara/images/";
var divW = 0, divH = 0;
var lastTipName;
var mobileImages;

var ns = 0;
var ie = 0;

function init() {  

  // preload the camera and un-camera images (make a swap array)
  camSwap = new Array();
  
  // find all images that are named form element names
  mobileImages = new Array();
  
  for ( var i = 0; i < document.forms.cameras.elements.length; i++ ) {
    for ( var j = 0; j < document.images.length; j++ ) {
      if ( document.forms.cameras.elements[i].name == document.images[j].name 
           && document.images[j].name.length > 0 ) {
        mobileImages[ mobileImages.length ] = document.images[j];
      }
    }
  }
  
  // mobileImages now contains all the images to place.
  
  // the swappable images are the same in number as the form images
  camSwap.length = mobileImages.length;
  
  if ( mobileImages.length <= 0 ) {
    return;
  }

  // position the intersection images
  for ( var i = 0; i < document.images.length; i++ ) {
    if ( document.images[i].className == 'intericon' ) {
      var pos = parseInt(document.images[i].style.top)
      document.images[i].style.top = (pos + document.images['main'].offsetTop) + 'px';
      
      pos = parseInt(document.images[i].style.left)
      document.images[i].style.left = (pos + document.images['main'].offsetLeft) + 'px';
      
      document.images[i].style.visibility = 'visible';
    }
  }

  // create the swap images (swap between camera/no camera)
  for ( var i = 0; i < mobileImages.length; i++ ) {
    // create a new swap image
    camSwap[i] = new Image();
    camSwap[i].src = imagepath + 'nocamera.png';
    camSwap[i].name = mobileImages[i].name;
  }
      
  var tmpImage = new Image();
  
  // toggle off the images that are checked off
  for ( var i = 0; i < mobileImages.length; i++ ) {
    if ( document.forms.cameras[mobileImages[i].name] ) {
      if ( !document.forms.cameras[mobileImages[i].name].checked ) {
        tmpImage.src = mobileImages[i].src;
      
        mobileImages[i].src = camSwap[i].src;
        
        camSwap[i].src = tmpImage.src;
      }
    }
  }
}
  
function toggle( event, camName ) {
  var element;
  var tmpImage = new Image();
  
  if ( event.target ) {
    element = event.target;
  }
  else if ( event.srcElement ) {
    element = event.srcElement;
  }

  if ( event.type == 'click' ) {
    document.forms.cameras[camName].checked = !document.forms.cameras[camName].checked;
  }

  if ( element ) {
    for ( var i = 0; i < camSwap.length; i++ ) {
      if ( camSwap[i].name == camName ) {
        tmpImage.src = document.images[camName].src;
        
        document.images[camName].src = camSwap[i].src;
        
        camSwap[i].src = tmpImage.src;
      }
    }
  }
  
  return false;
}

/*                                         */
/* A tooltip-type layer for stacked items. */
/*                                         */
/*                                         */
var closeCTRL = "<div id=\"closetip\"><a id=\"closeanchor\" href=\"#\" onclick=\"return closeTip(event);\">[ X ]</a></div>";

function showToolTip( event, name /*, route */ ) {
  var tip = getElement('tooltip');
  lastTipName = name;
  var content = getElement(lastTipName);  
  var ns = 0, ie = 0;
 
  if ( tip != null ) {
    var alertMsg = '';
    
    if ( defined(window.scrollY) && 
         defined(window.innerHeight) && 
         defined(window.innerWidth) ) {
      ns = 1;
    }
    else if ( defined(document.body.scrollTop) && 
              defined(document.body.clientWidth) && 
              defined(document.body.clientHeight) ) {
      ie = 1;
    }
    
    tip.style.left = (event.clientX + 15) + 'px';
    if ( ns == 1 ) {
      // mozilla/ns
      tip.style.top = event.clientY + window.scrollY + 'px';
    }
    else if ( ie == 1 ) {
      // ie
      tip.style.top = event.clientY + document.body.scrollTop + 'px';
    }
    else {
      // no client bounds correction
      tip.style.top = event.clientY + 'px';
    }
    
    tip.innerHTML = '';

    while ( content.childNodes.length > 0 ) {
      var child = content.childNodes[0];
      
      // remove the child from the content branch
      content.removeChild( child );

      // ie needs the child to be appended, or else the size will be zero
      if ( ie == 1 ) {
        // add the child to the tooltip
        tip.appendChild( child );
      }
      
      if ( child.style ) {
        divH = 0, divW = 0;
        
        var w = parseInt(child.width);
        divW = ( divW < w ) ? w : divW;
        var h = parseInt(child.height);
        divH = ( divH < h ) ? h : divH;
        
        if ( ns == 1 ) {
          if ( (event.clientX + 15 + divW) > window.innerWidth ) {
            tip.style.left = event.clientX - divW - 15 + 'px';
          }
          
          if ( (event.clientY + divH) > window.innerHeight ) {
            tip.style.top = event.clientY + window.scrollY - divH + 'px';
          }
        }
        else if ( ie == 1 ) {
          if ( (event.clientX + 15 + divW) > document.body.clientWidth ) {
            tip.style.left = event.clientX - divW - 15 + 'px';
          }
          
          if ( (event.clientY + divH) > document.body.clientHeight) {
            tip.style.top = event.clientY + document.body.scrollTop - divH + 'px';
          }
        }
       
        // ns/moz needs to add the element back to the DOM tree 
        if ( ns == 1 ) {
          // add the child to the tooltip
          tip.appendChild( child );
        }

        if ( child.nodeName == 'A' ) {
          child.childNodes[0].style.visibility = 'visible';
        }
        else {
          child.style.visibility = 'visible';
          child.style.left = '0px';
        }
      }
    }

    tip.style.visibility = 'visible';
    tip.style.width = divW + 'px';
    tip.style.height = divH + 'px';
        
    if ( mobileImages && mobileImages.length > 0 ) {
      positionCameraIcons();
    }
  }
  
  return false;
}

function positionCameraIcons() {
  for ( var i = 0; i < mobileImages.length; i++ ) {
    var intericon = mobileImages[i].parentNode.childNodes[0];
  
    var pos = parseInt(mobileImages[i].style.top);
  
    if (pos + intericon.offsetTop < divH) {
      // adjust the position of the camera image on the base image
      mobileImages[i].style.top = (pos + intericon.offsetTop) + 'px';
    }
  
    //window.alert( 'top, left: ' + pos + ', ' + parseInt(mobileImages[i].style.left) );
    pos = parseInt(mobileImages[i].style.left);
  
    if (pos + intericon.offsetLeft < divW) {
      
      mobileImages[i].style.left = (pos + intericon.offsetLeft) + 'px';
    }
  }
}

function closeTip( event ) {
  var tip = getElement('tooltip');
  var content = getElement(lastTipName);  
  
  if ( tip != null ) {
    if ( content != null ) {
      while ( tip.childNodes.length > 0 ) {
        var child = tip.childNodes[0];
        
        // remove the child from the content branch
        tip.removeChild( child );
        
        if ( child.nodeName == 'A' ) {
          child.childNodes[0].style.visibility = 'hidden';
        }
        else if ( child.style ) {
          child.style.visibility = 'hidden';
        }
        
        // add the child to the content (hidden)
        content.appendChild( child );
      }
    }
    
    tip.pageX = 0;
    tip.pageY = 0;
    tip.style.visibility = 'hidden';
  }
  
  return false;
}

function getElement( name ) {
  if ( document.getElementById ) {
    var element = document.getElementById( name );

    // yes, ie is THAT stupid
    if ( name && element.id != name ) {
      var elements = document.getElementsByName( name );

      var i = 0;
      while( i < elements.length ) {
        if ( elements[i].id == name ) {
          element = elements[i];
          break;
        }
        i++;
      }
    }

    return element;
  }
  else if ( document.all ) {
    return document.all[name];
  }
  else if ( document.layers ) {
    return document.layers[name];
  }
  else {
    return null;
  }
}

function enumerateProperties ( obj ) {
  var theProperties = "";
  var count = 0;

  for ( var property in obj ) {
    theProperties += property;

    if ( Math.round( count/5 ) == (count/5) ) {
      theProperties += ",\n";
    }
    else {
      theProperties += ",";
    }

    count += 1;
  }

  return theProperties;
}

function displayWindow( name, route, host, fancy ){
  //name, route, fancy
  var h=465
  var w=580
  // var w=420
  // var h=335
  var URL='http://'+host+'/santaclara/Traffic.shtml?name='+name+'&route='+route+'&host='+host+'&fancy='+fancy;
  return openWin2(URL,'SCCVideo',w,h)
}

function openWin( URL, Name, w , h ) {
  windowFeatures="width=" + w + ",height=" + h + ",resizable=1,scrollbars=1";
  window.open( URL, Name, windowFeatures ) ;
  
  return false;
}

function openWin2( URL, Name, w , h ) {
  windowFeatures="width=" + w + ",height=" + h + ",resizable=1,scrollbars=1";
  window.open( URL, Name, windowFeatures ) ;
  //  window.parent.close();
  
  return false;
}

function composite() {
  document.forms.cameras['mode'].value = 'composite';
  document.forms.cameras.submit();
}

function defined (x) {
  return typeof(x) != 'undefined';
}