var $viewport = null;
$(document).ready(function(){
	$('#rotate-left').click(function(e){
		e.preventDefault();
		var rot = parseInt( $('#rotate').val() );
		rot += 360;
		rot -= 90;
		rot = rot % 360;
		$('#rotate').val(rot).trigger('change');
	});
	$('#rotate-right').click(function(e){
		e.preventDefault();
		var rot = parseInt( $('#rotate').val() );
		rot += 90;
		rot = rot % 360;
		$('#rotate').val(rot).trigger('change');
	});
	$('#rotate').change(function(){
		var rot = parseInt( $('#rotate').val() );
		var height = $('img.jrac').height();
		var width = $('img.jrac').width();
		$('img.jrac').css('transform', 'rotate('+rot.toString()+'deg)');
		var margin = Math.abs( width - height ) / 2;
		if( rot % 180 == 90 ){
			if( width > height ) $('img.jrac').css('margin', margin.toString() + 'px -' + margin.toString() + 'px');
			else $('img.jrac').css('margin', '-' + margin.toString() + 'px ' + margin.toString() + 'px');
			$('.image_width_label').html('Wysokość obrazka:');
			$('.image_height_label').html('Szerokość obrazka:');
		} else{
			$('img.jrac').css('margin', '0');
			$('.image_width_label').html('Szerokość obrazka:');
			$('.image_height_label').html('Wysokość obrazka:');
		}
		$viewport.observator.notify_all();
	});
	$('#jrac').click(function(e){
		e.preventDefault();
		$('img.jrac').jrac({
			'viewport_resize': false,
			'viewport_image_surrounding': true,
			'image_draggable': false,
			'viewport_onload': function() {
				$viewport = this;
				var inputs = $('input.coords');
				var events = ['jrac_crop_x','jrac_crop_y','jrac_crop_width','jrac_crop_height','jrac_image_width','jrac_image_height'];
				for (var i = 0; i < events.length; i++) {
					var event_name = events[i];
					// Register an event with an element.
					$viewport.observator.register(event_name, inputs.eq(i));
					inputs.eq(i).bind( event_name, function( event, $viewport, value ){
						$(this).val(value);
						var rot = parseInt( $('#rotate').val() );
						if( rot % 180 == 90 ){
							//Rotated - additional margins needed
							var height = $('img.jrac').height();
							var width = $('img.jrac').width();
							var margin = Math.abs( width - height ) / 2;
							if( width > height ) $('img.jrac').css('margin', margin.toString() + 'px -' + margin.toString() + 'px');
							else $('img.jrac').css('margin', '-' + margin.toString() + 'px ' + margin.toString() + 'px');
							//Rotated - reversed sizes
							if( event.type == 'jrac_image_width' ){
								$('.jrac_viewport').css( 'height', ( parseInt( value ) + 4 ) + 'px' );
							}
							if( event.type == 'jrac_image_height' ){
								$('.jrac_viewport').css( 'width', ( parseInt( value ) + 4 ) + 'px' );
							}
						} else{
							//Normal
							if( event.type == 'jrac_image_width' ){
								$('.jrac_viewport').css( 'width', ( parseInt( value ) + 4 ) + 'px' );
							}
							if( event.type == 'jrac_image_height' ){
								$('.jrac_viewport').css( 'height', ( parseInt( value ) + 4 ) + 'px' );
							}
						}
					})
					// Attach a handler for the built-in jQuery change event, handler
					// which read user input and apply it to relevent viewport object.
					.change(event_name, function(event) {
						var event_name = event.data;
						$viewport.$image.scale_proportion_locked = true;
						$viewport.observator.set_property(event_name,$(this).val());
					});
				}
				$('.jrac_zoom_slider').detach().appendTo('#scale_container');
			}
		});
		$('#jrac').hide();
		$('#jrac_destroy').show();
	});
	$('#jrac_destroy').click(function(e){
		e.preventDefault();
		$('img.jrac').jrac('destroy');
		$('#scale_container').html('');
		$('#jrac').show();
		$('#jrac_destroy').hide();
	});
	$('#jrac_destroy').hide();
});