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;

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);
	hide_error('tools_error_1');
//	document.getElementById('tools_error').style.display = "none";
}

function MouseMove( e ) {
	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;
		}
	} 

	PrevCursorX = X;
	PrevCursorY = Y;
}

function MouseClickDown(e) {
	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) {
	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;


        document.getElementById("offsetx").value = PrevImageX;
        document.getElementById("offsety").value = PrevImageY;

	return false;
}

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

	if( ! SliderClicked ) { return true; } 
	if( ! SliderSheetWidth ) { 
		show_error( 'tools_error_1' );
		return true; 
	}
	if( ! SliderWidth ){ 
		show_error( 'tools_error_1' );
		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);

        document.getElementById("scale").value = percent;

}

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 DoResult() {
	var FrameidObj = document.getElementById('frameidp');
	if( FrameidObj.value == '0' ) {
		show_error( 'save_error_1' );
		return false;
	}

	var WaiterObj = document.getElementById('waiter_save');
	if( WaiterObj ) {
		WaiterObj.style.display = "block";
		setTimeout( 'document.getElementById("waiter_save_img").src = "http://www.retocafoto.comimg/design/uploading.gif"', 500 );
	}
	
	var SaveButtonObj = document.getElementById('save');
	SaveButtonObj.style.display = "none";
	
	var OffsetX = PrevImageX - ImageLeft;
	var OffsetY = PrevImageY - ImageTop;

	var SliderPercentObj = document.getElementById('slider-percent');	
	var Scale = parseInt( SliderPercentObj.innerHTML );

	var OffsetXObj = document.getElementById('offsetxp');
	var OffsetYObj = document.getElementById('offsetyp');
	var ScaleObj = document.getElementById('scalep');

	OffsetXObj.value = OffsetX;
	OffsetYObj.value = OffsetY;
	ScaleObj.value = Scale;

	var CaptionObj = document.getElementById('caption-text');
	var CaptionObjHidden = document.getElementById('caption-text_hidden');
	CaptionObjHidden.value = CaptionObj.value;

	return true;
}

function SelectCaptionColor( color_selected ) {
	var Colors = new Array('red','blue','green','darkorange','black');
	for( i in Colors ) {
		var CaptionColorObj = document.getElementById('caption-' + Colors[i]);
		if ( ! CaptionColorObj ) continue;
		CaptionColorObj.className = '';
	}
	var CaptionColorObj = document.getElementById('caption-' + color_selected);
	CaptionColorObj.className = 'caption-select';

	var CaptionColorObjHidden = document.getElementById('caption-color_hidden');
	CaptionColorObjHidden.value = color_selected;

	return true;
}

function SelectCaptionAlign( align_selected ) {
	var Aligns = new Array('left','center','right');
	for( i in Aligns ) {
		var CaptionAlignObj = document.getElementById('caption-' + Aligns[i]);
		if( ! CaptionAlignObj ) continue;
		CaptionAlignObj.className = '';
	}

	var CaptionAlignObj = document.getElementById('caption-' + align_selected);
	CaptionAlignObj.className = 'caption-select';

	var CaptionAlignObjHidden = document.getElementById('caption-align_hidden');
	CaptionAlignObjHidden.value = align_selected;

	return true;
}

function SetCaptionItalic() {
	var CaptionItalicObj = document.getElementById('caption-italic');
	var CaptionItalicObjHidden = document.getElementById('caption-italic_hidden');

	if( CaptionItalicObj.checked ) {
		CaptionItalicObjHidden.value = '1';
	} else {
		CaptionItalicObjHidden.value = '';
	}

	return true;
}

window.onload = Init;
document.onmousemove = MouseMove;
document.onmousedown = MouseClickDown;
document.onmouseup = MouseClickUp;