var gfs_avatar = {
	
	construct: function(src)
	{
		if ( src.length > 0 )
		{
			this.createPhotos(src);
		}
	},
	
	prepareCrop: function()
	{
		var self = this;
		
		this.avatar_width = ( this.avatar_width==undefined ) ? 100 : this.avatar_width;
		this.avatar_height = ( this.avatar_height==undefined ) ? 100 : this.avatar_height;
		
		this.width = this.$photo.getStyle('width').toInt(); 
		this.height = this.$photo.getStyle('height').toInt(); 
		
		this.crop = new MooCrop(this.$photo, {
			min: {width: this.avatar_width, height: this.avatar_height},
			handleHeight: 6,
			handleWidth: 6,
			handleColor: '#769CC3',
			cropBorder: '1px dashed #769CC3'
		});
		
		this.crop.addEvent('onCrop', function(image, croparea, bounds, handle){
			self.setPreview(croparea);
		});
		
		$('crop_avatar_btn').addEvent('click', function(){
			self.cropPhoto();
			this.form.submit();
		});
		
		this.setPreview(this.crop.getCropInfo());
	},
	
	setPreview: function(cropArea)
	{
		this.$preview.setStyles({
			marginLeft: -cropArea.left*this.avatar_width/cropArea.width,
			marginTop: -cropArea.top*this.avatar_height/cropArea.height,
			width: this.avatar_width*this.width/cropArea.width,
			height: this.avatar_height*this.height/cropArea.height
		});
	},
	
	cropPhoto: function()
	{
		var cropArea = this.crop.getCropInfo();
		
		$('avatar_left').set('value', cropArea.left);
		$('avatar_top').set('value', cropArea.top);
		$('avatar_width').set('value', cropArea.width);
		$('avatar_height').set('value', cropArea.height);
	},
	
	createPhotos: function(src)
	{
		var self = this;
		
		var image_src = src + '?noChache=' + Math.random();
		
		var photo = new Image();
		photo.src = image_src;
		
		$('photo_block').adopt(photo);
		this.$photo = $(photo);
		
		var preview = new Image();
		preview.src = image_src;
		
		$('preview_block').adopt(preview);
		this.$preview = $(preview);
		
		this.$photo.addEvent('load', function(){
			self.prepareCrop();
		});
	},
	
	construct_no_crop: function(src)
	{
		var self = this;
		var image_src = src + '?noChache=' + Math.random();
		
		var photo = new Image();
		photo.src = image_src;
		
		$('photo_block').adopt(photo);
	}
};


var gfs_avatar_choose = {
		
	construct: function()
	{
		this.chooseAvatar();
		this.prepareNavigation();
	},
	
	chooseAvatar: function()
	{
		var self = this;
		var $avatars = $$('.select_avatar');
		
		$avatars.addEvent('click', function(){
			$avatars.removeClass('selected_avatar');
			
			$(this).addClass('selected_avatar');
			
			var avatar_id = $(this).getProperty('id');
			avatar_id = avatar_id.substr(7);
			self.selected_avatar = avatar_id;
		});
		
		$('choose_selected').addEvent('click', function(){
			if ( self.selected_avatar==undefined ) {
				return false;
			}
			
			$('choosen_avatar_id').set('value', self.selected_avatar);
			this.form.submit();
		});
	}, 
	
	prepareNavigation: function()
	{
		var self = this; 
		
		this.nav_cur_block = 0;
		this.$nav_back = $('choose_avatar_back');
		this.$nav_next = $('choose_avatar_next');
		this.$avatar_blocks = $$('.avatars_block');
		this.avatar_block_count = $$('.avatars_block').length;
		
		//BACK
		this.$nav_back.addEvent('click', function(){
			if ( self.nav_cur_block == 0 ) {
				return false;
			}
			
			var $prev_block = self.$avatar_blocks[self.nav_cur_block-1];
			
			self.switchBlocks($prev_block, -1);
		});
		
		//NEXT
		this.$nav_next.addEvent('click', function(){
			if ( self.nav_cur_block == self.avatar_block_count-1 ) {
				return false;
			}

			var $next_block = self.$avatar_blocks[self.nav_cur_block+1];
			
			self.switchBlocks($next_block, 1);
		});		
		
		this.setDirects();
	},
	
	setDirects: function()
	{
		if ( this.nav_cur_block == 0 ) {
			this.$nav_back.setStyle('opacity', '0.4');
		}
		else {
			this.$nav_back.setStyle('opacity', '1');
		}
		
		if ( this.nav_cur_block == this.avatar_block_count-1 ) {
			this.$nav_next.setStyle('opacity', '0.4');
		}
		else {
			this.$nav_next.setStyle('opacity', '1');
		}
	},
	
	switchBlocks: function($new_block, direct)
	{
		$old_block = this.$avatar_blocks[this.nav_cur_block];
				
		$old_block.set('tween', {duration: 200});
		$old_block.fade('out');

		window.setTimeout(function(){
			$old_block.removeClass('active_block');
			$new_block.addClass('active_block');
			$new_block.set('tween', {duration: 200});
			$new_block.fade('in');
		}, 200);
		
		this.nav_cur_block += direct;
		this.setDirects();
	}
};