var channelid = 0;
var imagesrc = null;
var imageid = null;

var x1 = 64;
var y1 = 0;
var size = 384;

var x1_new = x1;
var y1_new = y1
var size_new = size;

function makePreview() {
    var scaleX = 160 / size;//$('input[name=size]').val();
    var scaleY = 160 / size;//$('input[name=size]').val();
    $('#edit-group-imagebox img').attr('src',imagesrc);
    $('#edit-group-imagebox img').css({
        width: Math.round(scaleX * 512),
        height: Math.round(scaleY * 384),
        marginLeft: -Math.round(scaleX * x1),//$('input[name=x1]').val()),
        marginTop: -Math.round(scaleY * y1),//$('input[name=y1]').val())
    });
}

function enableCropper() {
  if (imagesrc) {
    $('#edit-group-avatar-image').imgAreaSelect({
      aspectRatio: '1:1',
      x1: x1, y1: y1, x2: x1+size, y2: y1+size,
      handles: true,
      persistent: true,
      onSelectEnd: function (img, selection) {
        x1_new   = selection.x1;
        y1_new   = selection.y1;
        size_new = selection.x2-selection.x1;
      }
    });
  }
}

function animate_step2() {
	$('#edit-group-container').animate({'margin-left': -300}, 500, animationDoneStep2);
  $('#edit-group-viewport').animate({'width': 540},250);
	$('#facebox').animate({'left': ($(window).width()/2)-270}, 250);
	enableUpload();
}

function animationDoneStep2() {
  enableCropper();
}

function animate_step1() {
  
  imageupload.disable();
  
	$('#edit-group-container').animate({'margin-left': 0}, 300, animationDoneStep1);
  $('#edit-group-viewport').animate({'width': 300},250);
	$('#facebox').animate({'left': ($(window).width()/2)-150}, 250);
  var ias = $('#edit-group-avatar-image').imgAreaSelect({ instance: true });
  ias.setOptions({hide:true});
  ias.update();
}

function animationDoneStep1() {
  $('#edit-group-avatar-placeholder').html('');
}

function enableUpload() {
	// "AJAX" upload
  imageupload = new AjaxUpload('imagefile', {
    action: '/action/uploadimage',
    name: 'newimage',
    autoSubmit: true,
    data: {
      channelid: channelid
    },
    onComplete: function(file,response){
      if (imagesrc) {
        var ias = $('#edit-group-avatar-image').imgAreaSelect({ instance: true });
        ias.setOptions({hide:true});
        ias.update();
      }
      var data = response.split(' ');
      imageid = data[0];
      imagesrc = data[1];
      $('#edit-group-avatar-placeholder').html('<img src="'+imagesrc+'" id="edit-group-avatar-image"/>');

      x1 = 64;
      y1 = 0;
      size = 384;

      enableCropper();
      $('#preview img').attr('src',imagesrc);
    }
  });
}

function editgroup_init() {
				$('#facebox .footer').hide();
				$('#facebox .body').css('width', $('#edit-group-viewport').width());

        channelid = $('input[name=channelid]').val();
				
        // Beskär bild
				$('#edit-group-image-change').click(function(event){
				  event.preventDefault();
				  if (!imagesrc) {
				    // Used the old URL
  				  imagesrc   = $(this).find('a').attr('href');
  				  imageid    = $('input[name=imageid]').val();
  				  // Original cropping
  				  var cropping = $(this).find('a').attr('rel').split(' ');
  				  x1   = parseInt(cropping[0]);
  				  y1   = parseInt(cropping[1]);
  				  size = parseInt(cropping[2]);
				  }
          $('#edit-group-avatar-placeholder').html('<img src="'+imagesrc+'" id="edit-group-avatar-image"/>');
				  animate_step2();
				});

        // Ladda upp ny
				$('#edit-group-image-upload').click(function(event){
				  event.preventDefault();
				  animate_step2();
				});
				
				// Avbryt
        $('#edit-group-cancel').click(function(event){
				  event.preventDefault();
          $.facebox.close();
        });
				
				// Save in step2
				$('#edit-group-avatar-save').click(function(event){
				  event.preventDefault();
				  x1 = x1_new;
				  y1 = y1_new;
				  size = size_new;  

          $('input[name=imageid]').val(imageid);
          $('input[name=x1]').val(x1);
          $('input[name=y1]').val(y1);
          $('input[name=size]').val(size);

				  makePreview();
				  animate_step1();
				});

				// Cancel in step2
				$('#edit-group-avatar-cancel').click(function(event){
				  event.preventDefault();
				  animate_step1();
				});
}

$(function() {
  $('.edit-profile').click(function (event) {
    event.preventDefault();
    channelid = $(this).attr('rel');
		jQuery.facebox(function() {
			jQuery.get('facebox/editgroup?channelid='+channelid, function(data) {
				$.facebox(data);
        editgroup_init();
			});
		});
  });
});