var IMAGE = {};
IMAGE.UPLOAD = {};
IMAGE.UPLOAD = function(type, accept, id, fn){
	this._type = type || 'singel';
	this._accept = accept || '';
	this._id = id || 0;
	this._overTo;
	this._fn = fn || function(){};
	
	document.ondragstart=document.body.ondragstart=new Function("return false;");
	if(window._content)window._content.document.ondragstart=window._content.document.body.ondragstart=new Function("return false;");
	document.onselectstart=document.body.onselectstart=new Function("return false;");
}
IMAGE.UPLOAD.prototype = {
	init:function(id){
		var thisObj = this;
		
		this._field = $(id).get();

		$(this._field).addEvent('drop', function(e){var e=DOOMLIB.stopDefault(e); thisObj.drop(e, this);});
		$(this._field).addEvent('dragover', function(e){var e=DOOMLIB.stopDefault(e);thisObj.over(e, this);});
	},
	over:function(e, loc){
		var thisObj = this;
		loc.style.background="#f0f";
		window.clearTimeout(this._overTo);
		var fn = function(){
			thisObj.out(loc);
		}
		this._overTo = window.setTimeout(fn, 100);
		console.log('fff');
	},
	out:function(loc){
		loc.style.background="";
	},
	drop:function(e, loc){
		var dt = e.dataTransfer;
		var files = dt.files;
		for(var i=0; i<files.length;i++){
			this.previewImage(files[i]);
		}
		$(this._field).remove();
	},
	previewImage:function(file){
		var thisObj = this;
		var img = $('img').setAttribute('class', 'addImg').get();
		if(typeof FileReader=='function'){
			var reader = new FileReader();
			reader.onload = function(e){
				
				img.src = e.target.result;
			};
			reader.readAsDataURL(file); 
		}
		var wrapper = $('div').setAttribute('class', 'addImg').get();
		
		var save = function(ImgData){
			thisObj.fileUpload(file, ImgData);
		}
		$(wrapper).addEvent('click', function(){IEditor.init(img, save, file.type);});
		$(wrapper).append(img);
		$(this._field).before(wrapper);
	},
	fileUpload:function(file, imgDate){
		var thisObj = this;
		var xhr = new XMLHttpRequest();
		
		var fd = new FormData;
		fd.append("File", file);
		fd.append("id", this._id);
		fd.append("cropping", imgDate.cropping);
		fd.append("xoffset", imgDate.cropOffsetLeft);
		fd.append("yoffset", imgDate.cropOffsetTop);
		fd.append("widthOffset", imgDate.cropOffsetWidth);
		fd.append("heightOffset", imgDate.cropOffsetHeight);
		fd.append("cropWidth", imgDate.cropWidth);
		fd.append("cropHeight", imgDate.cropHeight);
		fd.append("scale", imgDate.scale);
		fd.append("filetype", imgDate.fileType);
		
		$(xhr).addEvent('readystatechange', function(e){
			if(this.readyState==4 && this.status==200){
				thisObj._fn(this.responseText);
				IEditor.close();
			}
		});
		xhr.open("POST", PR+'/standalone/fileUploadJS.php');
		xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
		xhr.send(fd);
	}
}
IMAGE.EDIT= function(){
	var thisObj = this;
	this._elem = $('div').setAttribute('class', 'iCreator').get();
	this._lb = $('div').setAttribute('class', 'iLb').get();
	
	this._fieldset = $('fieldset').setAttribute('class', 'typeset').get();
	
	var body = document.getElementsByTagName('body')[0];
	$(this._lb).addEvent('click', function(){thisObj.close();})
	$(body).append(this._lb);
	$(body).append(this._elem);
	this._ImgData = {};
	
	this._keys={};
	
	this._zoom = 8;
	this._zoomFaktoren = [0.0714, 0.0833, 0.125, 0.167, 0.25, 0.3333, 0.5, 0.66, 1, 2, 3, 4, 5, 6];
	
	this._zi = function(e){thisObj.zoomIn(e)};
	this._zo = function(e){thisObj.zoomOut(e)};
	this._mm = function(e){thisObj.dragImage(e)};
	
	this._cropTool = {'left':0, 'top':0, 'width':100, 'height':100};
	this._cropping = 0;
	this._isCropping = 0;
	
	this._startDragX = 0;
	this._startDragY = 0;
	this._startWidth = 0;
	this._startHeight = 0;
	this._Startmm = function(e){
		thisObj._startDragX=thisObj._startDragY=0;
		
		$(window).addEvent('mousemove',thisObj._mm);
		$(window).addEvent('mouseup',function(){
			$(window).removeEvent('mousemove',thisObj._mm);
		});
	};
	
	
}
IMAGE.EDIT.prototype={
	init:function(img, save, type){
		var thisObj = this;
		this._ImgData.fileType = type.substring(type.lastIndexOf('/')+1);
		this._ImgData.src=img.src;
		this._ImgData.cropping = thisObj._isCropping;
		this._ImgData.cropHeight = 100;
		this._ImgData.cropWidth = 100
		this._save = save || function(){};
		
		this.createWind();
		this.open();
		
		$(document).addEvent('keydown', function(e){
			if(typeof thisObj._keys[e.keyCode]=='undefined'){
				thisObj._keys[e.keyCode] = true;
				thisObj.checkKeys(e);
				return false;
			}
		});

		$(document).addEvent('keyup', function(e){
			delete thisObj._keys[e.keyCode];
			thisObj.checkKeys(e);
			return false;
		});
		//this.checkCrop();
	},
	checkKeys:function(e){
		var thisObj = this;
		
		
		$(this._elem).removeEvent('click', this._zi);
		$(this._elem).removeEvent('click', this._zo);
		$(this._elem).removeEvent('mousedown', this._Startmm);
		
		if(typeof this._keys['32']!='undefined' && typeof this._keys['18']!='undefined'){
			var e=DOOMLIB.stopDefault(e);
			$(this._elem).addEvent('click', this._zi);
			$(this._elem).setStyle('cursor', 'w-resize');
		}else if(typeof this._keys['32']!='undefined' && typeof this._keys['224']!='undefined'){
			var e=DOOMLIB.stopDefault(e);
			$(this._elem).addEvent('click', this._zo);
			$(this._elem).setStyle('cursor', 'e-resize');
		}else if(typeof this._keys['32']!='undefined'){
			var e=DOOMLIB.stopDefault(e);
			$(this._elem).addEvent('mousedown', this._Startmm);
			$(this._elem).setStyle('cursor', 'move');
		}else{
			$(this._elem).setStyle('cursor', 'default');
		}
	},
	createWind:function(){
		var thisObj = this;
		$(this._elem).empty();
		
		this._admin = $('div').setAttribute('class', 's4wNumAdmin').get();
		$(this._elem).append(this._admin);
		
		this._zoomField = $('div').setAttribute('class', 'zoomField').get();
		$(this._elem).append(this._zoomField);
		this.zoomField();
		
		this._canvas = $('div').setAttribute('class', 's4wCanvas').get();
		this._crop = $('div').setAttribute('class', 'crop').get();
		this.cropBorder();
		
		var img = $('img').get();
		this._ImgData.elem=img;
		var image = new Image();
		$(image).addEvent('load', function(){
			
			thisObj._ImgData.oHeight = thisObj._cropTool.height = thisObj._ImgData.cropHeight = thisObj._ImgData.height = this.height;
			thisObj._ImgData.oWidth = thisObj._cropTool.width = thisObj._ImgData.cropHeight = thisObj._ImgData.width = this.width; 
			img.src = this.src;
			
			thisObj.createSave();
			//thisObj.checkCrop();
			thisObj.refresh();
		});
		image.src = this._ImgData.src;
		
		$(this._canvas).append(img);
		$(this._canvas).append(this._crop);
		$(this._elem).append(this._canvas);
	},
	zoomField:function(){
		$(this._zoomField).empty();
		$(this._zoomField).append((this._zoomFaktoren[this._zoom]*100)+'%');
	},
	cropBorder:function(){
		var thisObj = this;
		var move = function(e){
			thisObj.checkCrop(e);
		}
		$(this._crop).setStyle('display', 'none').setStyle('left', this._cropTool.left+'px').setStyle('top', this._cropTool.top+'px').setStyle('width', this._cropTool.width+'px').setStyle('height', this._cropTool.height+'px');
		$(this._crop).addEvent('mousedown', function(e){
			var cn = e.target.className;
			/*if(cn=='dotLT' || cn=='dotT' || cn=='dotRT' || cn=='dotR' || cn=='dotRB' || cn=='dotB' || cn=='dotLB' || cn=='dotL'){*/
				thisObj._cropping=e.target;
				
				thisObj._startDragX = e.clientX;
				thisObj._startDragY = e.clientY;
				
				thisObj._startX =  parseInt(DOOMLIB.getStyle(this, 'left'));
				thisObj._startY =  parseInt(DOOMLIB.getStyle(this, 'top'));
				
				thisObj._startWidth = parseInt(DOOMLIB.getStyle(this, 'width'));
				thisObj._startHeight = parseInt(DOOMLIB.getStyle(this, 'height'));
				
				$(window).addEvent('mousemove', move);
				$(window).addEvent('mouseup', function(){
					$(window).removeEvent('mousemove', move);
					thisObj._cropping = 0;
				});
			//}
		}).empty();
		$(this._crop).append($('div').setAttribute('class', 'dotLT').get());
		$(this._crop).append($('div').setAttribute('class', 'dotT').get());
		$(this._crop).append($('div').setAttribute('class', 'dotRT').get());
		$(this._crop).append($('div').setAttribute('class', 'dotR').get());
		$(this._crop).append($('div').setAttribute('class', 'dotRB').get());
		$(this._crop).append($('div').setAttribute('class', 'dotB').get());
		$(this._crop).append($('div').setAttribute('class', 'dotLB').get());
		$(this._crop).append($('div').setAttribute('class', 'dotL').get());
	},
	cropDragPoints:function(style){
		var set = 'block';
		if(this._ImgData.cropWidth!='' && this._ImgData.cropHeight!='') 
			set = 'none';
		console.log(set);
		$(this._crop.getElementsByClassName('dotLT')[0]).setStyle('display', set);
		$(this._crop.getElementsByClassName('dotT')[0]).setStyle('display', set);
		$(this._crop.getElementsByClassName('dotRT')[0]).setStyle('display', set);
		$(this._crop.getElementsByClassName('dotR')[0]).setStyle('display', set);
		$(this._crop.getElementsByClassName('dotB')[0]).setStyle('display', set);
		$(this._crop.getElementsByClassName('dotLB')[0]).setStyle('display', set);
		$(this._crop.getElementsByClassName('dotL')[0]).setStyle('display', set);
	},
	checkCrop:function(e){
		
		var cn = this._cropping.className;

		
		var snapping = 5;
		
		var divDragX = e.clientX-this._startDragX;
		var divDragY = e.clientY-this._startDragY;
		
				
		var width = Math.round(this._startWidth+divDragX)/this._zoomFaktoren[this._zoom];
		
		if((this._ImgData.cropWidth!='') && (this._ImgData.cropHeight!=''))
			var height = width*(this._ImgData.cropHeight/this._ImgData.cropWidth);
		else
			var height = (Math.round(this._startHeight+divDragY)/this._zoomFaktoren[this._zoom]);

		var left = Math.round(this._startX+divDragX)/this._zoomFaktoren[this._zoom]-this._ImgData.xOffset/this._zoomFaktoren[this._zoom];
		var top = Math.round(this._startY+divDragY)/this._zoomFaktoren[this._zoom]-this._ImgData.yOffset/this._zoomFaktoren[this._zoom];
		
		

		if((cn=='dotRB' || cn=='dotR' || cn=='dotRT') && this._startWidth+e.clientX-this._startDragX>10){
			this._cropTool.width = width;
			$(this._cropping.parentNode).setStyle('width',(this._cropTool.width*this._zoomFaktoren[this._zoom])+'px');
		}
		
		if((cn=='dotRB' || cn=='dotB' || cn=='dotLB') && this._startHeight+e.clientY-this._startDragY>10){
			this._cropTool.height = height;
			$(this._cropping.parentNode).setStyle('height', (this._cropTool.height*this._zoomFaktoren[this._zoom])+'px');
		}
		
		if((cn=='dotL' || cn=='dotLT' || cn=='dotLB')){
			
			this._cropTool.left = left<snapping && left>-snapping?0:left;
			this._cropTool.width = width-(divDragX)*2;
			
			$(this._cropping.parentNode).setStyle('left', (this._cropTool.left*this._zoomFaktoren[this._zoom]+this._ImgData.xOffset)+'px');	
			$(this._cropping.parentNode).setStyle('width', (this._cropTool.width*this._zoomFaktoren[this._zoom])+'px');
		}
		
		if((cn=='dotT' || cn=='dotLT' || cn=='dotRT')){

			this._cropTool.top = top<snapping && top>-snapping?0:top;
			this._cropTool.height = height-(divDragY)*2;
			
			$(this._cropping.parentNode).setStyle('top', (this._cropTool.top*this._zoomFaktoren[this._zoom]+this._ImgData.yOffset)+'px');
			$(this._cropping.parentNode).setStyle('height', (this._cropTool.height*this._zoomFaktoren[this._zoom])+'px');
			
		}
		if(cn=='crop'){
			this._cropTool.top = top<snapping && top>-snapping?0:top;
			this._cropTool.left = left<snapping && left>-snapping?0:left;
			
			$(this._cropping).setStyle('left', (this._cropTool.left*this._zoomFaktoren[this._zoom]+this._ImgData.xOffset)+'px');
			$(this._cropping).setStyle('top', (this._cropTool.top*this._zoomFaktoren[this._zoom]+this._ImgData.yOffset)+'px');
		}

		
		$(this._oxCrop).empty();
		$(this._oxCrop).append('X-Offset: '+this._cropTool.left+' Pixel');
		$(this._oyCrop).empty()
		$(this._oyCrop).append('Y-Offset: '+this._cropTool.top+' Pixel');
		//$(this._widthCrop).setAttribute('value', this._cropTool.width);
		//$(this._heightCrop).setAttribute('value', this._cropTool.height);
		
		this._ImgData.cropOffsetLeft = this._cropTool.left;
		this._ImgData.cropOffsetTop = this._cropTool.top;
		this._ImgData.cropOffsetWidth = this._cropTool.width;
		this._ImgData.cropOffsetHeight = this._cropTool.height;
		
		
		this._ImgData.scale = this._ImgData.cropOffsetWidth/this._ImgData.oWidth;
	},
	open:function(){
		$(this._elem).setStyle('display', 'block');
		$(this._lb).setStyle('display', 'block');
	},
	close:function(){
		$(this._elem).setStyle('display', 'none');
		$(this._lb).setStyle('display', 'none');
	},
	zoomIn:function(e){
		if(this._zoom>0)
			this._zoom = this._zoom-1;
		this.zoomField();
		this.refresh(e);
	},
	zoomOut:function(e){
		if(this._zoom<this._zoomFaktoren.length-1)
			this._zoom = this._zoom+1;
		this.zoomField();
		this.refresh(e);
	},
	dragImage:function(e){
		if(this._startDragX==0){
			this._startDragX = e.clientX;
			this._startDragY = e.clientY;
			this._scrollLeft = this._canvas.scrollLeft;
			this._scrollTop = this._canvas.scrollTop;
		}else{
			var xpc = (this._startDragX-e.clientX)*100/this._ImgData.zWidth;
			var scrollX = xpc*this._canvas.scrollWidth/100;
			this._canvas.scrollLeft=this._scrollLeft+scrollX;
			
			var ypc = (this._startDragY-e.clientY)*100/this._ImgData.zHeight;
			var scrollY = ypc*this._canvas.scrollHeight/100;
			this._canvas.scrollTop=this._scrollTop+scrollY;
			
		}  
	},
	refresh:function(e){
		var nWidth = this._ImgData.zWidth = this._zoomFaktoren[this._zoom]*this._ImgData.oWidth;
		var nHeight = this._ImgData.zHeight = this._zoomFaktoren[this._zoom]*this._ImgData.oHeight;
		$(this._ImgData.elem).setStyle('width', nWidth+'px');
		$(this._ImgData.elem).setStyle('height', nHeight+'px');
		
		var yOffset = this._ImgData.yOffset = Math.max(parseInt(DOOMLIB.getFullHeight(this._canvas))/2-nHeight/2, 0);
		$(this._ImgData.elem).setStyle('top', yOffset+'px');
		
		var xOffset = this._ImgData.xOffset = Math.max(parseInt(DOOMLIB.getFullWidth(this._canvas))/2-nWidth/2, 0);
		$(this._ImgData.elem).setStyle('left', xOffset+'px');
		
		$(this._crop).setStyle('left', (xOffset+this._cropTool.left*this._zoomFaktoren[this._zoom])+'px').setStyle('top', (yOffset+this._zoomFaktoren[this._zoom]*this._cropTool.top)+'px').setStyle('width', this._zoomFaktoren[this._zoom]*this._cropTool.width+'px').setStyle('height', this._zoomFaktoren[this._zoom]*this._cropTool.height+'px');
		/*if(e.target.nodeName=='IMG'){
			var ypc = e.layerY*100/nHeight;
			var scrollY = ypc*this._canvas.scrollHeight/100+mTop*2;
			this._canvas.scrollTop=scrollY;
			
			console.log(e.layerY+'*100/'+nHeight);
			
			var xpc = e.layerX*100/nWidth;
			var scrollX = xpc*this._canvas.scrollWidth/100+mLeft*2;
			this._canvas.scrollLeft=scrollX;
		}*/
	},
	changePreferences:function(type){
		switch(type.value){
			case "gif":
				this.gifPref();
				return 'gif';
			case "jpeg":
				this.jpegPref();
				return 'jpg';
			case "png":
				this.pngPref();
				return 'png';
		}
	},
	createSave:function(){
		var thisObj = this;
		var form = $('form').get();
		$(form).append($('input').setAttribute('type', 'button').setAttribute('value', 'Upload').addEvent('click', function(){
			thisObj._save(thisObj._ImgData);
		}).get());
		$(form).append($('input').setAttribute('type', 'button').setAttribute('value', 'Abbrechen').addEvent('click', function(){
			thisObj.close();
		}).get());
		$(form).append($('input').setAttribute('type', 'button').setAttribute('value', 'Fertig').addEvent('click', function(){
			thisObj.close();
		}).get());
		
		var selection = $('select').setAttribute('name', 'fileType').addEvent('change', function(){
			thisObj._ImgData.fileType = thisObj.changePreferences(this);
			
		}).get();
		$(selection).append($('option').setAttribute('value', 'gif').append('GIF').get());
		$(selection).append($('option').setAttribute('value', 'jpeg').append('JPEG').get());
		$(selection).append($('option').setAttribute('value', 'png').append('PNG-24').get());
		$(form).append(selection);
		
		$(form).append(this._fieldset);
		
		var resize = $('fieldset').setAttribute('class', 'picSize').append($('legend').append('Info').get()).get();
		$(form).append(resize);
		
		var originsize = $('fieldset').append($('legend').append('Originalgröße').get()).get();
		var sizes = $('ol').append($('li').append('Breite: '+this._ImgData.oWidth+' Pixel').get()).append($('li').append('Höhe: '+this._ImgData.oHeight+' Pixel').get()).get();
		$(originsize).append(sizes);
		$(resize).append(originsize);
		
		this._newnsize = $('fieldset').append($('legend').append('Neue Größe').get()).get();
		this._oxCrop = $('li').append('X-Offset: '+this._cropTool.left+' Pixel').get();
		this._oyCrop = $('li').append('Y-Offset: '+this._cropTool.top+' Pixel').get();
		var sizes = $('ol').append(this._oxCrop).append(this._oyCrop).get();
		$(this._newnsize).append(sizes);
		$(resize).append(this._newnsize);
		
		this.cropfield = $('fieldset').setAttribute('class', 'cropField').append($('legend').append('Cropping').get()).get();
		
		$(form).append(this.cropfield);
		this.setCropField();
		
		$(this._admin).append(form);
	},
	setCropField:function(){
		var thisObj = this;
		$(this.cropfield).empty();
		
		
		var cropInput = $('div').setStyle('display', 'none').get();
		/*this._oxCrop = $('input').setAttribute('type', 'text').setAttribute('value', this._cropTool.left).get();
		this._cwidth = $('li').append($('label').setAttribute('type', 'text').append('offset x: ').get()).append(this._oxCrop).append(' Pixel').get();
		$(cropInput).append(this._cwidth);
		this._oyCrop = $('input').setAttribute('type', 'text').setAttribute('value', this._cropTool.top).get();
		this._cwidth = $('li').append($('label').setAttribute('type', 'text').append('offset y: ').get()).append(this._oyCrop).append(' Pixel').get();
		$(cropInput).append(this._cwidth);*/
		this._widthCrop = $('input').setAttribute('type', 'text').setAttribute('value', this._ImgData.oWidth).addEvent('keyup', function(){
			this.value = thisObj._ImgData.cropWidth = this.value.replace(/\D+/, '');
			
			thisObj._heightCrop.value = thisObj._ImgData.cropHeight = thisObj._ImgData.oHeight*this.value/thisObj._ImgData.oWidth;
			
			if(thisObj._ImgData.cropWidth!='' && thisObj._ImgData.cropHeight!='')
				thisObj.cropDragPoints();
			else
				thisObj.cropDragPoints();
		}).get();
		this._cwidth = $('li').append($('label').setAttribute('type', 'text').append('Breite: ').get()).append(this._widthCrop).append(' Pixel').get();
		$(cropInput).append(this._cwidth);
		
		this._heightCrop = $('input').setAttribute('type', 'text').setAttribute('value', this._ImgData.oHeight).addEvent('keyup', function(){
			this.value = thisObj._ImgData.cropHeight = this.value.replace(/\D+/, '');
			if(thisObj._ImgData.cropWidth!='' && thisObj._ImgData.cropHeight!='')
				thisObj.cropDragPoints("hide");
			else
				thisObj.cropDragPoints();
		}).get();
		this._cwidth = $('li').append($('label').setAttribute('type', 'text').append('Höhe: ').get()).append(this._heightCrop).append(' Pixel').get();
		$(cropInput).append(this._cwidth);
		
		$(cropInput).append($('input').setAttribute('type', 'button').setAttribute('value', 'Löschen').addEvent('click', function(e){
			thisObj._widthCrop.value = thisObj._ImgData.cropWidth = thisObj._heightCrop.value = thisObj._ImgData.cropHeight = '';
			thisObj.cropDragPoints();
		}).get());

		var copBut = $('legend').append('crop').addEvent('click', function(){
			if(thisObj._isCropping==1){
				$(thisObj._crop).setStyle('display', 'none');
				$(cropInput).setStyle('display', 'none');
				thisObj._isCropping=0;
				thisObj.cropDragPoints();
			}else if(thisObj._isCropping==0){
				$(thisObj._crop).setStyle('display', 'block');
				$(cropInput).setStyle('display', 'block');
				thisObj._isCropping=1;
				thisObj.cropDragPoints();
			}
			thisObj._ImgData.cropping = thisObj._isCropping;
		}).get();
		$(this.cropfield).append(copBut);
		
		$(this.cropfield).append(cropInput);
	},
	gifPref:function(){
		$(this._fieldset).empty();
		$(this._fieldset).append($('legend').append('Vorgaben: GIF').get());
		$(this._fieldset).append($('input').setAttribute('type', 'checkbox').get()).append('Transparenz');
	},
	jpegPref:function(){
		$(this._fieldset).empty();
		$(this._fieldset).append($('legend').append('Vorgaben: JPEG').get());
		
		var selection = $('select').setAttribute('name', 'quality').get();
		$(selection).append($('option').setAttribute('value', '80').append('80').get());
		$(selection).append($('option').setAttribute('value', '85').append('85').get());
		$(selection).append($('option').setAttribute('value', '90').append('90').get());
		$(selection).append($('option').setAttribute('value', '95').append('95').get());
		$(selection).append($('option').setAttribute('selected', 'selected').setAttribute('value', '100').append('100').get());
		$(this._fieldset).append('Qualit�t: ').append(selection);
		
	},
	pngPref:function(){
		$(this._fieldset).empty();
		$(this._fieldset).append($('legend').append('Vorgaben: PNG-24').get());
		$(this._fieldset).append($('input').setAttribute('type', 'checkbox').get()).append('Transparenz');
	}
}