var bgImage = 'images/alexogle.jpg';
var bgWidth = '1312';
var bgHeight = '1032';
var aspectRatio;
var myHeight;
var myWidth;
var tempWidth;
var tempHeight;
var offsetT;
var offsetL;
var currentWidth;
var currentHeight;

function init(){
	aspectRatio = bgWidth/bgHeight;
	setSize();
}
		
function addListener(element, type, expression, bubbling)
{
	bubbling = bubbling || false;
	if(window.addEventListener)	{ // Standard
		element.addEventListener(type, expression, bubbling);
		return true;
	} else if(window.attachEvent) { // IE
		element.attachEvent('on' + type, expression);
		return true;
	} else return false;
}


function sizeBackground(imageW, imageH,offsetL,offsetT){
	var offsety = getScrollXY('Y');
	var offsetx = getScrollXY('X');
	document.getElementById('bg').innerHTML = '<img id="imgbg" src=\"'+bgImage+'\" width=\"'+imageW+'\" height=\"'+imageH+'\" alt=\"picture\" border=\"0\" style=\"visibility:visible; left:'+'-'+(offsetL)+'px; top:'+((offsetT-(offsetT*2))+offsety)+'px\" onload="displayImage(\'bg\')" >';
	//setStyleById('bg',"background","url(loadinfo.gif) no-repeat center center");
}
function setStyleById(i, p, v) {
	var n = document.getElementById(i);
	n.style[p] = v;
}
function displayImage(divId){
	setStyleById(divId,"backgroundImage","none");
	setStyleById('img'+divId,"visibility","visible");
}
function getScrollXY(dirX) {
	var scrOfX = 0, scrOfY = 0;
	if( typeof( window.pageYOffset ) == 'number' ) {
	  //Netscape compliant
	  //scrOfY = window.pageYOffset;
	  //scrOfX = window.pageXOffset;
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
	  //DOM compliant
	  scrOfY = document.body.scrollTop;
	  scrOfX = document.body.scrollLeft;
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
	  //IE6 standards compliant mode
	  scrOfY = document.documentElement.scrollTop;
	  scrOfX = document.documentElement.scrollLeft;
	}
	if(dirX == 'Y'){
		return scrOfY;
	}else{
		return scrOfX;
	}
}

function setSize() {
	//myWidth = 0, myHeight = 0;
	if( typeof( window.innerWidth ) == 'number' ) {
	  //Non-IE
	  myWidth = document.documentElement.clientWidth;
	  myHeight = document.documentElement.clientHeight;
	} 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;
	    }
	  }
	}
	tempHeight = myWidth/aspectRatio;
	if(tempHeight<myHeight){
		//Match Height
		tempHeight = myHeight;
		tempWidth = myHeight*aspectRatio;
		offsetT = 0;
		offsetL = (tempWidth-myWidth)/2;
	}else{
		//Match Width
		tempWidth = myWidth;
		offsetT = (tempHeight-myHeight)/2;
		offsetL = 0;
	}
	currentHeight = myHeight;
	currentWidth = myWidth;
	sizeBackground(tempWidth,tempHeight,offsetL,offsetT);
}	
addListener(window, 'resize', setSize);

//////////////------------------- cursor
function getPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    } 
    else {
        cursor.x = e.clientX + 
            (document.documentElement.scrollLeft || 
            document.body.scrollLeft) - 
            document.documentElement.clientLeft;
        cursor.y = e.clientY + 
            (document.documentElement.scrollTop || 
            document.body.scrollTop) - 
            document.documentElement.clientTop;
    }
	
	if(cursor.x < (currentWidth/3)){
		var messageX = "<";
	}else if(cursor.x > (currentWidth/3) && cursor.x < ((currentWidth/3)*2)){
		var messageX = "X";	
	}else{
		//var messageX = currentWidth+" > "+currentHeight;
		var messageX = ">";
	}
	var messageX = "";
    //var messageX = currentWidth+" x "+currentHeight;
    //document.getElementById("currentvalues").innerHTML = "cursor x: "+cursor.x+" cursor y: "+cursor.y;
    document.getElementById("cursor").innerHTML = '<div style="position: fixed; top:'+cursor.y+'px; left:'+(cursor.x+18)+'px">'+messageX+'</div>';
    
}
addListener(window, 'mousemove', getPosition);