//  Scripts for SyPort site

//  Note the directory for "style-related" things
//
var styledir = "/styles/syportweb/";

//  note whether client is Netscape, else hopefully it's IE
//  (if not, we'll be messed up probably)
//  In fact, if it's NN, we'll still be sort of messed up!!!!
var isNN4 = false;
var isNN5 = false;
var ver = parseInt(navigator.appVersion);
if ( navigator.appName.indexOf("Netscape") >= 0 ) {
	isNN4 = true;
	if ( ver >= 5 ) {
		isNN5 = true;
		isNN4 = false;
	}
} else {
	if ( navigator.appName.indexOf("Microsoft") < 0 ) {
		document.location = "unsupported.html";
	}
}
//  make sure we have a browser with style/DOM support, else
//  fall back to a warning page
var isV4 = ( parseInt(navigator.appVersion) >= 4 ) ? true : false;
if ( ! isV4 ) {
	document.location = "unsupported.html";
}



//  ---------------------------------------------------------------------
//  Next few methods are intended to be invoked by "users" (specific
//  web-pages), to create the "standard" look without too much fuss.
//  ---------------------------------------------------------------------

function header() {
    writeHeader( "header-700x180.jpg", 700, 180, 280, 20 );
    writeNavMenu();
    //  move the body past the "header" positionable container
    //  ("165" seems to make it so the top-most thing in the content
    //  will not be obscured by the header - why it doesn't need to be
    //  "180" may well be browser dependent!)
    document.write( "<img src='/images/pixel.gif' height=165 width=1>" );
    /*********  remainder used to put the arguments onto the page,
    		but isn't that useful, so has been disabled, but
		retained here for reference.
    if ( arguments.length < 1 )  return;
    for ( var i=0; i < arguments.length; i++ ) {
    	if ( i > 1 )  break;
    	( i == 0 )	? document.write("<br>")
    			: document.write("&nbsp; :&nbsp; ");
    	document.write( "<span class='title" + (i+1) + "'> " );
    	document.write( arguments[i] + "</span>" );
    }
    document.write( "<br>&nbsp;\n" );
    ***********************************************************/
}

function footer() {
    var line = "&#151;&#151;&#151;&#151;";
    document.write( "<div class='footer'> " );
    document.write( line+" Copyright 2007, 2008 &#150 SyPort Systems, Inc. "
    								+line );
    document.write( "</div>");
}

function leftHeadline( title, pad, image, w, h ) {
    //  we're going to add "hspace" and "vspace" to the image (if any)
    //  which will make it appear low by that amount, so increase the
    //  pad accordingly
    var space = 12;
    if ( arguments.length > 2 ) pad += space;
    //  write the headline and it's shadow into overlay layers
    document.write( "<div class='overlay'><img src='/images/pixel.gif' "
					+ "width=0 height="+(pad+2)+">" );
    document.write("<div class='headline' align='left' style='color:white;'>");
    document.write( "<nobr><img src='/images/pixel.gif' width=2 height=0>" );
    document.writeln( title+"</nobr></div></div>" );
    document.write( "<div class='overlay'><img src='/images/pixel.gif' "
					+ "width=0 height="+pad+">" );
    document.write( "<div class='headline' align='left'><nobr>" );
    document.writeln( title+"</nobr></div></div>" );
    //  put the image into the non-layered body, with enough padding
    //  beside it that any content will be just below the title
    if ( arguments.length > 2 ) document.write( "<img align='right' src='"
				+image+"' hspace="+space+" vspace="+space );
    if ( arguments.length > 3 ) document.write( " width="+w );
    if ( arguments.length > 4 ) document.write( " height="+h );
    document.writeln( ">" );
    document.write( "<div class='headline'>&nbsp;</div>" );
    document.write( "<img src='/images/pixel.gif' width=0 height="+pad+">" );
    document.writeln( "<br>" );
}

function rightHeadline( title, pad, image, w, h ) {
    //  we're going to add "hspace" and "vspace" to the image (if any)
    //  which will make it appear low by that amount, so increase the
    //  pad accordingly
    var space = 12;
    if ( arguments.length > 2 ) pad += space;
    //  write the headline and it's shadow into overlay layers
    document.write( "<div class='overlay'><img src='/images/pixel.gif' "
					+ "width=0 height="+(pad+2)+">" );
    document.write("<div class='headline' align='right' style='color:white;'>");
    document.writeln( "<nobr>"+title+"</nobr></div></div>" );
    document.write( "<div class='overlay'><img src='/images/pixel.gif' "
					+ "width=0 height="+pad+">" );
    document.write( "<div class='headline' align='right'><nobr>" );
    document.write( title+"<img src='/images/pixel.gif' width=2 height=0>" );
    document.writeln( "</nobr></div></div>" );
    //  write the title into the overlay layer
    // document.write( "<div class='overlay'>" );
    // document.write( "<img src='/images/pixel.gif' width=0 height="+pad+">" );
    // document.writeln( "<div class='headline' align='right'>"+title
    // 							+"</div></div>" );
    //  put the image into the non-layered body, with enough padding
    //  beside it that any content will be just below the title
    if ( arguments.length > 2 ) document.write( "<img align='left' src='"
				+image+"' hspace="+space+" vspace="+space );
    if ( arguments.length > 3 ) document.write( " width="+w );
    if ( arguments.length > 4 ) document.write( " height="+h );
    document.writeln( ">" );
    document.write( "<div class='headline'>&nbsp;</div>" );
    document.write( "<img src='/images/pixel.gif' width=0 height="+pad+">" );
    document.writeln( "<br>" );
}

//  page initialization (to be put in the BODY tag's "onLoad")
//
function on_load() {

     	//  get non-initial images pre-loaded
     	//
     	var d = new Image();
	//  the tag-line images after the first one
     	d.src = styledir + "tag-portable.gif";
     	d.src = styledir + "tag-support.gif";
     	d.src = styledir + "tag-engineer.gif";
	//  the "mouse-over" version of the menu-item images
     	d.src = styledir + "engsvcs-on.gif";
     	d.src = styledir + "itsvcs-on.gif";
     	d.src = styledir + "solutions-on.gif";
     	d.src = styledir + "careers-on.gif";
     	d.src = styledir + "contact-on.gif";
     	d.src = styledir + "integration-on.gif";
     	d.src = styledir + "assessment-on.gif";
     	d.src = styledir + "testeval-on.gif";
     	d.src = styledir + "porting-on.gif";
     	d.src = styledir + "opsupport-on.gif";
     	d.src = styledir + "maintenance-on.gif";
     	d.src = styledir + "staffaug-on.gif";
     	d.src = styledir + "handheld-on.gif";
     	d.src = styledir + "linux-on.gif";
     	d.src = styledir + "webapp-on.gif";
}





//  ---------------------------------------------------------------------
//  All the remaining methods are "private", intended only for use
//  within this file, so should never be directly referenced from pages
//  ---------------------------------------------------------------------

function writeHeader( img, w, h, wimg, himg ) {
    var alt="SyPort Systems:   portability... supportability... "
    		+ "engineering excellence... giving your system wings.";
    document.write( "<div class='header'>" );
    document.write( "<a href='/'>" );
    document.write( "<img src='"+styledir+img+"' " );
    //  the "alt" text tends to overlay the pop-up menus,
    //  so don't use it until you work that problem out!
    //  document.write(	"width="+w+" height="+h+" alt='"+alt+"' border=0>" );
    document.write(	"width="+w+" height="+h+" border=0>" );
    document.write( "</a>" );
    document.writeln( "</div>" );
    document.write( "<div class='tagline' id='tagline'>" );
    document.write( "<img name='tagimage', src='"+styledir+"tag-wings.gif' " );
    document.write(	"width="+wimg+" height="+himg+" border=0>" );
    document.writeln( "</div>" );
    setInterval( "tagrot()", 1500 );
}


//  this draws any single menu item
function writeMenuItem( index, name, href, imgsrc, width, height, pad ) {
    document.write( "<a href='"+href+"' onMouseOver='report(1,"+index+")' " );
    document.write(	"onMouseOut='report(0,"+index+")'>" );
    document.write( "<img name='"+name+"' src='"+styledir+imgsrc+"' " );
    document.write(	"width="+width+" height="+height+" border=0></a>" );
    if ( pad > 0 ) document.write( "<img src='/images/pixel.gif' width="+pad
    							+" height=1>" );
}


//  this writes the root menu and the itsvcs sub-menu
function writeNavMenu() {

    // create a div that contains the root menu items arranged horizontally.
    document.write( "<div class='menubar' id='menubar'><nobr>" );
    writeMenuItem( 1, "engsvcs",	"/engsvcs/",
    				"engsvcs.gif", 160, 19, 5 );
    writeMenuItem( 2, "itsvcs",		"/itsvcs/",
    				"itsvcs.gif", 94, 19, 5 );
    writeMenuItem( 3, "solutions",	"/solutions/",
    				"solutions.gif", 84, 19, 0 );
    document.writeln( "</nobr></div>" );
    document.write( "<div class='linkbar' id='linkbar'><nobr>" );
    writeMenuItem( 4, "careers",	"/jobs/",
    				"careers.gif", 48, 14, 15 );
    writeMenuItem( 5, "contact",	"/info/contact.html",
    				"contact.gif", 64, 14, 0 );
    document.writeln( "</nobr></div>" );

    // for each pop-up menu, we create a <div> (and there must be a
    // class with the same name, to make it hideable), and insert each
    // menu items into it with <br>s between them to stack them vertically.
    //    itsvcs pop-up
    document.write( "<div class='popmenu02' id='popmenu02'>" );
    writeMenuItem( 21, "assessment",	"/itsvcs/assessment.html",
    				"assessment.gif", 160, 18, 0 );
    document.write( "<br>" );
    writeMenuItem( 22, "integration",	"/itsvcs/integration.html",
    				"integration.gif", 160, 18, 0 );
    document.write( "<br>" );
    writeMenuItem( 23, "testeval",	"/itsvcs/testeval.html",
    				"testeval.gif", 160, 18, 0 );
    document.write( "<br>" );
    writeMenuItem( 24, "maintenance",	"/itsvcs/maintenance.html",
    				"maintenance.gif", 160, 18, 0 );
    document.write( "<br>" );
    writeMenuItem( 25, "porting",	"/itsvcs/porting.html",
    				"porting.gif", 160, 18, 0 );
    document.write( "<br>" );
    writeMenuItem( 26, "opsupport",	"/itsvcs/opsupport.html",
    				"opsupport.gif", 160, 18, 0 );
    // no <br> needed after last item    document.write( "<br>" );
    document.writeln( "</div>" );
    //    solutions pop-up
    document.write( "<div class='popmenu03' id='popmenu03'>" );
    writeMenuItem( 31, "webapp",	"/solutions/webapp.html",
    				"webapp.gif", 160, 18, 0 );
    document.write( "<br>" );
    writeMenuItem( 32, "handheld",	"/solutions/handheld.html",
    				"handheld.gif", 160, 18, 0 );
    document.write( "<br>" );
    writeMenuItem( 33, "linux",		"/solutions/linux.html",
    				"linux.gif", 160, 18, 0 );
    // no <br> needed after last item    document.write( "<br>" );
    document.writeln( "</div>" );
}



//  ---------------------------------------------------------------------
//  Next few methods are for managing the menus created above
//  ---------------------------------------------------------------------

//  this handles a reported mouse event (over/out) on a menu item
function report( action, object ) {
    if ( action == 1 ) { curObj = object; }    else { curObj = 0; }
    switch ( object ) {
    	case 1:		// (root)->engsvcs
    		if ( action == 1 )  hidemenu();
    		change( action, "menubar", "engsvcs", ".gif" );
    		break;
    	case 2:		// (root)->itsvcs
    		pending( 1-action );
    		if ( action == 1 ) {
    			if ( curMenu != 2 ) {
			    change( action, "menubar", "itsvcs", ".gif" );
			    showmenu( 2, "popmenu02", "menubar", "itsvcs",
			    					".gif" );
			}
    		}
		//  following shouldn't be needed, but gets the image
		//  back to normal for NN, where the "pending()" doesn't work
		else {
			if ( isNN4 || isNN5 ) {
			    change( action, "menubar", "itsvcs", ".gif" );
			}
		}
    		break;
    	case 3:		// (root)->solutions
    		pending( 1-action );
    		if ( action == 1 ) {
    			if ( curMenu != 3 ) {
			    change( action, "menubar", "solutions", ".gif" );
			    showmenu( 3, "popmenu03", "menubar", "solutions",
			    					".gif" );
			}
    		}
		//  following shouldn't be needed, but gets the image
		//  back to normal for NN, where the "pending()" doesn't work
		else {
			if ( isNN4 || isNN5 ) {
			    change( action, "menubar", "solutions", ".gif" );
			}
		}
    		break;
    	case 4:		// (root)->careers
    		if ( action == 1 )  hidemenu();
    		change( action, "linkbar", "careers", ".gif" );
    		break;
    	case 5:		// (root)->contact
    		if ( action == 1 )  hidemenu();
    		change( action, "linkbar", "contact", ".gif" );
    		break;
    	case 21:	// (root)->itsvcs->assessment
		pending( 1-action );
    		change( action, "popmenu02", "assessment", ".gif" );
    		break;
    	case 22:	// (root)->itsvcs->integration
		pending( 1-action );
    		change( action, "popmenu02", "integration", ".gif" );
    		break;
    	case 23:	// (root)->itsvcs->testeval
		pending( 1-action );
    		change( action, "popmenu02", "testeval", ".gif" );
    		break;
    	case 24:	// (root)->itsvcs->maintenance
		pending( 1-action );
    		change( action, "popmenu02", "maintenance", ".gif" );
    		break;
    	case 25:	// (root)->itsvcs->porting
		pending( 1-action );
    		change( action, "popmenu02", "porting", ".gif" );
    		break;
    	case 26:	// (root)->itsvcs->opsupport
		pending( 1-action );
    		change( action, "popmenu02", "opsupport", ".gif" );
    		break;
    	case 27:	// (root)->itsvcs->staffaug
		pending( 1-action );
    		change( action, "popmenu02", "staffaug", ".gif" );
    		break;

    	case 31:	// (root)->solutions->webapp
		pending( 1-action );
    		change( action, "popmenu03", "webapp", ".gif" );
    		break;
    	case 32:	// (root)->solutions->handheld
		pending( 1-action );
    		change( action, "popmenu03", "handheld", ".gif" );
    		break;
    	case 33:	// (root)->solutions->linux
		pending( 1-action );
    		change( action, "popmenu03", "linux", ".gif" );
    		break;
    }
}

//  this changes the content displayed in an <img>; assumptions are:
//	the <img> has the name "basename"
//	the image is in a <div> that has the name "divname"
//	the image source to be "{basename}{action}{suffix}", where:
//		{basename} and {suffix} are strings passed in as args,
//		{action} is either "" or "-on", based on the action arg.
function change( action, divname, basename, suffix ) {
	var midname = "";
	if ( action == 1 )  midname = "-on";
	var imagename = basename + midname + suffix;

	//  create a reference to the image object depending on the browser
	var objImage = null;
	if ( isNN4 ) {
		objImage = eval( "document."+divname+".document."+basename );
	} else {
		objImage = eval( "document."+basename );;
	}

	// set the image source file
	objImage.src = styledir + imagename;
}

//  these functions show a specified pop-up menu, or hide any current menu
//	the pop-up menu is a hideable <div> that has the name "menuname"
//	the "top" image (that initiates this menu) can be controlled
//	    by the "change()" method, using the "divname", "basename",
//	    and "suffix" arguments.
var objMenu = null;
var divnameMenu = null;
var basenameMenu = null;
var suffixMenu = null;
function showmenu( object, menuname, divname, basename, suffix ) {
	if ( curMenu > 0 ) {
		hidemenu();
	}
	//  create reference to the menu object (that has the "visibility"
	//  property) depending on the browser type
	if ( isNN4 || isNN5 ) {
		objMenu = eval( "document."+menuname );
	} else {
		objMenu = eval( "document.all."+menuname+".style" );
	}

	//  make the menu object visible and on top of anything else
	if ( isNN4 || isNN5 ) {
		//  objMenu doesn't refer to anything in NN !!!!
	} else {
		objMenu.visibility = "visible";
		objMenu.zIndex = 9;
	}
	//  note it's the current menu
	curMenu = object;
	//  remember it's "top" object
	divnameMenu = divname;
	basenameMenu = basename;
	suffixMenu = suffix;
}

function hidemenu() {
	//  hide the menu object, and normalize the top-level object
	if ( objMenu != null ) {
		objMenu.visibility = "hidden";
		change( 0, divnameMenu, basenameMenu, suffixMenu );
	}
	//  change the top-level
	//  clear the knowledge of it
	objMenu = null;
	curMenu = 0;
}

//  this clears a popped menu if the mouse isn't in it
var pendTmout = -999;
var curObj = 0;
var curMenu = 0;
function unpop() {
	pendTmout = -999;
	//  ignore timeout if nothing popped,
	//  or when current object is part of popped menu
	if ( curMenu < 1 )  return;
	if ( curObj == curMenu )  return;
	if ( curObj>(curMenu*10)  &&  curObj<(curMenu*10+10) )  return;
	//  otherwise, hide the menu
	hidemenu();
}

//  this clears or sets a timeout, trying to assure that
//  no more than one timeout is pending.
//	action=1: sets a half-second timeout
//	anything-else: clears any pending timeout
function pending( action ) {
	if ( pendTmout != -999 )  clearTimeout( pendTmout );
	if ( action == 1 ) {
		pendTmout = setTimeout( "unpop()", 500 );
	} else {
		pendTmout = -999;
	}
}





//  this rotates the tag-line images
//
var sequence = new Array( "wings", "wings", "wings",
				"port", "support", "engineer" );
var iseq = -1;
var previmagename = "";
function tagrot() {
	if ( ++iseq >= sequence.length )  iseq = 0;
	imagename = styledir + "tag-" + sequence[iseq] + ".gif";
	if ( imagename == previmagename )  return;
	previmagename = imagename;
	//  create a reference to the image object depending on the browser
	var objImage = null;
	if ( isNN4 ) {
		objImage = eval( "document.tagline.document.tagimage" );
	} else {
		objImage = eval( "document.tagimage" );
	}
	objImage.src = imagename;
}