var selection_height = 200;
var selection_width = 200;
var hWidth, bWidth,  imageWidth, imageHeight, cropperobj,sliderobj,BoxScale;

function LightWindow(windowtype,url,title,lightboxwidth,lightboxheight,top,left,imgname) 
{
	if (windowtype == 'static')
	{
		myLightWindow.activateWindow({
			href: url,
			title : title,
			showImages : null,
			height : lightboxheight,
			width : lightboxwidth,
			top : top,
			left : left
		});
	}	
	if (windowtype == 'dynamic')
	{
		var _x = $('x1').value;
        var _y = $('y1').value;		
		var _w = $('newwidth').value;
        var _h = $('newheight').value;
		var _cw = $('imgWidth').value;
 		var _ch = $('imgHeight').value;
		url = "make.html?imgname="+imgname+"&params="+parseInt(_x)+','+parseInt(_y)+','+ parseInt(_w)+','+parseInt(_h)+','+ parseInt(_cw)+','+parseInt(_ch);
		//var lightboxwidth = ((_w/10*10)+325);
		var lightboxheight = ((_h/10*10)+300);
		myLightWindow.activateWindow({
			href: url,
			title : title,
			showImages : null,
			height : lightboxheight,
			width : lightboxwidth,
			top : top,
			left : left
		});


	}	
}

function getCoords(){
	var image_height = $('myImage').offsetHeight;
	var image_width = $('myImage').offsetWidth;
	if(image_height < selection_height+5)
		selection_height = Math.ceil(image_height*.8);
	if(image_width < selection_width+5)
		selection_width = Math.ceil(image_width*.8);
	var coord = new Array();
	x1=(image_width-selection_width)/2;
	x2=(image_width-selection_width)/2+selection_width;
	y1=(image_height-selection_height)/2;
	y2=(image_height-selection_height)/2+selection_height;
	if (y1 > Math.ceil(image_height*.06))
	{
		yoffset = y1-(Math.ceil(image_height*.06));
		y1 = y1-yoffset;
		y2 = y2-yoffset;
	}
	$('x1').value = x1;
	$('x2').value = x2;
	$('y1').value = y1;
	$('y2').value = y2;
	return coord;
}

function setBgPos(v) {
	
	SRangeStart = sliderobj.range.start;
	SliderPercentValue = Math.round(v/BoxScale * 100);
	Rp = 100-(SRangeStart/BoxScale*100);
	Rd = Math.round(SRangeStart/BoxScale*100/Rp*100)/100;
	diff = Math.round((100-SliderPercentValue)*Rd);
	Pr = (diff/100)*BoxScale; 
	vR = v-Pr;
	var off = (vR/BoxScale * hWidth)-3;
	var pos = -bWidth + (vR/BoxScale * bWidth);
	$('slider').setStyle({backgroundPosition: Math.round(pos - off) + 'px'});
}

function setSlideOutput(v) {

	SRangeStart = sliderobj.range.start;
	SliderPercentValue = Math.floor(v/BoxScale * 100);
	Rp = 100-(SRangeStart/BoxScale*100);
	Rd = Math.floor(SRangeStart/BoxScale*100/Rp*100)/100;
	diffValue = SliderPercentValue - (Math.floor((100-SliderPercentValue)*Rd));
	if(diffValue < 0)
		diffValue = 0;
	$('percent').update(diffValue + '%');
	
}

function setSliderValuePlus(slider) {
	
		currentValue = slider.value;
		slider.setValue(currentValue+50);
}

function setSliderValueMinus(slider) {
	
		currentValue = slider.value;
		slider.setValue(currentValue-50);
}

function CropperSetting(v){
	
	x_1= $('x1').value;
	x_2= $('x2').value;
	y_1= $('y1').value;
	y_2= $('y2').value;
		
	var image_Width = $('myImage').getWidth();
	var image_Height = $('myImage').getHeight();
		
	if(x_2 > image_Width){
		diff_Width = x_2-image_Width;
		x_1 = x_1-diff_Width;
		x_2 = x_2-diff_Width;
	}
	
	if(y_2 > image_Height){
		diff_Height = y_2-image_Height;
		y_1 = y_1-diff_Height;
		y_2 = y_2-diff_Height;
	}
	
	if(y_1<0)
		y_1 = 0;
	if(x_1<0)
		x_1 = 0;	
	
	$(cropperobj.north).setStyle({ height:y_1 + 'px', width:image_Width + 'px' });
	$(cropperobj.east).setStyle({ top:y_1 + 'px', width:image_Width-x_2 + 'px', height:y_2-y_1 + 'px', left:x_2 + 'px'});
	$(cropperobj.south).setStyle({ height:image_Height-y_2 + 'px', width:image_Width + 'px', top:y_2 + 'px' });
	$(cropperobj.west).setStyle({ top:y_1 + 'px', width:x_1 + 'px', height:y_2-y_1 + 'px'});
	$(cropperobj.selArea).setStyle({ left:x_1  + 'px', top:y_1 + 'px' });
	 
	cropperobj.imgW = image_Width;
	cropperobj.imgH = image_Height;
	$('imgWidth').value = image_Width;
	$('imgHeight').value = image_Height;
	
	cropperobj.areaCoords.x1 = x_1; 
	cropperobj.areaCoords.x2 = x_2;
	cropperobj.areaCoords.y1 = y_1;
	cropperobj.areaCoords.y2 = y_2;
}

function lessThan25Width(){ 
	
	if($('newwidth').value < 25 && $('newwidth').value != ''){
		$('valueDownWidth').show();
	}
}

function lessThan25Height(){ 

	if($('newheight').value < 25 && $('newheight').value != ''){
		$('valueDownHeight').show();
	}
	
}

function ValidateNumeric(evt){

		evt = (evt) ? evt : ((event) ? event : null);
		if (window.event){
			keyCode= evt.keyCode;	
		}else{
			keyCode= evt.which;	
		}
		if(keyCode == 27){
			return false;
		}
		if  (!((keyCode >=48 && keyCode <= 57) || keyCode <= 31))
					return false;
}

function HandleEscape(evt){
		evt = (evt) ? evt : ((event) ? event : null);
		if (window.event){
			keyCode= evt.keyCode;	
		}else{
			keyCode= evt.which;	
		}
		if(keyCode == 27){
			return false;
		}
}

function updateCroperBoxWidth(obj) {
		
		if(obj.value == '')
			$('valueDownWidth').hide();
		x_1= $('x1').value;
		x_1= (x_1*10/10);
		var image_Width = $('myImage').getWidth();
		x_2 =  obj.value;
		x_2 =  (x_2*10/10);
		changeWidth = x_1+x_2;
				
		if(obj.value < 25){
			setTimeout("lessThan25Width()", 3000);
			return false;
		}
		
		
		if(obj.value > image_Width-x_1){
			
			$('valueUpWidth').show();
			return false;
		}
		$('Boxeast').setStyle({  width:image_Width-changeWidth + 'px', left:changeWidth + 'px' });
		$('BoxArea').setStyle({ width:x_2  + 'px' });
		$('handleTop').setStyle({ left:x_2/2  + 'px' });
		$('handleBottom').setStyle({ left:x_2/2  + 'px' });
		$('valueUpWidth').hide();
		$('valueDownWidth').hide();
		cropperobj.areaCoords.x2 = changeWidth;
		cropperobj.endCrop()
}

function updateCroperBoxHeight(obj) {

		if(obj.value == '')
			$('valueDownHeight').hide();
		y_1= $('y1').value;
		y_1= (y_1*10/10);
		var image_Height = $('myImage').getHeight();
		y_2 =  obj.value;
		y_2 =  (y_2*10/10);
		changeHeight = y_1+y_2; 
		
		
		if(obj.value < 25){
			setTimeout("lessThan25Height()", 3000);
			return false;
		}
		if(obj.value > image_Height-y_1){
			
			$('valueUpHeight').show();
			return false;
		}
			
		$('Boxeast').setStyle({  height:y_2 + 'px' });
		$('BoxArea').setStyle({ height:y_2  + 'px' });
		$('Boxsouth').setStyle({ height:image_Height-changeHeight + 'px', top:changeHeight + 'px' });
		$('Boxwest').setStyle({  height:y_2 + 'px'});
		$('handleLeft').setStyle({ top:y_2/2  + 'px' });
		$('handleRight').setStyle({ top:y_2/2  + 'px' });
		$('valueUpHeight').hide();
		$('valueDownHeight').hide();
		cropperobj.areaCoords.y2 = changeHeight;
		cropperobj.endCrop();
}

function clear(){
	$('newwidth').value = $('width').value;
	$('newheight').value = $('height').value;
	$('valueUpHeight').hide();
	$('valueDownHeight').hide();
	$('valueUpWidth').hide();
	$('valueDownWidth').hide();
	$('validWidth').hide();
	$('validHeight').hide();

}

function onEndCrop( coords, dimensions ) {

	
	$('x1').value = coords.x1;
	$('y1').value = coords.y1;
	$('x2').value = coords.x2;
	$('y2').value = coords.y2;
		
	$('width').value = dimensions.width;
	$('height').value = dimensions.height;
	$('CropperBoxWidth').value = dimensions.width;
	$('CropperBoxHeight').value = dimensions.height;
	var RangeWidthWise = coords.x2 - coords.x1;
	var RangeHeightWise = coords.y2 - coords.y1;
	var image_Width = $('myImage').getWidth();
	var image_Height = $('myImage').getHeight();
	var diff =  image_Width - image_Height;
	wRange = RangeWidthWise/imageWidth*imageHeight;
	if(sliderobj){
		if(wRange > RangeHeightWise ){
			sliderobj.range.start = RangeWidthWise;
		}else{
			sliderobj.range.start = RangeHeightWise/imageHeight*imageWidth;
		}
	}
}

function initSlider() 
{
		hWidth = $('slider-handle').getWidth();
		bWidth = $('slider-bar').getWidth();
		
		box = $('myImage');
		imageWidth = box.getWidth();
		imageHeight = box.getHeight();
		$('imgWidth').value = imageWidth;
		$('imgHeight').value = imageHeight; 
		BoxScale = imageWidth;
		
		BoxRangeWidthWise = $('x2').value - $('x1').value;
		BoxRangeHeightWise = $('y2').value - $('y1').value;
		if(BoxRangeWidthWise > BoxRangeHeightWise )
			BoxRange = BoxRangeWidthWise;
		else
			BoxRange = BoxRangeHeightWise/imageHeight*imageWidth;
		
		sliderobj = new Control.Slider('slider-handle', 'slider-bar', {
		axis:'horizontal',
		range: $R(BoxRange, BoxScale),
		sliderValue: BoxScale,
		onSlide:  function(v) {
			setBgPos(v);
			clear();
			box.setStyle({ width: BoxScale*(v/BoxScale) + 'px'});
			CropperSetting(v);
		},
		
    	onChange: function(v) {
			setBgPos(v);
			box.setStyle({ width: BoxScale*(v/BoxScale) + 'px'});
			CropperSetting(v);
		}      
  });

setBgPos(sliderobj.value);
Event.observe('slider', 'mousewheel', function(e) {
sliderobj.setValueBy((Event.wheel(e)/20));
});
}

Event.observe( 
	window, 
	'load', 
	function() 
	{ 
		var coord = getCoords();
		cropperobj = new Cropper.Img( 
			'myImage',
			{
				onEndCrop: onEndCrop,
				minWidth:25,
				minHeight:25,
				displayOnInit: true,
				onloadCoords: { x1:$('x1').value, y1:$('y1').value, x2:$('x2').value, y2:$('y2').value }
			}
		)
		initSlider();
		clear();
	}
);