jQuery(function() {

    $('dd.checkbox a').livequery(function() {
        $(this).attr('target', '__blank');
    });

    // input.imageupload < div:first > ;
    $('a.crop').click(openCropWindow);

    var form = $('#registration');
    
    function openCropWindow() {
        $.loading({
            message: 'Bild wird geladen...'
        });

        var container = $(this).parent();
        var thumbnail = $('div', container);
        var url = $('img', container).attr('src');

        $('<img />').load(function() { // onload event for image
                         var image = $(this);

                         $('#crop').open({
                             onOpen: function() {
                                 image.crop({
                                     thumbnail: thumbnail
                                 });
                             },
                             onClose: function() { // clean up
                                 image.next().remove();
                                 image.remove();
                             }
                         });
                     })
                    .appendTo('#crop div.img')
                    .attr('src', url);

         return false;
    }

    function loadThumbnail(data) {
        var input = $('input[name="' + data.attr('element') + '"]');
        var container = input.parent();

        if (data.attr('error')) {
            var error = $(data.attr('error'));
            var errors = $('ul.error', container).show();
            $('<li >').html('<strong>' + data.attr('name') + '</strong>: ' + error.attr('message'))
                      .appendTo(errors);

            $.unloading();

            return;
        }

        $.loading({
            message: 'Bild wird geladen...'
        });
      
        input.data('data', {file: data[0]}); // append avatar data to form
        
        $('img', container).remove(); // remove old thumbs and images
        
        $('<img />').load(function() { // onload event for image
                         var thumbnail = $('div', container);

                         thumbnail.thumbnail(this, {
                             aspectRatio: 140/185,
                             input: input
                         });

                         $(this).remove();

                         $('a.crop', container).fadeIn(); // open crop window
                     })
                    .hide()
                    .appendTo('body')
                    .attr('src', $.yuice.config.baseurl + 'service/image_preview/size-300/file-' + data.attr('id'));
    }

    $('#upload').livequery(function() {
        $('form', this).form({
            onUploadSuccess: function(data, file) {
                $(data).each(function() {
                    $.each(this, function(type, data) {
                        switch (type) {
                            case 'file':
                                loadThumbnail($(data));
                                break;
                        }
                    });
                })
            }
        });
    });

    $('[name="user[gender]"]', form).change(function() {
        var avatar = $('dd.avatar-female div.thumbnail', form);
        var gender = $(this).val();

        switch (gender) {
            case 'm':
                avatar.removeClass('avatar-female').addClass('avatar-male');
                break;
            case 'f':
                avatar.removeClass('avatar-male').addClass('avatar-female');
                break;
        }
    })
});