<!--

/////////////////////////////////////////////////////////////////
// this javascript source code can moving html object over screen   
// compatible with IE, Mozila & Netscape Navigator Browsers
///////////////////////////////////////////////////////////

maxAnimations = 20 // this is maximum of all moved panels

screenWidth = 0; //  width of browser screen, in pixel
screenHeight = 0; //  height of browser screen, in pixel

startXpos=new Array(maxAnimations);  //start x coordinates, in pixel
startYpos=new Array(maxAnimations);  //start y coordinates, in pixel

endXpos=new Array(maxAnimations);  //end x coordinates, in pixel
endYpos=new Array(maxAnimations);  //end y coordinates, in pixel

stepLength=19; //Animation speed (smaller is slower)

// private variables
stepByX=new Array(maxAnimations); 
stepByY=new Array(maxAnimations); 
currX=new Array(maxAnimations);
currY=new Array(maxAnimations);
timerID=new Array(maxAnimations);
isVisible=new Array(maxAnimations);

var ns6=document.getElementById&&!document.all // get type of browser

function CreatePanel(index, objectContent, objectHidden)
{
    if (document.layers)
    {
        document.write("<LAYER NAME=n"+index+" LEFT=0 TOP=-1000><DIV NAME='marker"+index+"' border=0>"+objectContent+"</DIV></LAYER>");
        
        document.write("<LAYER NAME=nh"+index+" LEFT=0 TOP=-1000><DIV NAME='markerh"+index+"' border=0>"+objectHidden+"</DIV></LAYER>");
    }
    else 
    if (document.all||ns6)
    {
        if (document.all)
        {
            document.write('<div id="out" style="position:absolute;top:0;left:0"><div id="in" style="position:relative">');
            document.write('<div id="marker" style="position:absolute;top:-1000;left:0" border=0>'+objectContent+'</div>');
            document.write('</div></div>');
        }
        else
        {
            document.write('<div id="out'+index+'" style="position:absolute;top:0;left:0"><div id="in'+index+'" style="position:relative">');
            document.write('<div id="marker'+index+'" style="position:absolute;top:-1000;left:0" border=0>'+objectContent+'</div>');
            document.write('</div></div>');
        }    
        
        if (document.all)
        {
            document.write('<div id="outh" style="position:absolute;top:0;left:0"><div id="inh" style="position:relative">');
            document.write('<div id="markerh" style="position:absolute;top:-1000;left:0" border=0>'+objectHidden+'</div>');
            document.write('</div></div>');
        }    
        else    
        {
            document.write('<div id="outh'+index+'" style="position:absolute;top:0;left:0"><div id="inh'+index+'" style="position:relative">');
            document.write('<div id="markerh'+index+'" style="position:absolute;top:-1000;left:0" border=0>'+objectHidden+'</div>');
            document.write('</div></div>');
        }    
    }
    
    startXpos[index] = -1;
    startYpos[index] = -1;
    endXpos[index] = 1;
    endYpos[index] = 1;
    
    stepByX[index] = 0;
    stepByY[index] = 0;
    
    currX[index] = 0;
    currY[index] = -1000;
    isVisible[index] = false;
}

function GetBrowserScreenSize()
{
    if (document.layers||ns6){
        screenWidth=window.innerWidth;
        screenHeight=window.innerHeight;
    }
    if (document.all){
        screenWidth = window.document.body.offsetWidth;
        screenHeight = window.document.body.offsetHeight;
    }
}    

function MoveMarker(index)
{
    if (document.layers){
      document.layers["marker"+index].left = currX[index];
      document.layers["marker"+index].top = currY[index];
    }
    if (document.all){
      document.all.marker[index].style.pixelLeft = currX[index];
      document.all.marker[index].style.pixelTop = currY[index];
    }
    if (ns6){
      document.getElementById("marker"+index).style.left = currX[index];
      document.getElementById("marker"+index).style.top = currY[index];
    }
}

function MoveMarkerH(index)
{
    if (document.layers){
      document.layers["markerh"+index].left = currX[index];
      document.layers["markerh"+index].top = currY[index];
    }
    if (document.all){
      document.all.markerh[index].style.pixelLeft = currX[index];
      document.all.markerh[index].style.pixelTop = currY[index];
    }
    if (ns6){
      document.getElementById("markerh"+index).style.left = currX[index];
      document.getElementById("markerh"+index).style.top = currY[index];
    }
}

function Animate(index){

    currX[index] += stepByX[index];
    currY[index] += stepByY[index];
  
    if (((stepByX[index] > 0) && (currX[index] >= endXpos[index])) ||
        ((stepByY[index] > 0) && (currY[index] >= endYpos[index])) ||
        ((stepByX[index] < 0) && (currX[index] <= endXpos[index])) ||
        ((stepByY[index] < 0) && (currY[index] <= endYpos[index]))) {
        MoveToEndPosition(index);
        clearInterval(timerID[index]);
        timerID[index] = 0;
    }
    else {
        MoveMarker(index);
    }
}

function MoveToStartPosition(index)
{
    currX[index] = startXpos[index];
    currY[index] = startYpos[index];	
    
    MoveMarker(index);
    MoveMarkerH(index);
}

function IsOnEndPosition(index)
{
	return ((currX[index] == endXpos[index]) &&
            (currY[index] == endYpos[index]) &&
            (currX[index] != 0) &&
            (currY[index] != -1000) &&
            (isVisible[index]));
}

function MoveToEndPosition(index)
{
    currX[index] = 0;
    currY[index] = -1000;
    
	HideMarkerH(index);
    MoveMarkerH(index);
    
    currX[index] = endXpos[index];
    currY[index] = endYpos[index];

    MoveMarker(index);
}

function MoveToOutScreen(index)
{
    currX[index] = 0;
    currY[index] = -1000;	
    
    MoveMarker(index);
    MoveMarkerH(index);
}

function ShowMarker(index){
    if (document.layers)
	{
        document.layers["marker"+index].visibility="show";
	}
    else 
    if (document.all)
	{
        document.all.out[index].style.visibility="visible";
	}	
    else 
    if (ns6)
	{
        document.getElementById("out"+index).style.visibility="visible";
	}	

    isVisible[index] = true;
}

function ShowMarkerH(index){
    if (document.layers)
	{
        document.layers["markerh"+index].visibility="show";
	}
    else 
    if (document.all)
	{
        document.all.outh[index].style.visibility="visible";
	}	
    else 
    if (ns6)
	{
        document.getElementById("outh"+index).style.visibility="visible";
	}	
}

function HideMarker(index){
    if (document.layers)
	{
        document.layers["marker"+index].visibility="hide";
	}	
    else 
    if (document.all)
	{
        document.all.out[index].style.visibility="hidden";
	}	
    else 
    if (ns6)
	{
        document.getElementById("out"+index).style.visibility="hidden";
	}
	
    isVisible[index] = false;
    
    HideMarkerH(index);
}

function HideMarkerH(index)
{
    if (document.layers)
	{
        document.layers["markerh"+index].visibility="hide";
	}	
    else 
    if (document.all)
	{
        document.all.outh[index].style.visibility="hidden";
	}	
    else 
    if (ns6)
	{
        document.getElementById("outh"+index).style.visibility="hidden";
	}
}


function SetPath(index, startX, startY, endX, endY)
{
    startXpos[index] = startX;
    startYpos[index] = startY;
    endXpos[index] = endX;
    endYpos[index] = endY;
    
    pathByX = endX - startX;
    pathByY = endY - startY;
    
    pathLength = Math.sqrt(Math.pow(pathByX,2) + Math.pow(pathByY,2));
    allSteps = pathLength / stepLength;
    
    stepByX[index] = pathByX / allSteps;
    stepByY[index] = pathByY / allSteps;
    
    currX[index] = startX;
    currY[index] = startY;
}

function StartAnimate(index)
{
    MoveToStartPosition(index);
    ShowMarker(index);
    ShowMarkerH(index);
    timerID[index] = setInterval("Animate("+index+")",30)
    timerID[index] = 0;
}

function CancelAnimate(index)
{
    if (timerID[index] != 0){
        clearInterval(timerID[index]);
        timerID[index] = 0;
    }
    
    HideMarker(index);
    HideMarkerH(index);
    
    MoveToOutScreen(index);
}

// main program
//////////////////////////////
function CreatePanels()
{
	CreatePanel(0,
		'<table width="388" height="378" border="0" cellspacing="0" cellpadding="0" background="images/ESC_Intro/bg_Clip.png">'+
			'<tr>'+
				'<td width="20" height="95" align="center"></td>'+
				'<td width="130" height="95" valign="bottom" align="center" class="link_num" style="padding-bottom:15px"><span style="color: #ffffff">TESTIMONIALS</span>&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;:&nbsp;&nbsp;<a href="#" onClick="MovePanel(1);">2</a>&nbsp;&nbsp;:&nbsp;&nbsp;<a href="#" onClick="MovePanel(2);">3</a>&nbsp;&nbsp;</td>'+
				'<td height="95" align="right" valign="top" class="close"><a href="#" onclick="HidePanel(0);">close</a> <img src="images/close_btt.gif"  align="texttop"  border="0" onclick="HidePanel(0);"/></td>'+
			'</tr>'+
			'<tr>'+
				'<td height="233" colspan="3" valign="top" align="center">'+
				'<table width="320" height="240" border="0" cellspacing="0" cellpadding="0" background="images/ESC_Intro/bg_Clip.png">'+
				  '<tr>'+
					'<td><img src="images/ESC_Intro/big_videoClip.gif" style="filter:alpha(opacity=100);-moz-opacity:1;" /></td>'+
				  '</tr>'+
				'</table>'+
				'</td>'+
			'</tr>'+
		'</table>'
		,
		'<div style="background-color:#ffb30f; width:388px; height:388px"></div>'
		);

	CreatePanel(1,
		'<table width="388" height="378" border="0" cellspacing="0" cellpadding="0" background="images/ESC_Intro/bg_Clip.png">'+
			'<tr>'+
				'<td width="20" height="95" align="center"></td>'+
				'<td width="130" height="95" valign="bottom" align="center" class="link_num" style="padding-bottom:15px"><span style="color: #ffffff">TESTIMONIALS</span>&nbsp;&nbsp;&nbsp;<a href="#" onClick="MovePanel(0);">1</a>&nbsp;&nbsp;:&nbsp;&nbsp;2&nbsp;&nbsp;:&nbsp;&nbsp;<a href="#" onClick="MovePanel(2);">3</a>&nbsp;&nbsp;</td>'+
				'<td height="95" align="right" valign="top" class="close"><a href="#"  onclick="HidePanel(1);">close</a> <img src="images/close_btt.gif"  align="texttop"  border="0" onclick="HidePanel(1);"/></td>'+
			'</tr>'+
			'<tr>'+
				'<td height="233" colspan="3" valign="top" align="center">'+
				'<table width="320" height="240" border="0" cellspacing="0" cellpadding="0" background="images/ESC_Intro/bg_Clip.png">'+
				  '<tr>'+
					'<td><img src="images/ESC_Intro/big_videoClip.gif" style="filter:alpha(opacity=100);-moz-opacity:1;" /></td>'+
				  '</tr>'+
				'</table>'+
				'</td>'+
			'</tr>'+
		'</table>'
		,
		'<div style="background-color:#ffb30f; width:388px; height:388px"></div>'
		);
	
	CreatePanel(2,
		'<table width="388" height="378" border="0" cellspacing="0" cellpadding="0" background="images/ESC_Intro/bg_Clip.png">'+
			'<tr>'+
				'<td width="20" height="95" align="center"></td>'+
				'<td width="130" height="95" valign="bottom" align="center" class="link_num" style="padding-bottom:15px"><span style="color: #ffffff">TESTIMONIALS</span>&nbsp;&nbsp;&nbsp;<a href="#" onClick="MovePanel(0);">1</a>&nbsp;&nbsp;:&nbsp;&nbsp;<a href="#" onClick="MovePanel(1);">2</a>&nbsp;&nbsp;:&nbsp;&nbsp;3&nbsp;&nbsp;</td>'+
				'<td height="95" align="right" valign="top" class="close"><a href="#"  onclick="HidePanel(2);">close</a> <img src="images/close_btt.gif"  align="texttop"  border="0" onclick="HidePanel(2);"/></td>'+
			'</tr>'+
			'<tr>'+
				'<td height="233" colspan="3" valign="top" align="center">'+
				'<table width="320" height="240" border="0" cellspacing="0" cellpadding="0" background="images/ESC_Intro/bg_Clip.png">'+
				  '<tr>'+
					'<td><img src="images/ESC_Intro/big_videoClip.gif" style="filter:alpha(opacity=100);-moz-opacity:1;" /></td>'+
				  '</tr>'+
				'</table>'+
				'</td>'+
			'</tr>'+
		'</table>'
		,
		'<div style="background-color:#ffb30f; width:388px; height:388px"></div>'
		);
		
}

function MovePanel(index)
{
	switch (index)
	{
		case 0:
				// from left to center
				if ((IsOnEndPosition(0)) || (IsOnEndPosition(1)) || (IsOnEndPosition(2)))
				{
					HidePanels();
					GetBrowserScreenSize();
					SetPath(index,((screenWidth - 800) / 2) - 398, 280, ((screenWidth - 817) / 2), 280);
					MoveToEndPosition(index);
					ShowMarker(index);
				}
				else	
				{
					HidePanels();
					GetBrowserScreenSize();
					SetPath(index,((screenWidth - 800) / 2) - 398, 280, ((screenWidth - 817) / 2), 280);
			    	StartAnimate(index);
				}
				break;
		case 1:
				// from left to center
				if ((IsOnEndPosition(0)) || (IsOnEndPosition(1)) || (IsOnEndPosition(2)))
				{
					HidePanels();
					GetBrowserScreenSize();
					SetPath(index,((screenWidth - 800) / 2) - 398, 280, ((screenWidth - 817) / 2), 280);
					MoveToEndPosition(index);
					ShowMarker(index);
				}
				else	
				{
					HidePanels();
					GetBrowserScreenSize();
					SetPath(index,((screenWidth - 800) / 2) - 398, 280, ((screenWidth - 817) / 2), 280);
			    	StartAnimate(index);
				}
				break;
		case 2:
				// from left to center
				if ((IsOnEndPosition(0)) || (IsOnEndPosition(1)) || (IsOnEndPosition(2)))
				{
					HidePanels();
					GetBrowserScreenSize();
					SetPath(index,((screenWidth - 800) / 2) - 398, 280, ((screenWidth - 817) / 2), 280);
					MoveToEndPosition(index);
					ShowMarker(index);
				}
				else	
				{
					HidePanels();
					GetBrowserScreenSize();
					SetPath(index,((screenWidth - 800) / 2) - 398, 280, ((screenWidth - 817) / 2), 280);
			    	StartAnimate(index);
				}
				break;
	}
}    

function HidePanel(index)
{
    CancelAnimate(index);
	
    if (document.layers)
	{
		switch (index)
		{
			case 0:
		        document.getElementById("VideoClip1").style.color = '#4B4B41';
				break;
			case 1:
		        document.getElementById("VideoClip2").style.color = '#4B4B41';
				break;
			case 2:
		        document.getElementById("VideoClip3").style.color = '#4B4B41';
				break;
		}
	}	
    else 
    if (document.all)
	{
		switch (index)
		{
			case 0:
				VideoClip1.style.color = '#4B4B41';
				break;
			case 1:
				VideoClip2.style.color = '#4B4B41';
				break;
			case 2:
				VideoClip3.style.color = '#4B4B41';
				break;
		}
	}	
    else 
    if (ns6)
	{
		switch (index)
		{
			case 0:
		        document.getElementById("VideoClip1").style.color = '#4B4B41';
				break;
			case 1:
		        document.getElementById("VideoClip2").style.color = '#4B4B41';
				break;
			case 2:
		        document.getElementById("VideoClip3").style.color = '#4B4B41';
				break;
		}
	}
}

function HidePanels()
{
	HidePanel(0);
	HidePanel(1);
	HidePanel(2);
}

//-->

CreatePanels();
