var Drag=new Class(
{
	Implements:[Events,Options],
	options:{snap:1,unit:'px',grid:false,style:true,limit:false,handle:false,invert:false,preventDefault:false,modifiers:{x:'left',y:'top'}},
	initialize:function()
	{
		var params=Array.link(arguments,{'options':Object.type,'element':$defined});this.element=$(params.element);this.document=this.element.getDocument();this.setOptions(params.options||{});
		var htype=$type(this.options.handle);this.handles=((htype=='array'||htype=='collection')?$$(this.options.handle):$(this.options.handle))||this.element;this.mouse={'now':{},'pos':{}};
		this.value={'start':{},'now':{}};
		this.selection=(Browser.Engine.trident)?'selectstart':'mousedown';
		this.bound={
			start:this.start.bind(this),
			check:this.check.bind(this),
			drag:this.drag.bind(this),
			stop:this.stop.bind(this),
			cancel:this.cancel.bind(this),
			eventStop:$lambda(false)};
			this.attach()},attach:function(){this.handles.addEvent('mousedown',this.bound.start);return this},detach:function(){this.handles.removeEvent('mousedown',this.bound.start);return this},start:function(event){if(this.options.preventDefault)event.preventDefault();this.mouse.start=event.page;this.fireEvent('beforeStart',this.element);var limit=this.options.limit;this.limit={x:[],y:[]};for(var z in this.options.modifiers){if(!this.options.modifiers[z])continue;if(this.options.style)this.value.now[z]=this.element.getStyle(this.options.modifiers[z]).toInt();else this.value.now[z]=this.element[this.options.modifiers[z]];if(this.options.invert)this.value.now[z]*=-1;this.mouse.pos[z]=event.page[z]-this.value.now[z];if(limit&&limit[z]){for(var i=2;i--;i){if($chk(limit[z][i]))this.limit[z][i]=$lambda(limit[z][i])()}}}if($type(this.options.grid)=='number')this.options.grid={x:this.options.grid,y:this.options.grid};this.document.addEvents({mousemove:this.bound.check,mouseup:this.bound.cancel});this.document.addEvent(this.selection,this.bound.eventStop)},check:function(event){if(this.options.preventDefault)event.preventDefault();var distance=Math.round(Math.sqrt(Math.pow(event.page.x-this.mouse.start.x,2)+Math.pow(event.page.y-this.mouse.start.y,2)));if(distance>this.options.snap){this.cancel();this.document.addEvents({mousemove:this.bound.drag,mouseup:this.bound.stop});this.fireEvent('start',[this.element,event]).fireEvent('snap',this.element)}},drag:function(event){if(this.options.preventDefault)event.preventDefault();this.mouse.now=event.page;for(var z in this.options.modifiers){if(!this.options.modifiers[z])continue;this.value.now[z]=this.mouse.now[z]-this.mouse.pos[z];if(this.options.invert)this.value.now[z]*=-1;if(this.options.limit&&this.limit[z]){if($chk(this.limit[z][1])&&(this.value.now[z]>this.limit[z][1])){this.value.now[z]=this.limit[z][1]}else if($chk(this.limit[z][0])&&(this.value.now[z]<this.limit[z][0])){this.value.now[z]=this.limit[z][0]}}if(this.options.grid[z])this.value.now[z]-=((this.value.now[z]-this.limit[z][0])%this.options.grid[z]);if(this.options.style)this.element.setStyle(this.options.modifiers[z],this.value.now[z]+this.options.unit);else this.element[this.options.modifiers[z]]=this.value.now[z]}this.fireEvent('drag',[this.element,event])},cancel:function(event){this.document.removeEvent('mousemove',this.bound.check);this.document.removeEvent('mouseup',this.bound.cancel);if(event){this.document.removeEvent(this.selection,this.bound.eventStop);this.fireEvent('cancel',this.element)}},stop:function(event){this.document.removeEvent(this.selection,this.bound.eventStop);this.document.removeEvent('mousemove',this.bound.drag);this.document.removeEvent('mouseup',this.bound.stop);if(event)this.fireEvent('complete',[this.element,event])}});Element.implement({makeResizable:function(options){var drag=new Drag(this,$merge({modifiers:{x:'width',y:'height'}},options));this.store('resizer',drag);return drag.addEvent('drag',function(){this.fireEvent('resize',drag)}.bind(this))}});Drag.Move=new Class({Extends:Drag,options:{droppables:[],container:false,precalculate:false,includeMargins:true,checkDroppables:true},initialize:function(element,options){this.parent(element,options);this.droppables=$$(this.options.droppables);this.container=$(this.options.container);if(this.container&&$type(this.container)!='element')this.container=$(this.container.getDocument().body);var position=this.element.getStyle('position');if(position=='static')position='absolute';if([this.element.getStyle('left'),this.element.getStyle('top')].contains('auto'))this.element.position(this.element.getPosition(this.element.offsetParent));this.element.setStyle('position',position);this.addEvent('start',this.checkDroppables,true);this.overed=null},start:function(event){if(this.container){var ccoo=this.container.getCoordinates(this.element.getOffsetParent()),cbs={},ems={};['top','right','bottom','left'].each(function(pad){cbs[pad]=this.container.getStyle('border-'+pad).toInt();ems[pad]=this.element.getStyle('margin-'+pad).toInt()},this);var width=this.element.offsetWidth+ems.left+ems.right;var height=this.element.offsetHeight+ems.top+ems.bottom;if(this.options.includeMargins){$each(ems,function(value,key){ems[key]=0})}if(this.container==this.element.getOffsetParent()){this.options.limit={x:[0-ems.left,ccoo.right-cbs.left-cbs.right-width+ems.right],y:[0-ems.top,ccoo.bottom-cbs.top-cbs.bottom-height+ems.bottom]}}else{this.options.limit={x:[ccoo.left+cbs.left-ems.left,ccoo.right-cbs.right-width+ems.right],y:[ccoo.top+cbs.top-ems.top,ccoo.bottom-cbs.bottom-height+ems.bottom]}}}if(this.options.precalculate){this.positions=this.droppables.map(function(el){return el.getCoordinates()})}this.parent(event)},checkAgainst:function(el,i){el=(this.positions)?this.positions[i]:el.getCoordinates();var now=this.mouse.now;return(now.x>el.left&&now.x<el.right&&now.y<el.bottom&&now.y>el.top)},checkDroppables:function(){var overed=this.droppables.filter(this.checkAgainst,this).getLast();if(this.overed!=overed){if(this.overed)this.fireEvent('leave',[this.element,this.overed]);if(overed)this.fireEvent('enter',[this.element,overed]);this.overed=overed}},drag:function(event){this.parent(event);if(this.options.checkDroppables&&this.droppables.length)this.checkDroppables()},stop:function(event){this.checkDroppables();this.fireEvent('drop',[this.element,this.overed,event]);this.overed=null;return this.parent(event)}});Element.implement({makeDraggable:function(options){var drag=new Drag.Move(this,options);this.store('dragger',drag);return drag}});

var Slider=new Class({Implements:[Events,Options],Binds:['clickedElement','draggedKnob','scrolledElement'],
	options:
	{
		onTick:function(position)
		{
			if(this.options.snap)position=this.toPosition(this.step);
			this.knob.setStyle(this.property,position)
		},
		snap:false,
		offset:0,
		range:false,
		wheel:true,
		steps:100,
		mode:'vertical'
	},
	initialize:function(element,knob,options)
	{
		this.setOptions(options);
		this.element=$(element);
		this.knob=$(knob);
		this.previousChange=this.previousEnd=this.step=-1;
		var offset,limit={},modifiers={'x':false,'y':false};
		switch(this.options.mode)
		{
			case'vertical':this.axis='y';
			this.property='top';
			offset='offsetHeight';
			break;
			case'horizontal':this.axis='x';
			this.property='left';
			offset='offsetWidth'
		}
		this.half=this.knob[offset]/2;
		this.full=this.element[offset]-this.knob[offset]+(this.options.offset*2);
		this.min=$chk(this.options.range[0])?this.options.range[0]:0;this.max=$chk(this.options.range[1])?this.options.range[1]:this.options.steps;this.range=this.max-this.min;this.steps=this.options.steps||this.full;this.stepSize=Math.abs(this.range)/this.steps;this.stepWidth=this.stepSize*this.full/Math.abs(this.range);this.knob.setStyle('position','relative').setStyle(this.property,-this.options.offset);modifiers[this.axis]=this.property;limit[this.axis]=[-this.options.offset,this.full-this.options.offset];this.bound={clickedElement:this.clickedElement.bind(this),scrolledElement:this.scrolledElement.bindWithEvent(this),draggedKnob:this.draggedKnob.bind(this)};var dragOptions={snap:0,limit:limit,modifiers:modifiers,onDrag:this.bound.draggedKnob,onStart:this.bound.draggedKnob,onBeforeStart:(function(){this.isDragging=true}).bind(this),onComplete:function(){this.isDragging=false;this.draggedKnob();this.end()}.bind(this)};if(this.options.snap){dragOptions.grid=Math.ceil(this.stepWidth);dragOptions.limit[this.axis][1]=this.full}this.drag=new Drag(this.knob,dragOptions);this.attach()},attach:function(){this.element.addEvent('mousedown',this.bound.clickedElement);
		if(this.options.wheel)this.element.addEvent('mousewheel',this.bound.scrolledElement);
		this.drag.attach();return this},detach:function(){this.element.removeEvent('mousedown',this.bound.clickedElement);this.element.removeEvent('mousewheel',this.bound.scrolledElement);this.drag.detach();return this},set:function(step){if(!((this.range>0)^(step<this.min)))step=this.min;if(!((this.range>0)^(step>this.max)))step=this.max;this.step=Math.round(step);this.checkStep();this.fireEvent('tick',this.toPosition(this.step));this.end();return this},clickedElement:function(event){if(this.isDragging||event.target==this.knob)return;var dir=this.range<0?-1:1;var position=event.page[this.axis]-this.element.getPosition()[this.axis]-this.half;position=position.limit(-this.options.offset,this.full-this.options.offset);this.step=Math.round(this.min+dir*this.toStep(position));this.checkStep();this.fireEvent('tick',position);this.end()},scrolledElement:function(event){var mode=(this.options.mode=='horizontal')?(event.wheel<0):(event.wheel>0);this.set(mode?this.step-this.stepSize:this.step+this.stepSize);event.stop()},draggedKnob:function(){var dir=this.range<0?-1:1;var position=this.drag.value.now[this.axis];position=position.limit(-this.options.offset,this.full-this.options.offset);this.step=Math.round(this.min+dir*this.toStep(position));this.checkStep()},checkStep:function(){if(this.previousChange!=this.step){this.previousChange=this.step;this.fireEvent('change',this.step)}},end:function(){if(this.previousEnd!==this.step){this.previousEnd=this.step;this.fireEvent('complete',this.step+'')}},toStep:function(position){var step=(position+this.options.offset)*this.stepSize/this.full*this.steps;return this.options.steps?Math.round(step-=step%this.stepSize):step},toPosition:function(step){return(this.full*Math.abs(this.min-step))/(this.steps*this.stepSize)-this.options.offset}});var Asset={javascript:function(source,properties){properties=$extend({onload:$empty,document:document,check:$lambda(true)},properties);var script=new Element('script',{src:source,type:'text/javascript'});var load=properties.onload.bind(script),check=properties.check,doc=properties.document;delete properties.onload;delete properties.check;delete properties.document;script.addEvents({load:load,readystatechange:function(){if(['loaded','complete'].contains(this.readyState))load()}}).set(properties);if(Browser.Engine.webkit419)var checker=(function(){if(!$try(check))return;$clear(checker);load()}).periodical(50);return script.inject(doc.head)},css:function(source,properties){return new Element('link',$merge({rel:'stylesheet',media:'screen',type:'text/css',href:source},properties)).inject(document.head)},image:function(source,properties){properties=$merge({onload:$empty,onabort:$empty,onerror:$empty},properties);var image=new Image();var element=$(image)||new Element('img');['load','abort','error'].each(function(name){var type='on'+name;var event=properties[type];delete properties[type];image[type]=function(){if(!image)return;if(!element.parentNode){element.width=image.width;element.height=image.height}image=image.onload=image.onabort=image.onerror=null;event.delay(1,element,element);element.fireEvent(name,element,1)}});image.src=element.src=source;if(image&&image.complete)image.onload.delay(1);return element.set(properties)},images:function(sources,options){options=$merge({onComplete:$empty,onProgress:$empty},options);sources=$splat(sources);var images=[];var counter=0;return new Elements(sources.map(function(source){return Asset.image(source,{onload:function(){options.onProgress.call(this,counter,sources.indexOf(source));counter++;if(counter==sources.length)options.onComplete()}})}))}};
//-------------------------------------------------------------------
/*
var Waiter=new Class(
{
	Implements:[Options,Events,Chain],options:
	{
		baseHref:'http://www.cnet.com/html/rb/assets/global/waiter/',
		containerProps:
		{
			styles:{
			position:'absolute','text-align':'center'
			},
			'class':'waiterContainer'},containerPosition:{},msg:false,msgProps:{styles:{'text-align':'center',fontWeight:'bold'},'class':'waiterMsg'},img:{src:'waiter.gif',styles:{width:24,height:24},'class':'waiterImg'},layer:{styles:{width:0,height:0,position:'absolute',zIndex:999,display:'none',opacity:0.9,background:'#fff'},'class':'waitingDiv'},useIframeShim:true,fxOptions:{},injectWhere:null},initialize:function(target,options){this.target=$(target)||$(document.body);this.setOptions(options);this.waiterContainer=new Element('div',this.options.containerProps);if(this.options.msg){this.msgContainer=new Element('div',this.options.msgProps);this.waiterContainer.adopt(this.msgContainer);if(!$(this.options.msg))this.msg=new Element('p').appendText(this.options.msg);else this.msg=$(this.options.msg);this.msgContainer.adopt(this.msg)}if(this.options.img)this.waiterImg=$(this.options.img.id)||new Element('img').inject(this.waiterContainer);this.waiterOverlay=$(this.options.layer.id)||new Element('div').adopt(this.waiterContainer);this.waiterOverlay.set(this.options.layer);this.place(target);try{if(this.options.useIframeShim)this.shim=new IframeShim(this.waiterOverlay,this.options.iframeShimOptions)}catch(e){dbug.log("Waiter attempting to use IframeShim but failed; did you include IframeShim? Error: ",e);this.options.useIframeShim=false}this.waiterFx=this.waiterFx||new Fx.Elements($$(this.waiterContainer,this.waiterOverlay),this.options.fxOptions)},place:function(target,where){var where=where||this.options.injectWhere||target==document.body?'inside':'after';this.waiterOverlay.inject(target,where)},toggle:function(element,show){element=$(element)||$(this.active)||$(this.target);this.place(element);if(!$(element))return this;if(this.active&&element!=this.active)return this.stop(this.start.bind(this,element));if((!this.active||show)&&show!==false)this.start(element);else if(this.active&&!show)this.stop();return this},reset:function(){this.waiterFx.cancel().set({0:{opacity:[0]},1:{opacity:[0]}})},start:function(element){this.reset();element=$(element)||$(this.target);this.place(element);if(this.options.img){this.waiterImg.set($merge(this.options.img,{src:this.options.baseHref+this.options.img.src}))}var start=function(){var dim=element.getComputedSize();this.active=element;this.waiterOverlay.setStyles({width:this.options.layer.width||dim.totalWidth,height:this.options.layer.height||dim.totalHeight,display:'block'}).position({relativeTo:element,position:'upperLeft'});this.waiterContainer.position($merge({relativeTo:this.waiterOverlay},this.options.containerPosition));if(this.options.useIframeShim)this.shim.show();this.waiterFx.start({0:{opacity:[1]},1:{opacity:[this.options.layer.styles.opacity]}}).chain(function(){if(this.active==element)this.fireEvent('onShow',element);this.callChain()}.bind(this))}.bind(this);if(this.active&&this.active!=element)this.stop(start);else start();return this},stop:function(callback){if(!this.active){if($type(callback)=="function")callback.attempt();return this}this.waiterFx.cancel();this.waiterFx.clearChain();this.waiterFx.start({0:{opacity:[0]},1:{opacity:[0]}}).chain(function(){this.active=null;this.waiterOverlay.hide();if(this.options.useIframeShim)this.shim.hide();this.fireEvent('onHide',this.active);this.callChain();this.clearChain();if($type(callback)=="function")callback.attempt()}.bind(this));return this}});if(typeof Request!="undefined"&&Request.HTML){Request.HTML=Class.refactor(Request.HTML,{options:{useWaiter:false,waiterOptions:{},waiterTarget:false},initialize:function(options){this._send=this.send;this.send=function(options){if(this.waiter)this.waiter.start().chain(this._send.bind(this,options));else this._send(options);return this};this.previous(options);if(this.options.useWaiter&&($(this.options.update)||$(this.options.waiterTarget))){this.waiter=new Waiter(this.options.waiterTarget||this.options.update,this.options.waiterOptions);['onComplete','onException','onCancel'].each(function(event){this.addEvent(event,this.waiter.stop.bind(this.waiter))},this)}}})}Element.Properties.waiter={set:function(options){var waiter=this.retrieve('waiter');return this.eliminate('waiter').store('waiter:options',options)},get:function(options){if(options||!this.retrieve('waiter')){if(options||!this.retrieve('waiter:options'))this.set('waiter',options);this.store('waiter',new Waiter(this,this.retrieve('waiter:options')))}return this.retrieve('waiter')}};Element.implement({wait:function(options){this.get('waiter',options).start();return this},release:function(){var opt=Array.link(arguments,{options:Object.type,callback:Function.type});this.get('waiter',opt.options).stop(opt.callback);return this}});
*/			
//-------------------------------------------------------------------
var globalCropper;
var cropper = new Class({
	Implements: [Options], 
	options: 
	{
		title: "Click to edit image", 
		title_zoom: "Slide this to zoom", 
		title_rotate: "Slide this to rotate", 
		button_fitWidth: "Fit Width",
		button_fitHeight: "Fit height",
		button_cancel: "Reset postavki", 
		button_download: "&raquo; Download &laquo;", 
		callback: "/cropper/resize.php", 
		validation: true, 
		add_class: false, 
		zoom_adjust: false, 
		zoom_class: null, 
		rotate_adjust: false, 
		rotate_class: null, 
		crop: 0, 
		zoom: 1, 
		drag: 1, 
		rotate: 1, 
		debug: 0, 
		slider_visina: 250,
		slider_pomak: 30,	//offset lijevo, desno
		imageContainerID: null
	}, 
	objects: {}, 
	cropper: null, 
	canvas: null, 
	element: null, 
	element_size: {}, 
	ie: false, 
	initialize: function (element, options) 
	{
		//alert(element)
		var src = null;
		var id = cropper_id++;
		this.setOptions(options);
		this.element = element;
		if (Browser.Platform.win && Browser.Engine.trident)
		{
			this.ie = true;
		}
		if ((src = element.getProperty('src')) == null) 	//var imgProps = $('myImage').getProperty('src'); // returns: 'mootools.png'.
		{
			alert("nema slike! :"+src);
			this.log("!! element is not a image");
			return false;
		}
		element.setProperty("title", this.options.title).addClass("cropper_pointer");
		element.addEvent("click", function () 
		{
			if (this.options.debug != 1) 
			{
				//var waiter = (new Waiter(element)).start();
			}
			this.log(">> loading 'cropper" + id + "'");
			this.element_size = element.getSize();
			this.cropper = new Element("div", {id: "cropper" + id, 'class': 'kanc_zoom_rotate'});			
			globalCropper = this.cropper;
			//alert(globalCropper);
			var cropperVisina=this.element_size.y;
			var cropperSirina=this.element_size.x;			
			
			//-------------------------------------------------------------------------
			var imageContainer = $(this.options.imageContainerID);
				var imageContainerSize=imageContainer.getSize();
				var imageContainerHeight=imageContainerSize.y;
				var omjer=1;			
				var novaSirinaSlike=this.element_size.x;
				
 			if (imageContainerHeight > cropperVisina)
			{
				omjer=imageContainerHeight / cropperVisina;
				novaSirinaSlike=this.element_size.x * omjer;				
				var cropperVisina=imageContainerHeight;
					cropperSirina=novaSirinaSlike;
			}			
			this.cropper.setStyles(
			{
				position: "relative", 
				background: "#000", 
				width: cropperSirina + "px", 
				height: cropperVisina + "px"
			});							
			if (this.options.add_class != false)
			{
				this.cropper.addClass(this.options.add_class);
			}
			element.addClass("hide");
			this.cropper.injectAfter(element);
						
			//this.get_button("styles/cropper/icon_reset.gif", this.options.button_cancel).addEvent("click", this.reset.bind(this)).setStyle("left", "0px");
			
			this.log(">> creating canvas - w:"+this.element_size.x+", h:"+this.element_size.y+", nv:"+imageContainerHeight+", ns: "+novaSirinaSlike);	//glavni image canvas
			if (this.ie) {this.canvas = new cropper_vml({id: "cropper" + id + "_canvas", element: this.cropper});} 
			else {this.canvas = new cropper_svg({id: "cropper" + id + "_canvas", element: this.cropper});}			
			//this.canvas.create_image(src, 0, 0, this.element_size.x, this.element_size.y);			
			this.canvas.create_image(src, 0, 0, novaSirinaSlike, imageContainerHeight);			
			
			//IMAGE FIT OPTIONS------------------------------------------------------------------------
			var target_canvas=this.canvas;
			var target_canvas2=this.target;
			var testIE=this.ie;
					var imageSirina=cropperSirina;
					var imageVisina=cropperVisina;						
					var imageContainerSize=imageContainer.getSize();
					var imageContainerSirina=imageContainerSize.x;
					var imageContainerVisina=imageContainerSize.y;
			//-------FIT2WIDTH		
			this.get_button("styles/cropper/icon_accept.gif", this.options.button_fitWidth).addEvent("click", function(e)
			{				
				
				if (imageContainer != null)
				{
					//var target_canvas=e.canvas;
					var zoom=1;
					if (imageContainerSirina >= imageSirina)
						zoom=1;
					else if (imageContainerSirina <=imageSirina)
						zoom=(1/imageSirina) * imageContainerSirina;
					target_canvas.zoom(zoom);

					if (testIE) 
					{
						target_canvas.image.style.left=0;
						target_canvas.image.style.top=0;
					}
					else
					{
						target_canvas.image.setAttributeNS(null, "x", 0);
						target_canvas.image.setAttributeNS(null, "y", 0);
					}					
				}
				//var containerSirina=
			}).setStyle("right", "30px");
			//---------FIT2HEIGHT -----------------------------------------------------------------
			this.get_button("styles/cropper/icon_accept.gif", this.options.button_fitHeight).addEvent("click", function(e)
			{				
				if (imageContainer != null)
				{
					var zoom=1;
					if (imageVisina >= imageContainerVisina)
						zoom = (1/ imageVisina) * imageContainerVisina;
					else if (imageContainerVisina >= imageSirina)
						zoom = 1;					
					target_canvas.zoom(zoom);

					if (testIE) 
					{
						target_canvas.image.style.left=0;
						target_canvas.image.style.top=0;
					}
					else
					{
						target_canvas.image.setAttributeNS(null, "x", 0);
						target_canvas.image.setAttributeNS(null, "y", 0);
					}
					//this.image.setAttributeNS(null, "y", top);this.image.setAttributeNS(null, "x", left);this.image.setAttributeNS(null, "width", width);
				}
			}).setStyle("right", "120px");
			//--------------------------------------------------------------------------------------------	
			
			if (this.options.drag == 1) {this.log(">> adding drag manipulation");			
			if (this.ie) {this.objects.drag = this.canvas.vml;} else {this.objects.drag = this.canvas.svg;}this.objects.drag.addEvent("mousemove", function (e) 
			{	
				var e = new Event(e);
				e.stop();
				if (this.mousedown && this.canvas_target) 
				{
					var x = parseFloat(e.client.x - this.orix);
					var y = parseFloat(e.client.y - this.oriy);
					if (this.ie) 
					{
						this.canvas_target.style.top = this.img_y + y + ("px");
						this.canvas_target.style.left = this.img_x + x + ("px");
					} 
					else 
					{
						this.canvas_target.setAttributeNS(null, "transform", "translate(" + x + ", " + y + ") " + "rotate(" + this.angle + ", " + this.cx + ", " + this.cy + ")");
					}
				}
			}.bind(this));
			this.objects.drag.addEvent("mousedown", function (e) 
			{
				var e = new Event(e);
				e.stop();
				this.mousedown = true;
				this.canvas_target = e.target;
				this.orix = e.client.x;
				this.oriy = e.client.y;
				this.angle = this.canvas.angle;
				if (this.ie) 
				{
					this.img_y = this.canvas.image.style.top.toInt();
					this.img_x = this.canvas.image.style.left.toInt();
					this.cx = this.canvas.image.style.top.toInt() + this.canvas.image.style.width.toInt() / 2;
					this.cy = this.canvas.image.style.left.toInt() + this.canvas.image.style.height.toInt() / 2;
				} 
				else 
				{
					this.cx = this.canvas.image.getAttributeNS(null, "x").toInt() + this.canvas.image.getAttributeNS(null, "width").toInt() / 2;
					this.cy = this.canvas.image.getAttributeNS(null, "y").toInt() + this.canvas.image.getAttributeNS(null, "height").toInt() / 2;
				}
				this.objects.drag.addEvent("mouseleave", function () {this.mousedown = false;}.bind(this));
			}.bind(this));this.objects.drag.addEvent("mouseup", function (e) {var e = new Event(e);e.stop();
			
			if (this.mousedown) {this.mousedown = false;this.canvas.update();}}.bind(this));}
			if (this.options.zoom == 1) 
			{	
				this.log(">> adding zoom manipulation");
				this.get_slider
				(
					"z+", "z-", "left", 'cropper_zoom'+id, 
					this.options.title_zoom, 
					//this.element_size.y, 
					this.options.slider_visina,
					this.options.zoom_adjust, 
					this.options.zoom_class
				);
				//alert('cropper_zoom' + id + '_slider');
				this.objects.zoom = (new Slider($('cropper_zoom' + id + '_slider'),
				$("cropper_zoom" + id + "_knob"), 
				{
					steps: 50, 
					mode: "vertical",
					onChange: function (step) 
					{
						if (step == 50) 
						{
							step = 49;
						}
						if (step >= 40) 
						{
							step = 50 - step;
							fact = step / 10;
						} 
						else {
							fact = (50 - step) / 10;
						}
						this.canvas.zoom(fact);
						
						//var cropperVisina=this.img_y;
						//alert(fact);
						
					}.bind(this)
				})).set(40);
			}
			if (this.options.rotate == 1)
			{
				this.log(">> adding rotate manipulation");
				this.get_slider("&nbsp;0&deg;", "360&deg;", "right", "cropper_rotate" + id, 
				this.options.title_rotate, 
				//this.element_size.y, 
				this.options.slider_visina,
				this.options.rotate_adjust, 
				this.options.rotate_class);
				this.objects.rotate = (new Slider($("cropper_rotate" + id + "_slider"), 
				$("cropper_rotate" + id + "_knob"), 
				{
					steps: 360, 
					mode: "vertical", 
					onChange: function (angle) 
					{
						this.canvas.rotate(angle);
					}.bind(this)})).set(0);
			}
			if (this.options.crop == 1) 
			{
				this.log(">> adding crop manipulation");
				this.objects.crop = new cropper_crop(this);
			}
			if (this.options.debug != 1) 
			{
				//waiter.stop();
			}
		}.bind(this));
	}, 
	get_slider: function (index_t, index_b, pos, id, title, offset, adjust, cl) 
	{
		var minus_button="<div></div>";
		var container = new Element("div", {id: id, title: title});
		if (cl != null) {container.addClass(cl);} 
		else 
		{
			container.setStyles(
			{
				top: "5px", 
				width: "26px", 
				'text-align': "center", 
				//border: "0px solid #000", 
				'font-family': "Verdana, Sans-serif", 
				'font-size': "10px", 
				'font-weight': "bold"
			//	background: "#fff"
			});
		}
		container.setStyles({position: "absolute", 'z-index': "20"}).addEvents(
		{
			mouseenter: function () {container.set("opacity", 1);}, 
			mouseleave: function () {container.set("opacity", 0.8);}
		}).set("opacity", 0.8).setStyle(pos, this.options.slider_pomak).inject(this.cropper);
		
		var slider = (new Element("div", {id: id + "_slider"})).setStyles({cursor: "pointer", margin: "0", background: "url(styles/cropper/slider_v.png) repeat-y center"}).inject(container);
		if (adjust == false) {slider.setStyle("height", offset - 60 + "px");}
		var knob = (new Element("img", {id: id + "_knob", src: "styles/cropper/knob_v.png"})).inject(slider);
		var donja_slika = (new Element("img", {id: id + "_minus", src: "styles/cropper/slide_minus01.png"})).inject(container);
		var gornja_slika = (new Element("img", {id: id + "_plus", src: "styles/cropper/slide_plus01.png"})).setStyles({cursor: "pointer", margin: "0 0 -2px 0"}).injectBefore(slider);
		//(new Element("span")).set("html", index_t).injectBefore(slider);
		//(new Element("span")).set("html", index_b).inject(container);
	}, 
	get_button: function (src, txt) 
	{
		var button = (new Element("span")).setStyles({position: "absolute", bottom: "0px", height: "16px", 'line-height': "16px", background: "url(" + src + ") no-repeat #fff 2px 1px", color: "#000", border: "1px solid #000", 'font-weight': "bold", 'font-size': "11px", 'z-index': "20", 'font-family': "Verdana, Sans-serif", padding: "0px 6px 2px 18px", cursor: "pointer"}).addEvents({mouseenter: function () {button.set("opacity", 1);}, mouseleave: function () {button.set("opacity", 0.6);}}).set("opacity", 0.6).inject(this.cropper);return button.set("text", txt);}, validation: function () {var crop = {};var img = {};var rotate = 0;var zoom = 1;if (this.options.crop == 1) {var c = this.objects.crop.masks.c.getCoordinates();crop = {y: this.objects.crop.masks.c.getStyle("top").toInt(), x: this.objects.crop.masks.c.getStyle("left").toInt(), w: this.objects.crop.masks.c.getStyle("width").toInt(), h: this.objects.crop.masks.c.getStyle("height").toInt()};}if (this.options.rotate == 1) {rotate = this.canvas.angle;}if (this.options.zoom == 1) {zoom = this.canvas.fact;}if (this.ie) {img = {x: this.canvas.image.style.left, y: this.canvas.image.style.top, w: this.canvas.image.style.width, h: this.canvas.image.style.height, max_w: this.element_size.x, max_h: this.element_size.y};} else {img = {x: this.canvas.image.getAttributeNS(null, "x"), y: this.canvas.image.getAttributeNS(null, "y"), w: this.canvas.image.getAttributeNS(null, "width"), h: this.canvas.image.getAttributeNS(null, "height"), max_w: this.element_size.x, max_h: this.element_size.y};}if (this.options.debug != 1) {var waiter = (new Waiter(this.cropper)).start();}var json = JSON.encode({crop: crop, img: img, rotate: rotate, zoom: zoom, file: this.element.src});
		(new (Request.JSON)({url: this.options.callback, onSuccess: function (ret) {if (ret == undefined || ret.new_image == undefined) {return this.log("new_image undefined");}var style_w = this.cropper.getStyle("width");var style_h = this.cropper.getStyle("height");this.cropper.dispose();if (this.options.debug != 1) {waiter.stop();}if (this.options.validation != false) {return this.options.validation(this.cropper, this.element, ret.new_image);}var end = (new Element("div")).setStyles({background: "url(" + this.element.getProperty("src") + ") no-repeat", width: style_w, height: style_h}).injectAfter(this.element);var mask = (new Element("div")).setStyles({background: "#000", width: style_w, height: style_h}).addClass("cropper_download").setOpacity(".8").inject(end);mask.set("html", "<p><a href=\"" + ret.new_image + "\">" + this.options.button_download + "</a></p>");(new Element("img", {src: ret.new_image})).inject(mask, "top").setStyle("width", "100px");}.bind(this), onFailure: function () {if (this.options.debug != 1) {waiter.stop();}alert("Resize error");}})).send("json=" + json);}, reset: function () {this.cropper.dispose();this.element.removeClass("hide");this.element.fireEvent("click");}, start: function () {if (this.cropper != null) {return this.log("Already started");}this.element.fireEvent("click");}, stop: function () {if (this.cropper == null) {return this.log("Not started");}this.cropper.dispose();this.cropper = null;this.element.removeClass("hide");}, log: function (msg) {if (this.options.debug != 1) {return false;}if (this.ie) {alert(msg);} else {console.log(msg);}}});
						
var cropper_svg = new Class({id: null, svg: null, image: null, element: null, element_size: {}, angle: 0, fact: 1, initialize: function (options) {this.id = options.id;this.element = options.element;this.element_size = options.element.getSize();this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");this.svg.setAttributeNS(null, "id", this.id);this.svg.setAttributeNS(null, "width", this.element_size.x);this.svg.setAttributeNS(null, "height", this.element_size.y);this.svg.setAttributeNS(null, "preserveAspectRatio", "none");this.element.appendChild(this.svg);this.element.setStyle("overflow", "hidden");}, get_transform: function (transform) {if (transform == "translate") {var r = new RegExp("translate((.*))");transform = this.image.getAttributeNS(null, "transform");var m = r.exec(transform);var t = new Array;if (m == null) {t[0] = 0;t[1] = 0;return t;} else {t = m[1].split(")")[0].replace("(", "").trim().split(",");return t;}} else if (transform == "rotate") {var r = new RegExp("rotate((.*))");transform = this.image.getAttributeNS(null, "transform");var m = r.exec(transform);var rot = new Array;if (m == null) {rot[0] = 0;return rot;} else {rot = m[1].replace("(", "").replace(")", "").split(",");return rot;}}}, create_image: function (src, left, top, width, height) {this.image = document.createElementNS("http://www.w3.org/2000/svg", "image");this.image.setAttributeNS(null, "id", this.id + "_img");this.image.setAttributeNS(null, "y", top);this.image.setAttributeNS(null, "x", left);this.image.setAttributeNS(null, "width", width);this.image.setAttributeNS(null, "height", height);this.image.setAttributeNS("http://www.w3.org/1999/xlink", "href", src);this.image.setAttributeNS(null, "preserveAspectRatio", "none");this.image.setAttributeNS(null, "style", "cursor:move;");this.svg.appendChild(this.image);}, rotate: function (angle) {var cx = this.image.getAttributeNS(null, "x").toInt() + this.image.getAttributeNS(null, "width").toInt() / 2;var cy = this.image.getAttributeNS(null, "y").toInt() + this.image.getAttributeNS(null, "height").toInt() / 2;this.image.setAttributeNS(null, "transform", "rotate(" + angle + ", " + cx + ", " + cy + ")");this.angle = angle;this.update();}, zoom: function (fact) {bbox = this.image.getBBox();w_diff = (this.element_size.x * fact - bbox.width) / 2;h_diff = (this.element_size.y * fact - bbox.height) / 2;this.image.setAttributeNS(null, "x", bbox.x - w_diff);this.image.setAttributeNS(null, "y", bbox.y - h_diff);this.image.setAttributeNS(null, "width", this.element_size.x * fact);this.image.setAttributeNS(null, "height", this.element_size.y * fact);this.fact = fact;this.update();}, update: function () {var translate = this.get_transform("translate");var rotate = this.get_transform("rotate");var bbox = this.image.getBBox();if (!translate[0]) {translate[0] = 0;}if (!translate[1]) {translate[1] = 0;}this.image.setAttributeNS(null, "x", parseFloat(translate[0]) + parseFloat(bbox.x));this.image.setAttributeNS(null, "y", parseFloat(translate[1]) + parseFloat(bbox.y));if (rotate[1]) {rx = parseFloat(rotate[1]) + parseFloat(translate[0]);ry = parseFloat(rotate[2]) + parseFloat(translate[1]);this.image.setAttributeNS(null, "transform", "rotate(" + rotate[0] + ", " + rx + ", " + ry + ")");} else {this.image.setAttributeNS(null, "transform", "rotate(" + rotate[0] + ")");}}});
var cropper_vml = new Class({id: null, vml: null, image: null, element: null, element_size: {}, angle: 0, fact: 1, initialize: function (options) {this.id = options.id;this.element = options.element;this.element_size = options.element.getSize();this.vml = this.element.clone().setStyles({overflow: "hidden", position: "relative", border: 0, margin: 0, top: 0, left: 0}).inject(this.element);this.vml.id = this.id;if (!document.namespaces.v) {if (!document.documentMode || document.documentMode < 8) {document.namespaces.add("v", "urn:schemas-microsoft-com:vml");document.createStyleSheet().addRule("v\\:*", "behavior:url(#default#VML)");} else {document.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");}}}, create_image: function (src, left, top, width, height) {this.image = document.createElement("v:image");this.image.id = this.id + "_img";this.image.style.position = "absolute";this.image.style.left = left;this.image.style.top = top;this.image.style.width = width;this.image.style.height = height;this.image.style.cursor = "move";this.image.src = src;this.vml.appendChild(this.image);}, get_bbox: function () {return {x: this.image.offsetLeft, y: this.image.offsetTop, width: this.image.offsetWidth, height: this.image.offsetHeight};}, rotate: function (angle) {this.image.style.rotation = angle;this.angle = angle;this.update();}, zoom: function (fact) {bbox = this.get_bbox();w_diff = (this.element_size.x * fact - bbox.width) / 2;h_diff = (this.element_size.y * fact - bbox.height) / 2;this.image.style.top = bbox.y - h_diff;this.image.style.left = bbox.x - w_diff;this.image.style.width = this.element_size.x * fact;this.image.style.height = this.element_size.y * fact;this.fact = fact;this.update();}, update: function () {}});

//var cropper_crop = new Class({masks: {}, cropper: null, initialize: function (cropper) {this.cropper = cropper;var crop_w = (this.cropper.element_size.x / 3).toInt();var crop_h = (this.cropper.element_size.y / 3).toInt();var crop_l = (this.cropper.element_size.x / 3).toInt();var crop_t = (this.cropper.element_size.y / 3).toInt();this.masks.t = this.create_mask(0, 0, this.cropper.element_size.x, crop_t + 1);this.masks.b = this.create_mask(crop_t + crop_h + 1, 0, this.cropper.element_size.x, crop_t + 1);this.masks.r = this.create_mask(crop_t + 1, crop_w + crop_l + 1, crop_l + 1, crop_h);this.masks.l = this.create_mask(crop_t + 1, 0, crop_l + 1, crop_h);this.set_masks_hidden(true);this.masks.c = (new Element("div", {styles: {cursor: "move", position: "absolute", top: crop_t, left: crop_l, width: crop_w, height: crop_h, border: "1px dashed #ccc"}})).inject(this.cropper.cropper);this.masks.c.addEvents({mouseenter: function () {this.masks.c.setStyle("border", "1px dashed #f00");}.bind(this), mouseleave: function () {this.masks.c.setStyle("border", "1px dashed #ccc");}.bind(this), mousedown: function () {this.set_masks_hidden(false);}.bind(this), mouseup: function () {this.set_masks_hidden(true);}.bind(this)});this.masks.s = (new Element("div", {styles: {cursor: "se-resize", position: "absolute", top: crop_h * 2 - 5, left: crop_w * 2 - 5, width: 8, height: 8, 'z-index': 11, overflow: "hidden", border: "1px solid #666", background: "#ccc"}})).inject(this.cropper.cropper);this.masks.s.addEvents({mouseenter: function () {this.masks.c.setStyle("border", "1px dashed #f00");}.bind(this), mouseleave: function () {this.masks.c.setStyle("border", "1px dashed #ccc");}.bind(this), mousedown: function () {this.set_masks_hidden(false);}.bind(this), mouseup: function () {this.set_masks_hidden(true);}.bind(this)});this.masks.c.makeDraggable({container: this.cropper.cropper, onStart: function () {this.masks.c_styles = this.masks.c.getStyles("top", "left", "width", "height");}.bind(this), onDrag: function () {var drag_styles = this.masks.c.getStyles("top", "left", "width", "height");this.masks.t.setStyles({height: drag_styles.top.toInt() + 1});this.masks.l.setStyles({width: drag_styles.left.toInt() + 1, top: drag_styles.top.toInt() + 1});this.masks.r.setStyles({left: drag_styles.left.toInt() + drag_styles.width.toInt() + 1, width: this.cropper.element_size.x - drag_styles.left.toInt() - drag_styles.width.toInt() + 1, top: drag_styles.top.toInt() + 1});this.masks.b.setStyles({top: drag_styles.top.toInt() + drag_styles.height.toInt() + 1, height: this.cropper.element_size.y - drag_styles.top.toInt() - drag_styles.height.toInt()});this.masks.s.setStyles({top: drag_styles.top.toInt() + drag_styles.height.toInt() - 4, left: drag_styles.left.toInt() + drag_styles.width.toInt() - 4});}.bind(this)});this.masks.c.makeResizable({container: this.cropper.cropper, handle: this.masks.s, onDrag: function () {var drag_styles = this.masks.c.getStyles("top", "left", "width", "height");this.masks.t.setStyles({height: drag_styles.top.toInt() + 1});this.masks.l.setStyles({width: drag_styles.left.toInt() + 1, top: drag_styles.top.toInt() + 1, height: drag_styles.height.toInt()});this.masks.r.setStyles({left: drag_styles.left.toInt() + drag_styles.width.toInt() + 1, width: this.cropper.element_size.x - drag_styles.left.toInt() - drag_styles.width.toInt() + 1, height: drag_styles.height.toInt(), top: drag_styles.top.toInt() + 1});this.masks.b.setStyles({top: drag_styles.top.toInt() + drag_styles.height.toInt() + 1, height: this.cropper.element_size.y - drag_styles.top.toInt() - drag_styles.height.toInt()});this.masks.s.setStyles({top: drag_styles.top.toInt() + drag_styles.height.toInt() - 4, left: drag_styles.left.toInt() + drag_styles.width.toInt() - 4});}.bind(this)});}, set_masks_hidden: function (hide) {if (hide == true) {this.masks.t.addClass("hide");this.masks.b.addClass("hide");this.masks.l.addClass("hide");this.masks.r.addClass("hide");} else {this.masks.t.removeClass("hide");this.masks.b.removeClass("hide");this.masks.l.removeClass("hide");this.masks.r.removeClass("hide");}}, create_mask: function (top, left, width, height) {return (new Element("div", {class: "mask", styles: {top: top, left: left, width: width, height: height}})).inject(this.cropper.cropper).set("opacity", 0.6);}});
var cropper_id = 1;
Element.extend({disableSelection: function () {if (window.ActiveXObject) {this.onselectstart = function () {return false;};}this.style.MozUserSelect = "none";}});