var CutImageClass = Class.create();
CutImageClass.prototype = {
	initialize: function(image_id , drag_div , width,height) {
		this.image_id = image_id;
		this.drag_div = drag_div;
		this.isOpera = navigator.userAgent.indexOf("Opera") != -1;
		this.height = height;
		this.width = width;
	},
	
	initDrag: function() {
		new DragDrop(this.drag_div , this.drag_div);
	},
	
	begin_cut_image: function(){
		var tmpPosition = Position.positionedOffset( $(this.image_id) );
		var image_x = tmpPosition[0];
		var image_y = tmpPosition[1];
		$(this.drag_div).style.position = "absolute";
		$(this.drag_div).style.left = image_x + "px";
		$(this.drag_div).style.top = image_y + "px";

		this.initDrag();
		this.change_preview();
	},
	
	end_cut_image: function(){
		var tmpPosition = this.get_cut_image_offset();
		document.getElementById("posx").value=tmpPosition[0];
		document.getElementById("posy").value=tmpPosition[1];
		//document.getElementById("leftViewId").innerHTML="left:" + tmpPosition[0];
		//document.getElementById("rightViewId").innerHTML="top:" + tmpPosition[1];
	},
	
	get_cut_image_offset: function(){
		var tmpPosition = Position.positionedOffset( $(this.image_id) );

		var image_x = tmpPosition[0];
		var image_y = tmpPosition[1];
		var div_x = parseInt( $(this.drag_div).style.left );
		var div_y = parseInt( $(this.drag_div).style.top );
		
		var x = div_x - image_x;
		var y = div_y - image_y;
		return [x , y];
	},
	
	change_preview: function(){
		var tmpPosition = this.get_cut_image_offset();
		var offset_x = tmpPosition[0];
		var offset_y = tmpPosition[1];
		
		var image_width = $(this.image_id).offsetWidth;
		var image_height = Element.getHeight(this.image_id);
		
		this.fix_bound(offset_x , offset_y , image_width , image_height);
		
		var preview_offset_x = image_width - offset_x;
		var preview_offset_y = image_height - offset_y;
		
		return [preview_offset_x , preview_offset_y];
	},
	
	fix_bound: function(offset_x , offset_y , image_width , image_height){
		if( offset_x < 0 ){
			$(this.drag_div).style.left = ( parseInt( $(this.drag_div).style.left ) - offset_x ) + 'px';
		}
		if( offset_y < 0 ){
			$(this.drag_div).style.top = ( parseInt( $(this.drag_div).style.top ) - offset_y ) + 'px';
		}
		if( offset_x > image_width - this.width ){
			$(this.drag_div).style.left = ( parseInt( $(this.drag_div).style.left ) - offset_x + image_width - this.width ) + 'px';
		}
		if( offset_y > image_height - this.height ){
			$(this.drag_div).style.top = ( parseInt( $(this.drag_div).style.top ) - offset_y + image_height - this.height ) + 'px';
		}
	}
}

function setImg(file)
{
	previewImage(file);
	//var srcImg = document.getElementById("cut_img");
	//srcImg.src = imgPath;
	document.getElementById("imageCutDiv").style.display="block";
	document.getElementById("imagePreviewDiv").style.display="block";
	
	CutImageUtil = new CutImageClass('cut_img','cut_div',width,height);
	CutImageUtil.begin_cut_image();
}

function changeImgSize()
{
	var obj = document.getElementById("cut_img");
	var wratio = obj.width/width;
	var hratio = obj.height/height;
	if(wratio<hratio)
	{
		obj.width = width;
	}
	else
	{
		obj.height = height;
	}
	CutImageUtil = new CutImageClass('cut_img','cut_div',width,height);
	CutImageUtil.begin_cut_image();
}

function start_Drag(){
	this.isDragging = false;
	return false;
}

function when_Drag(clientX , clientY){
	if (!this.isDragging){
		this.isDragging = true;
	}
	CutImageUtil.change_preview();
}

function end_Drag(){
	this.isDragging = false;
	return true;
}


function previewImage(file)
{
  var div = document.getElementById('imageDisplayDiv');
  if (file.files && file.files[0])
  {
    div.innerHTML ='<img id=cut_img>';
    var img = document.getElementById('cut_img');
    img.onload = function(){
    var rect = clacImgZoomParam(width, height, img.offsetWidth, img.offsetHeight);
    img.width  =  rect.width;
    img.height =  rect.height;
    //img.style.marginLeft = rect.left+'px';
    img.style.marginTop = rect.top+'px';
  }
  
  var reader = new FileReader();
  reader.onload = function(evt){img.src = evt.target.result;}
  reader.readAsDataURL(file.files[0]);
}
else//兼容IE
{
  var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
  file.select();
  var src = document.selection.createRange().text;
  div.innerHTML = '<img id=cut_img>';
  var img = document.getElementById('cut_img');
  img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
  var rect = clacImgZoomParam(width, height, img.offsetWidth, img.offsetHeight);
  status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
  div.innerHTML = "<div id=cut_img style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
}
}

function clacImgZoomParam( maxWidth, maxHeight, width, height )
{
  var param = {top:0, left:0, width:width, height:height};
  if( width>maxWidth || height>maxHeight )
  {
      rateWidth = width / maxWidth;
      rateHeight = height / maxHeight;
      if(rateWidth<rateHeight)
      {
          param.width = maxWidth;
          param.height = Math.round(height / rateWidth);
      }
      else
      {
          param.width = Math.round(width / rateHeight);
          param.height = maxHeight;
      }
  }
  
  param.left = 0;
  param.top = 0;
  return param;
}