var Loading = new Image();
Loading.src  = 'images/loading.gif';

var Loading1 = new Image();
Loading1.src  = 'images/spacer.gif';



/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact
*/

var offsetfrommouse=[15,15]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 270;	// maximum image size.

if (document.getElementById || document.all){
	document.write('<div id="trailimageid" style="width:560px;">');
	document.write('</div>');
}

function gettrailobj(){
if (document.getElementById) {
	return document.getElementById("trailimageid").style
}
else if (document.all) {
	return document.all.trailimagid.style
}
}

function gettrailobjnostyle(){
	if (document.getElementById) {
		
		return document.getElementById("trailimageid")
	}else if (document.all) {
		
		return document.all.trailimagid
	}
}


function truebody(){
	return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}





function showtrail(image_chunk){
	
	var ImgArray = image_chunk.split(",");
	
	document.onmousemove=followmouse;
	

	var ar = [];
	for(i=0;i<ImgArray.length;++i) {
		var img = new Image();
		img.src = ImgArray[i];
		ar.push(img);
	}
	
	
	newHTML = '<div class="resultportfolioimages" id="resultportfolioimages" style="background:#ffffff;">';
  	newHTML = newHTML + '<table width="100%" border="0" align="center" cellpadding="0" cellspacing="2" >';
    newHTML = newHTML + '<tr>';
    newHTML = newHTML + '<td height="5" colspan="5" align="left" valign="middle" class="subheading"></td>';
    newHTML = newHTML + '</tr>';

    newHTML = newHTML + '<tr>';
    newHTML = newHTML + '<td height="31" colspan="5" align="left" valign="middle" class="subheading"><div class="formheading" align="center" >PORTFOLIO</div></td>';
    newHTML = newHTML + '</tr>';
    newHTML = newHTML + '<tr>';
    newHTML = newHTML + '<td height="3" colspan="5" align="left" valign="middle" class="subheading"></td>';
    newHTML = newHTML + '</tr>';

    newHTML = newHTML + '<tr>';
    
    var ex = 0;
	for(i=0;i<ar.length;++i) {
		if(ex == 0) {newHTML = newHTML + '<tr>';}
		++ex;
		
		newHTML = newHTML +  '<td width="20%" height="25" align="center" valign="middle"><div class="portfolioimagecanvas" align="center" ><img src="'+ar[i].src +'"  /></div></td>';
		if(ex == 5) {newHTML = newHTML + '</tr>'; ex=0;}
	}
    
      
      
    newHTML = newHTML + '</tr>';
    newHTML = newHTML + '<tr>';
      newHTML = newHTML + '<td width="20%" height="40" align="center" valign="middle"  colspan="2"><img src="images/front_end/capp_logo.jpg" width="117" height="30" align="left" /></td>';
      newHTML = newHTML + '<td width="20%" height="40" align="right" valign="middle">&nbsp;</td>';
      newHTML = newHTML + '<td width="20%" align="right" valign="middle">&nbsp;</td>';
	newHTML = newHTML + '<td colspan="2" align="right" valign="middle">&nbsp;&nbsp;&nbsp;</td>';
    newHTML = newHTML + '</tr>';
  newHTML = newHTML + '</table>';
newHTML = newHTML + '</div>';

	
// 	newHTML = '<div style="padding: 5px; background-color: #FFF; border: 1px solid #888;">';
// 	newHTML = newHTML + '<h3 align="left">Porfolio</h3>';
// 	newHTML = newHTML + '<div align="center" style="padding: 8px 2px 2px 2px;">';
// 	newHTML = newHTML + '<table cellspacing="0" cellpadding="2" border="0">'
// 	var ex = 0;
// 	for(i=0;i<ar.length;++i) {
// 		if(ex == 0) {newHTML = newHTML + '<tr>';}
// 		++ex;
// 		
// 		newHTML = newHTML +  '<td><img src="'+ar[i].src +'" width="100" border="0"></td>';
// 		if(ex == 3) {newHTML = newHTML + '</tr>'; ex=0;}
// 	}
// 	newHTML = newHTML + '</table>';
// 	newHTML = newHTML + '</div>';
// 	newHTML = newHTML + '</div>';
	
	gettrailobjnostyle().innerHTML = newHTML;
	
	gettrailobj().display="inline";
	
}

function showtrailBatch(imagename,title,filetype){
	document.onmousemove=followmouseBatch;

	cameraHTML = '';

	newHTML = '<div style="padding: 5px; background-color: #FFF; border: 1px solid #888;" id="trailInnerDiv">';
	newHTML = newHTML + '<h2>' + title + '</h2>';

	newHTML = newHTML + '<div align="center" style="padding: 8px 2px 2px 2px;">';

	newHTML = newHTML + '<img src="' + imagename + '" border="0" width="30px"></div>';
	

	newHTML = newHTML + '</div>';
	
	gettrailobjnostyle().innerHTML = newHTML;
	
	gettrailobj().display="inline";
	gettrailobj().position="relative";
	currentimageheight = $('trailInnerDiv').offsetHeight;
	
}

function hidetrail(){
	gettrailobj().innerHTML = " ";
	gettrailobj().display="none"
	document.onmousemove = followmouse;
	//gettrailobj().left="-500px"

}

function followmouse(e){

	var xcoord=offsetfrommouse[0]
	var ycoord=offsetfrommouse[1]

	
	var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth- 15
	var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

	//if (document.all){
	//	gettrailobjnostyle().innerHTML = 'A = ' + truebody().scrollHeight + '<br>B = ' + truebody().clientHeight;
	//} else {
	//	gettrailobjnostyle().innerHTML = 'C = ' + document.body.offsetHeight + '<br>D = ' + window.innerHeight;
	//}

	if (typeof e != "undefined"){
		if (docwidth - e.pageX < 380){
			xcoord = e.pageX - xcoord - 400; // Move to the left side of the cursor
		} else {
			xcoord += e.pageX;
		}
		if (docheight - e.pageY < (currentimageheight + 110)){
			ycoord += e.pageY - Math.max(0,(110 + currentimageheight + e.pageY - docheight - truebody().scrollTop));
		} else {
			ycoord += e.pageY;
		}

	} else if (typeof window.event != "undefined"){
		if (docwidth - event.clientX < 380){
			xcoord = event.clientX + truebody().scrollLeft - xcoord - 400; // Move to the left side of the cursor
		} else {
			xcoord += truebody().scrollLeft+event.clientX
		}
		if (docheight - event.clientY < (currentimageheight + 110)){
			ycoord += event.clientY + truebody().scrollTop - Math.max(0,(110 + currentimageheight + event.clientY - docheight));
		} else {
			ycoord += truebody().scrollTop + event.clientY;
		}
	}

	if(ycoord < 0) { ycoord = ycoord*-1; }
	
	gettrailobj().position = "absolute";
	gettrailobj().zIndex = "100";
	gettrailobj().left = xcoord  +"px"
	gettrailobj().top = ycoord+"px"

}

function followmouseBatch(e){
	var xcoord=offsetfrommouse[0]
	var ycoord=offsetfrommouse[1]

	var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
	var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

	var trailInnerDiv = $('trailInnerDiv');
	var currentimageheight = trailInnerDiv.offsetHeight;
	var currentimagewidth = trailInnerDiv.offsetWidth;

	scrollPos = Position.realOffset(truebody());
	
	if (typeof e != "undefined"){
		if (docwidth - e.pageX < 380){
			xcoord = e.pageX - xcoord - 400; // Move to the left side of the cursor
		} else {
			xcoord += e.pageX;
		}
		if ((e.pageY - scrollPos[1]) + currentimageheight > docheight){
			ycoord = -ycoord + (e.pageY - currentimageheight);
		} else {
			ycoord += e.pageY;
		}
	} else if (typeof window.event != "undefined"){
		if (event.clientX + currentimagewidth > docwidth){
			xcoord = -xcoord + ((event.clientX + scrollPos[0]) - currentimagewidth); // Move to the left side of the cursor
		} else {
			xcoord += (event.clientX + scrollPos[0]);
		}
		if (event.clientY + currentimageheight > docheight){
			ycoord = -ycoord + ((event.clientY + scrollPos[1]) - currentimageheight);
		} else {
			ycoord += (event.clientY + scrollPos[1]);
		}
	}

	if(ycoord < 0) { ycoord = ycoord*-1; }

	gettrailobj().left=xcoord+"px"
	gettrailobj().top=ycoord+"px"

}


function GetWidth() {
	
  var myWidth = 0, myHeight = 0;
  
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
 
  return myWidth;
  
       
}

function GetHeight() {
	
  var myWidth = 0, myHeight = 0;
  
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
 
  return myHeight;
  
       
}