var Agent = navigator.userAgent.toLowerCase();
var is_IE = ( ( Agent.indexOf('msie') != -1) && ( Agent.indexOf('opera') == -1) );

var ImageLeft = 0;
var ImageTop = 0;
var PrevCursorX = 0;
var PrevCursorY = 0;
var PrevImageX = 0;
var PrevImageY = 0;
var PrevSliderX = 0;
var ImageClicked = false;
var SliderClicked = false;
var SliderSheetWidth = 0;
var SliderSheetLeft = 0;
var SliderWidth = 0;
var SliderLeft = 0;
var ImageWidth = 0;
var ImageHeight = 0;
var CursorDirection = 0;

var scale = 100;
var x = 0;
var y = 0;

var isShowError = false;

function Init() {
	var ImageObj = document.getElementById('image');

	ImageWidth = parseInt(ImageObj.width);
	ImageHeight = parseInt(ImageObj.height);
	ImageLeft = parseInt(ImageObj.style.left);
	ImageTop = parseInt(ImageObj.style.top);
	PrevImageX = ImageLeft;
	PrevImageY = ImageTop;

	var SliderObj = document.getElementById( 'slider' );
	SliderWidth = parseInt(SliderObj.width);
	SliderWidth = 30;
	SliderLeft = parseInt(SliderObj.style.left);
	PrevSliderX = parseInt(SliderObj.style.left) + SliderWidth/2;

	var SliderLeftObj = document.getElementById('slider-left');	
	SliderSheetLeft = parseInt(SliderLeftObj.style.left);
	var SliderSheetObj = document.getElementById('slider-sheet');
	SliderSheetWidth = parseInt(SliderSheetObj.style.width);
}

function MouseMove( e ) {
	if (!isImageLoaded) {
		return;
	}
	
	var EventObj = is_IE ? event.srcElement : e.target;
	var X = is_IE ? event.clientX : e.clientX;
	var Y = is_IE ? event.clientY : e.clientY;
		
	if( EventObj.id == "frame" ) {
		EventObj.style.cursor = "move";
		if( ImageClicked ) {
			document.onmousemove = ImageMove;
		} 
	} else 
	if( EventObj.id == "slider" ) {

		EventObj.style.cursor = "pointer";
		if( SliderClicked ) {
			document.onmousemove = SliderMove;

			// Tira bug de imagem sumir qd usa o zoom:
			if ((ImageWidth == 0) || (ImageWidth == 0)) {
				ImageWidth = parseInt(document.getElementById('image').width);
				ImageHeight = parseInt(document.getElementById('image').height);
			}
		}
	} 

	PrevCursorX = X;
	PrevCursorY = Y;
}

function MouseClickDown(e) {
        if (!isImageLoaded) {
		return;
	}


	var EventObj = is_IE ? event.srcElement : e.target;
	var X = is_IE ? event.clientX : e.clientX;
	var Y = is_IE ? event.clientY : e.clientY;

	if( EventObj.id == "frame" ) {
		ImageClicked = true;
		return false;
	}  else
	if( EventObj.id == "slider" ) {
		SliderClicked = true;
		return false;
	}
	else {
		ImageClicked = false;
		SliderClicked = false;
		return true;
	}
}

function MouseClickUp(e) {
        if (!isImageLoaded) {
                return;
	}


	ImageClicked = false;
	SliderClicked = false;
	document.onmousemove = MouseMove;
}

function ImageMove(e) {
	var EventObj = is_IE ? event.srcElement : e.target;
	EventObj.style.cursor = "move";
	
	var X = is_IE ? event.clientX : e.clientX;
	var Y = is_IE ? event.clientY : e.clientY;

	if( ! ImageClicked || EventObj.id != "frame" )	{ return true; }

	var OffsetX = PrevCursorX - X;
	var OffsetY = PrevCursorY - Y;

	var ImageObj = document.getElementById('image');
	ImageObj.style.left = PrevImageX + "px";
	ImageObj.style.top = PrevImageY + "px";

	PrevImageX  = PrevImageX - OffsetX;
	PrevImageY  = PrevImageY - OffsetY;
	PrevCursorX = X;
	PrevCursorY = Y;
	return false;
}

function SliderMove(e) {
	var X = is_IE ? event.clientX : e.clientX;

	if( ! SliderClicked ) { return true; } 
	if( ! SliderSheetWidth ) {
		if (!isShowError) {
			isShowError = true;
			alert("Aguarde a imagem ser completamente carregada!");
		}
		return true; 
	}
	if( ! SliderWidth ){ 
		if (!isShowError) {
			isShowError = true;
			alert("Aguarde a imagem ser completamente carregada!");
		}
		return true; 
	}

	var SliderObj = document.getElementById( 'slider' );		
	var SliderPercentObj = document.getElementById('slider-percent');	

	if( (PrevSliderX-SliderWidth/2) >= SliderSheetLeft && 
		(PrevSliderX+SliderWidth/2) <= SliderSheetWidth ) {
		SliderObj.style.left = PrevSliderX - SliderWidth/2 - 5 + "px";	
	} else
	if( (PrevSliderX-SliderWidth/2) < SliderSheetLeft ) { 
		PrevSliderX = SliderSheetLeft + SliderWidth/2; 
		SliderObj.style.left = SliderSheetLeft - 5 + "px";			
	} else 
	if( (PrevSliderX+SliderWidth/2) > SliderSheetWidth ) { 
		PrevSliderX = SliderSheetWidth - SliderWidth/2; 
		SliderObj.style.left = SliderSheetWidth - SliderWidth - 5 + "px";			
	}

	var percent = Math.round( ((PrevSliderX - SliderWidth/2)/(SliderSheetWidth-SliderWidth))*100 )*2;
	SliderPercentObj.innerHTML = percent + '%';
	var OffsetX = PrevCursorX - X;
	PrevSliderX  = PrevSliderX - OffsetX;
	PrevCursorX = X;
	
	ImageScale(percent);
	
	return false;
}

function ImageScale( percent ) {
	var ImageObj = document.getElementById('image');
	ImageObj.width = Math.round(ImageWidth*percent/100);
	ImageObj.height = Math.round(ImageHeight*percent/100);
}

function DoReset() {
	var ImageObj = document.getElementById('image');
	var SliderObj = document.getElementById('slider');
	var SliderPercentObj = document.getElementById('slider-percent');

	//exeption: loading frame before page loads
	if( !ImageLeft && !ImageTop && !ImageWidth && !ImageHeight ) {
		return false;
	}
	ImageObj.style.left = ImageLeft + "px";
	ImageObj.style.top = ImageTop + "px";
	ImageObj.width = ImageWidth;
	ImageObj.height = ImageHeight;
	PrevImageX = ImageLeft;
	PrevImageY = ImageTop;

	SliderObj.style.left = SliderLeft + "px";
	SliderPercentObj.innerHTML = "100%";
	PrevSliderX = SliderLeft;
	return false;
}

function updateScaleXY()
{
	var scaleStr = document.getElementById('slider-percent').innerHTML;
	scale = scaleStr.substring(0, scaleStr.length - 1 );
	
	x = PrevImageX - ImageLeft;
	y = PrevImageY - ImageTop;
}

document.onmousemove = MouseMove;
document.onmousedown = MouseClickDown;
document.onmouseup = MouseClickUp;