window.addEvent('domready', function(){

var resizerForm = $('resizerForm'),
	file = $('file'),
	tekst = $('tekst'),
	body = $(document.body),
	close = $('close'),
	slider = $('slider'),
	r = $('r'),
	resized = $('resized').setStyle('display', 'none'),
	update_preview = $('update_preview'),
	maten = $('maten'),
	download = $('download'),
	logo = $('logoLink'),
	closeButton = $('closeButton'),
	loading = $('loading');

var img, origData = {};

resizerForm.set('action', resizerForm.get('action') + '?format=json');

var iFrame = new iFrameFormRequest(resizerForm, {
   
	onRequest: function(){
        loading.empty().grab(new Element('img', {
			src: 'images/loader.gif',
			alt: geduld,
			title: geduld
		}));
    },
	
	onComplete: function(response){
        loading.empty();
		data = JSON.decode(response.trim());
	
		if (data.src){
			
			origData = data;
			origData.filename = data.src.split('/').getLast();
			
			img = new Element('img', {
				src: data.src,
				width: data.width,
				height: data.height
			});
			r.empty().grab(img);
			
			setSizeInfo(data);	

			proSlider.set(100);
			
			overlay.open();
			
		} else {
			error = data.error || 'unknown error';
			loading.grab(new Element('p', {
				'class': 'error',
				text: error
			}));
		
		}
	}
	
});

var setSizeInfo = function(data){
	maten.set('text', data.width + 'x' + data.height);
	var url = [site_url, 'image', data.width, data.height, origData.filename].join('/');
	download.set('href', url);
	update_preview.set('href', url);
};

overlay = {
	
	open: function(){
		
		body.setStyle('background', 'url(images/backgroundresized.jpg) repeat-x #7ecbe4');
		tekst.setStyle('opacity', 0.3);
		
		resized.setStyle('display', 'block');
		
	},
	
	close: function(){
	
		body.setStyle('background', 'url(images/background.jpg) repeat-x #fcfcfc');
		tekst.setStyle('opacity', 1);

		resized.setStyle('display', 'none');
		
	}

};

var el = $('theSlider')
var proSlider = new Slider(el, el.getElement('.knob'), {
	range: [1, 200],
	initialStep: 100,
	onChange: function(value){
		data = {
			width: (origData.width * value / 100).round(),
			height: (origData.height * value / 100).round()
		};
		if (img) img.setStyles(data);
		setSizeInfo(data);
	}
});

update_preview.addEvent('click', function(e){
	e.stop();
	img.set('src', this.get('href'));
});

new Elements([logo, close]).addEvent('click', function(e){
	e.stop();
	overlay.close();
});


});