(function($) {
    $.fn.imgPreview = function(options) {

        var settings = $.extend({
            thumbnail_width: 200,
            thumbnail_height: 200,
            label_text: lang['manage'],
            warning_message: 'Not an image file',
            current: ''
        }, options);

        $(this).each(function() {
            var elem = $(this);
            var scaleWidth = settings.thumbnail_width * 1.5;
            var fileInput = elem.bind('change', function(e) {
                doImgPreview(e);
            });

            var form = elem.parent();

            while ( !form.is("form") ) {
                form = form.parent();
            }

            form.bind('submit', function(e) {
                e.stopImmediatePropagation();
                if ($('.image-error', form).length > 0) {
                    alert("Please select a valid image file.");
                    return false;
                }
            });

            if (elem.prev().is("label")) {
                var labelText = elem.prev().text();
                elem.prev().remove();
            } else {
                var labelText = settings.label_text;
            }

            var newDiv = $('<div>').addClass('image-preview').css({
                width: settings.thumbnail_width + 'px',
                height :settings.thumbnail_height + 'px'
            });

            if (settings.current) {
                $(newDiv).css({backgroundImage: 'url('+settings.current+')'}).addClass('loaded');
            }

            var newFileInput = $('<div>')
                .addClass('image-preview-wrapper')
                .append(newDiv)
                .append($('<div>').attr('class', 'two-inline'));

            var add_class = settings.current && typeof crop == 'function' ? '' : ' hide';
            var icons = $('<div class="icons'+add_class+'">').append( 
                $('<span>')
                .addClass('crop')
                .addClass('icon')
            )
            .append($('<span>')
                .addClass('delete')
                .addClass('icon')
            )

            newFileInput.find('div.two-inline').append(icons);

            var manage_link = $('<div>').append($('<label>')
                .text(labelText)
            );

            newFileInput.find('div.two-inline').append(manage_link);

            elem.after(newFileInput);
            newFileInput.prepend(fileInput);
            
            newFileInput.find('span.delete').click(function(){
                $.deleteUploadedImg();
            });

            $.cropInterface();

            var doImgPreview = function(e) {
                if (typeof FileReader == 'undefined') {
                    uploadThumbHandler();
                    setTimeout(function(){ location.reload() }, 3000);
                    return true;
                }
                var files = e.target.files;

                for (var i=0, file; file=files[i]; i++) {
                    if (file.type.match('image.*')) {
                        var reader = new FileReader();
                        reader.onload = (function(theFile) {
                            return function(e) {
                                var image = e.target.result;
                                original_picture = image;
                                                                
                                previewDiv = $('.image-preview', newFileInput);
                                previewDiv.css({
                                    'background-image':'url('+image+')'
                                });
                                previewDiv.addClass('loaded');

                                previewDiv.next().find('div.icons').show();
                            };
                        })(file);
                        reader.readAsDataURL(file);

                        /* send file to the server */
                        uploadThumbHandler();
                    }
                    else {
                        printMessage('error', lang['not_image_file']);
                    }
                }
            }

        });
    }
})(jQuery);

jQuery.extend({
    createUploadIframe: function(id, uri)
    {
            //create frame
            var frameId = 'jUploadFrame' + id;
            var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
            if(window.ActiveXObject)
            {
                if(typeof uri== 'boolean'){
                    iframeHtml += ' src="' + 'javascript:false' + '"';

                }
                else if(typeof uri== 'string'){
                    iframeHtml += ' src="' + uri + '"';

                }   
            }
            iframeHtml += ' />';
            jQuery(iframeHtml).appendTo(document.body);

            return jQuery('#' + frameId).get(0);            
    },

    createUploadForm: function(id, fileElementId, data) {
        //create form
        var formId = 'jUploadForm' + id;
        var fileId = 'jUploadFile' + id;
        var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');

        if (data) {
            for (var i in data) {
                jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
            }           
        }

        var oldElement = jQuery('#' + fileElementId);
        var newElement = jQuery(oldElement).clone();

        var events = jQuery._data(oldElement.get(0), 'events');
        newElement.bind('change', events.change[0]);

        jQuery(oldElement).attr('id', fileId);
        jQuery(oldElement).before(newElement);
        jQuery(oldElement).appendTo(form);

        //set attributes
        jQuery(form).css('position', 'absolute');
        jQuery(form).css('top', '-1200px');
        jQuery(form).css('left', '-1200px');
        jQuery(form).appendTo('body');

        return form;
    },

    ajaxFileUpload: function(s) {
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout        
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = new Date().getTime();
        var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
        var io = jQuery.createUploadIframe(id, s.secureuri);
        var frameId = 'jUploadFrame' + id;
        var formId = 'jUploadForm' + id;

        if (s.global && ! jQuery.active++) {
            jQuery.event.trigger('ajaxStart');
        }

        var requestDone = false;
        // Create the request object
        var xml = {};
        if ( s.global )
            jQuery.event.trigger("ajaxSend", [xml, s]);

        // Wait for a response to come back
        var uploadCallback = function(isTimeout) {
            var io = document.getElementById(frameId);
            try {
                if (io.contentWindow) {
                    xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
                    xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
                } else if(io.contentDocument) {
                    xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
                    xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
                }                       
            } catch(e) {
                //jQuery.handleError(s, xml, null, e);
                console.log(s)
                console.log(xml)
                console.log(status)
                console.log(e)
            }
            if (xml || isTimeout == 'timeout') {
                requestDone = true;
                var status;

                try {
                    status = isTimeout != "timeout" ? "success" : "error";
                    // Make sure that the request was successful or notmodified
                    if (status != 'error') {
                        // process the data (runs the xml through httpData regardless of callback)
                        var data = jQuery.uploadHttpData( xml, s.dataType );
                        // If a local callback was specified, fire it and pass it the data
                        if (s.success)
                            s.success(data, status);
    
                        // Fire the global callback
                        if (s.global)
                            jQuery.event.trigger( "ajaxSuccess", [xml, s] );
                    } else {
                        //jQuery.handleError(s, xml, status);
                        console.log(s)
                        console.log(xml)
                        console.log(status)
                        console.log(e)
                    }
                } catch(e) {
                    status = "error";
                    //jQuery.handleError(s, xml, status, e);
                    console.log(s)
                    console.log(xml)
                    console.log(status)
                    console.log(e)
                }

                // The request was completed
                if(s.global)
                    jQuery.event.trigger( "ajaxComplete", [xml, s] );

                // Handle the global AJAX counter
                if (s.global && ! --jQuery.active)
                    jQuery.event.trigger( "ajaxStop" );

                // Process result
                if (s.complete)
                    s.complete(xml, status);

                jQuery(io).unbind()

                setTimeout(function() {
                    try {
                        jQuery(io).remove();
                        jQuery(form).remove();  
                    } catch(e) {
                        jQuery.handleError(s, xml, null, e);
                    }
                }, 100)

                xml = null;
            }
        }

        // timeout checker
        if (s.timeout > 0) {
            setTimeout(function(){
                // Check to see if the request is still happening
                if(!requestDone) uploadCallback('timeout');
            }, s.timeout);
        }

        try {
            var form = jQuery('#' + formId);
            jQuery(form).attr('action', s.url);
            jQuery(form).attr('method', 'POST');
            jQuery(form).attr('target', frameId);
            if (form.encoding) {
                jQuery(form).attr('encoding', 'multipart/form-data');               
            } else {
                jQuery(form).attr('enctype', 'multipart/form-data');
            }
            jQuery(form).submit();
        } catch(e) {
            jQuery.handleError(s, xml, null, e);
        }

        jQuery('#' + frameId).load(uploadCallback);

        return {abort: function () {}};
    },

    uploadHttpData: function( r, type ) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if ( type == "script" )
            jQuery.globalEval( data );
        // Get the JavaScript object, if JSON is used.
        if ( type == "json" )
            eval( "data = " + data );
        // evaluate scripts within html
        if ( type == "html" )
            jQuery("<div>").html(data).evalScripts();

        return data;
    },

	deleteUploadedImg: function() {
        $.flModal(null, {
            caption: lang['warning'],
            content: lang['delete_confirm'],
            prompt: 'xajax_delProfileThumbnail',
            width: 'auto',
            height: 'auto',
            direct: true,
            click: false
        });
    },

    cropInterface: function() {
        var coefficient;
        var crop_photo_id;      

        $('#crop_accept').unbind('click');
        $('#crop_cancel').unbind('click');
        $('.crop.icon').unbind('click');

        $('.crop.icon').click(function() {
            var add_style = '';
            var img_source = original_picture;

            flynax.slideTo('#crop_block');          

            var img_obj = new Image();
            img_obj.onload = function(){
                build_interface(img_obj, add_style, img_source);                
            }
            img_obj.src = img_source;
        });

        var build_interface = function(img_obj, add_style, img_source)
        {
            coefficient = 1;

            $('.crop.icon').hide();
            $('.delete.icon').hide();

            var area_width = $('#width_detect').width();
            if (img_obj.width >= area_width) {
                coefficient = img_obj.width/area_width;
                add_style = 'width: '+area_width+'px;';
            }

            var html = '<img style="'+add_style+'" src="'+img_source+'" />';

            $('#crop_obj').html(html);
            $('#crop_block').fadeIn('slow', function(){
                var crop = $.Jcrop('#crop_block img',{
                    bgOpacity: .7,
                    aspectRatio: thumb_width / thumb_height,
                    onChange: showCoords,
                    onSelect: showCoords,
                    keySupport: false,
                    minSize : [thumb_width, thumb_height]
                });
                
                var aspectX = Math.floor(img_obj.width / coefficient);
                var aspectY = Math.floor(img_obj.height / coefficient);
                if ( aspectX > aspectY )
                {
                    aspectX = Math.floor(aspectY * thumb_width / thumb_height);
                }
                else
                {
                    aspectY = Math.floor(aspectX * thumb_height / thumb_width);
                }
                
                var sX = Math.floor( (img_obj.width / coefficient / 2 ) - (aspectX /2) );
                var sY = Math.floor( (img_obj.height / coefficient / 2 ) - (aspectY /2) );
                
                aspectX += sX;
                aspectY += sY;
                console.log(sX, sY, aspectX, aspectY);
                crop.animateTo([sX, sY, aspectX, aspectY]);
            });
        }
        
        $('#crop_cancel').click(function(){
            $('#crop_block').slideUp('slow');
            $('.crop.icon').show();
            $('.delete.icon').show();
        });
        
        var showCoords = function(c)
        {
            cx = Math.floor(c.x*coefficient);
            cy = Math.floor(c.y*coefficient);
            cx2 = Math.floor(c.x2*coefficient);
            cy2 = Math.floor(c.y2*coefficient);
            cw = Math.floor(c.w*coefficient);
            ch = Math.floor(c.h*coefficient);
        }
        
        $('#crop_accept').click(function(){
            crop();
        });
        
        var crop = function()
        {
            if ( !cw || !ch )
            {
                error_text = ph_empty_error;
                error = true;
            }
            else
            {
                if ( cw < thumb_width)
                {
                    error_text = ph_too_small_error;
                    error = true;
                }
                else
                {
                    error = false;
                }
            }

            if ( error )
            {               
                printMessage('error', error_text);
            }
            else
            {
                $('#crop_cancel').fadeOut('fast');
                $('#crop_accept').val(lang['loading']);
                xajax_acrop(new Array(cx, cy, cx2, cy2, cw, ch), crop_photo_id);
            }
        }
    }
});