jQuery(document).ready(function() {
    var FIRST_TAB = 0;
    var LAST_TAB = 4;
	
    var selectedImage;
    var crop;
    var cropApi;
    var scale;
	
    var dialog = jQuery('#imageDialog');
    var tabs = dialog.find('#imageDialogTabs');
    var sizeSlider = dialog.find('#imageSizeSlider');
    var sizePreview = dialog.find('#imageSizePreview');
    var sizeHeight = dialog.find('#imageSizeHeight');
    var sizeWidth = dialog.find('#imageSizeWidth');
    var imageFilter = dialog.find('#imageFilter');
    var imageSelection = dialog.find('#imageSelection');
    var imageCrop = dialog.find('#imageCrop');
    var imageLink = dialog.find('#imageTabs-5  #imageLink');
    var textFlow = jQuery('.textFlow');
	
    var btnBack = dialog.attr('btnBack');
    var btnNext = dialog.attr('btnNext');
    var btnCancel = dialog.attr('btnCancel');
    var btnFinish = dialog.attr('btnFinish');

    var btnHandlers = {};
    btnHandlers[btnFinish] = function() {
        var data = dialog.data('editorSelection');

        var flow = jQuery('.textFlow.selected').attr('flowClass');
        var code = '<img src="' + getImageURL() + '" ';
        
        if (flow) {
            code = code + 'class="' + flow + '"';
        }
        code = code + '>';
        
        if (imageLink.val() && imageLink.val().length > 1) {
            var anchor = '<a href="' + imageLink.val() +'"';
            
            var anchorTitle = jQuery('#imageLinkTitle').val();
            if (anchorTitle && anchorTitle.length > 1) {
                anchor = anchor + ' title="' + anchorTitle + '"';
            }
            anchor = anchor + '>';
            
            code = anchor + code + '</a>';
        }
        
        jQuery.halvr.replaceSelectionWith(data.iframe, data.range, code);
        jQuery(data.iframe).halvrChange();
        jQuery(this).dialog('close');
    };
    
    btnHandlers[btnCancel] = function() {
        jQuery(this).dialog('close');
    };
    
    btnHandlers[btnNext] = function() {
        var currentTab = tabs.tabs('option','selected');
        
        switch (currentTab) {
            case 0:
                enableButton(btnFinish);
                tabs.data('disabled.tabs',[]);
                break;
            case 1:
                disableButton(btnBack);
                break;
            case 2:
                enableButton(btnBack);
                break;
        }
        
        if (currentTab !== LAST_TAB) {
            tabs.tabs('select', currentTab + 1);
        }
        
        switch (currentTab) {
            case 0:
                tabs.data('disabled.tabs', [0]);
                enableButton(btnFinish);
                break;
            case 1:
                tabs.tabs('disable',1);
                disableButton(btnBack);
                break;
            case 2:
                enableButton(btnBack);
                break;
        }
    };
    
    btnHandlers[btnBack] = function() {
        var currentTab = tabs.tabs('option','selected');
        if (currentTab !== FIRST_TAB) {
            tabs.tabs('select', currentTab - 1);
        }
        switch (currentTab) {
            case 3:
                disableButton(btnBack);
                break;
        }
    };
	
    dialog.dialog({
        modal:true,
        autoOpen:false,
        width:800,
        height:700,
        buttons:btnHandlers,
        open: function(event, ui) {
            tabs.data('disabled.tabs', []);
            tabs.tabs('select', 0);
            tabs.data('disabled.tabs', [1,2,3,4]);
            disableButton(btnFinish);
            disableButton(btnBack);
            disableButton(btnNext);
            imageSelection.find('li').removeClass('ui-selected');
            imageLink.val('');
            textFlow.removeClass('selected');
            jQuery(textFlow.get(0)).addClass('selected');
            jQuery('#textFlowPreviewImage').attr('class', jQuery(textFlow.get(0)).attr('flowClass'));
            imageFilter.val('');
            sizeHeight.text('0');
            sizeWidth.text('0');
            sizeSlider.slider('option', 'max' , 0);
            sizeSlider.slider('value', 0);
            sizePreview.attr('src','/res/plain/css/ajax-loader.gif');
            scale = null;
            crop = null;
        }
    });
    
    function updateCrop(coordinates) {
        if (coordinates && coordinates.w > 0 && coordinates.h > 0) {
            var cropParameters = 'ya' + coordinates.y;
            cropParameters = cropParameters + ',xa' + coordinates.x;
            cropParameters = cropParameters + ',yb' + coordinates.y2;
            cropParameters = cropParameters + ',xb' + coordinates.x2;
            crop = cropParameters;
        } else {
            crop = null;
        }
    }
    
    function disableButton(buttonText) {
        var button = dialog.parent().find('.ui-dialog-buttonpane button:contains(' + buttonText + ')');
        button.attr('disabled','true');
        button.addClass('ui-state-disabled');
    }
    
    function enableButton(buttonText) {
        var button = dialog.parent().find('.ui-dialog-buttonpane button:contains(' + buttonText + ')');
        button.removeClass('ui-state-disabled');
        button.removeAttr('disabled');
    }
    
    function getImageURL() {
        var url = selectedImage;
        if (crop || scale) {
            url =  url + '?parameters=';
        }
        
        if (crop) {
            url = url + crop;
            if (scale) {
                url = url + ',';
            }
        }
        if (scale) {
            url = url + scale;
        }
        return url;
    }
    
    tabs.tabs({
        show: function(event, ui) {
            var currentTab = tabs.tabs('option','selected');
            if (currentTab === 2) {
                sizePreview.removeAttr('height');
                sizePreview.load(function(){
                    var previewMaxHeight = sizePreview.height();
                    sizePreview.log('Image scaling preview, height:' + previewMaxHeight);
                    sizeSlider.slider('option', 'max' , previewMaxHeight);
                    sizeSlider.slider('value', previewMaxHeight);
                    sizeHeight.text(previewMaxHeight);
                    sizeWidth.text(sizePreview.width());
                }).attr('src', getImageURL());
            }
            if (currentTab !== 0) {
                tabs.tabs('disable',0);
            }
            if (currentTab > 1) {
                tabs.tabs('disable', 1);
            }
            if(currentTab > 2) {
                enableButton(btnBack);
            } else {
                disableButton(btnBack);
            }
            if (currentTab === 4) {
                disableButton(btnNext);
            } else if (currentTab > 0) {
                enableButton(btnNext);
            }
    		
            if (currentTab === 3) {
                jQuery('#textFlowPreviewImage').attr('src',getImageURL());
            }
    		
            if (currentTab === 1) {
                if (cropApi) {
                    cropApi.destroy();
                    cropApi = null;
                    crop = null;
                }
                imageCrop.attr('src', selectedImage);
                cropApi = jQuery.Jcrop(imageCrop,{
                    boxWidth:720,
                    onChange:updateCrop,
                    onSelect:updateCrop
                });
            }
        }
    });
    
    sizeSlider.slider({
        min:10,
        slide:function (event, ui) {
            sizePreview.attr('height',ui.value);
            sizeHeight.text(ui.value);
            scale = 'y' + ui.value + ',x' + sizePreview.width();
            sizeWidth.text(sizePreview.width());
        }
    });
    
    imageSelection.selectable({
        stop: function(event, ui) {
            var hasOneSelection = imageSelection.find('li.ui-selected').length === 1;
            if (hasOneSelection){
                setStateAfterSelection();
            } else {
                disableButton(btnFinish);
                disableButton(btnNext);
                tabs.data('disabled.tabs', [1,2,3,4]);
                selectedImage = null;
            }
        }
    });
    
    function setStateAfterSelection() {
        enableButton(btnNext);
        enableButton(btnFinish);
        tabs.data('disabled.tabs', []);
        selectedImage = imageSelection.find('li.ui-selected img').attr('src');
    }
    
    textFlow.click(function() {
        textFlow.removeClass('selected');
        jQuery(this).addClass('selected');
        jQuery('#textFlowPreviewImage').attr('class',jQuery(this).attr('flowClass'));
    });
    
    imageFilter.keyup(function(){
        var liveSearchBox = jQuery(this);
        var term = liveSearchBox.val();
        if (term.length > 1) {
            term = '_mime_type:image* ' + term;
        } else {
            //TODO here we should add the term for filter only in current form
            var currentFormName = liveSearchBox.attr('form');
            var currentFormId = liveSearchBox.attr('formId');
            var originalTerm = term;
        	
            term = '_mime_type:image* ';
            if (currentFormName && currentFormName.length > 1) {
                term = term + '_form_name:' + currentFormName + ' ';
            }
        	
            if (currentFormId && currentFormId.length > 1) {
                term = term + '_form_id:' + currentFormId + ' ';
            }
        	
            term = term + originalTerm;
        }
        var data = {
            query : term
        };
        jQuery.ajaxSetup({
            cache: false
        });

        jQuery.getJSON(liveSearchBox.attr('searchUrl'), data, function(data) {
            liveSearchBox.parent().parent().children('#imageSelection').find('li').remove();
            for ( var i = 0; i < data.length  && i < 10; i++) {
                var tags = data[i]._tags;
                if (tags == undefined) {
                    tags = '';
                }
                var formName = data[i]._form_name;
                var formId = data[i]._form_id;
                var title = data[i]._title;
                var width = data[i].tika_width;
                var height = data[i].tika_height;
            	
                var link = '<li class="ui-widget-content"><img src="/attachment/' + formName + '/' + formId +'//'+ title;
                //if (width != null && height != null) {
                //   link = link + '?parameters=x' + width + ',y' + height;
                //	}
                link = link + '" tags="'+tags+'">'+title+'</li>';
                liveSearchBox.parent().parent().children('#imageSelection').append(link);
            }
            imageSelection.children('li:first').addClass('ui-selected');
            setStateAfterSelection();
        });
    });
    
    imageLink.suggest("/remote/autosuggest/",{
        indexTypes: 'form, admin',
        indexNames: 'page, blog, task, profile, project, organization, idea, comment, event, market; attachment',
        getValue: function(currentResult) {
            var form = currentResult.children()[0].getAttribute('form');
            var firstIndex = currentResult.text().indexOf('(');
            var lastIndex = currentResult.text().lastIndexOf(')');
            var id = currentResult.text().substring(firstIndex+1, lastIndex);     
            if (form == 'attachment') {
                var index = id.lastIndexOf('/');
                return '/attachment' + id.substring(0, index) + '/' + id.substring(index);
            }   
            return '/record/' + form + '/' + id;
        }
    });
    
    imageFilter.get(0).update=function() {
        imageFilter.keyup();
    };
});