var fileFormPlacer = null;
var formDiv = null;
/**
 * Remove from Document inputs and it parents based at array of names
 * First element in array make it parent as file form holder 
 * @param array inputs
 * @return
 */
function replaceOriginFilesInput(inputs)
{
    var div = Ext.get(inputs[0]).parent();
    var el = div.last();
    el.setDisplayed(false);
    while (el = el.prev()){
        el.setDisplayed(false)
    }
    for (var i = 1; i < inputs.length; i++){
        Ext.fly(inputs[i]).parent().setDisplayed(false);
    }
    fileFormPlacer = div;
    div.setStyle({height: '60px'});
    Ext.ux.Lightbox.register("a.lb-images", true);
}

/**
 * Prepare form for uploading files and out it over holder
 * @param inputLabel
 * @param buttonLabel
 * @return
 */
function prepareForm(inputLabel, buttonLabel)
{
    if (!fileFormPlacer){
        return
    }
    var parent =  fileFormPlacer.parent('form').parent();
    var config ={tag: 'br', clear: 'both'};
    fileFormPlacer.parent('form').createChild(config, fileFormPlacer.next());
    var config = {tag: 'div', id: 'file-form-div', style:"position:absolute"};
    formDiv = parent.createChild(config);
    var config = {tag: 'form', id:'file-form', enctype: "multipart/form-data", style:'float:left'};
    var form = formDiv.createChild(config);
    formDiv.setX(fileFormPlacer.getX());
    formDiv.setY(fileFormPlacer.getY());
    setInterval(function(){ 
        formDiv.setX(fileFormPlacer.getX());
        formDiv.setY(fileFormPlacer.getY());
        }, 
        1000
    );
    var config = {tag: 'label', html: inputLabel, style: 'display: block; margin-bottom: 5px;'};
    var label = form.createChild(config);
    label.set({"for": 'image'});
    var config = {
        tag: 'input', 
        id: 'image',
        name: 'image', 
        type:"file", 
        tabindex: 4
    };
    var input = form.createChild(config);
    form.createChild({tag: 'br'});
    var config = {tag: 'label', html: buttonLabel, style: 'display: block; margin-top: 5px;'};
    var label = form.createChild(config);
    input.on('change', uploadFile);
    var config = {
        url: '/image-all',
        success: getAllUploaded
    };
    Ext.Ajax.request(config);
}

function getAllUploaded(r, o)
{
    var result = Ext.util.JSON.decode(r.responseText);
    if (result.success){
        for (var i = 0; i < result.images.length; i++){
            r = Ext.util.JSON.encode(result.images[i]);
            uploadResponse({responseText:r}, {});
        }
    }
}

function uploadFile(e,t,o)
{
    
    var d = new Date();
    var token = d.getTime()+ '-' + Math.floor(Math.random()*10000);
    
    var config = {
        tag: 'div', 
        id:'loading-' + token,
        cls: 'dynamicUploadedImage'
    };
    var imageDiv = fileFormPlacer.createChild(config);
    var config = {
        tag: 'img',
        style:'margin-bottom:5px;',
        src: '/images/lb-load.gif'
    };
    imageDiv.createChild(config);
    
    var config = {
        url: '/image-upload',
        form: 'file-form',
        success: uploadResponse,
        failure: uploadFileFailure,
        isUpload: true,
        params: {token: token}
    };

    Ext.Ajax.request(config);
    var input = Ext.get(t);
    input.dom.value = '';
}

function uploadFileFailure(r, o)
{
    alert('Server Connection Error!');
    var loader = Ext.get('loading-' + o.params.token);
    if (loader){
        loader.remove();
    }
}

function uploadResponse(r,o)
{
    if (o.params){
        var loader = Ext.get('loading-' + o.params.token);
        if (loader){
            loader.remove();
        }
    }
    var result = Ext.util.JSON.decode(r.responseText);
    if (result.success){
        var config = {
            tag: 'div', 
            id:'image-preview-div-' + result.key,
            cls: 'dynamicUploadedImage'
        };
        var imageDiv = fileFormPlacer.createChild(config);
        
        var config = {
            tag: 'a',
            cls: 'lb-images'
        };
        a = imageDiv.createChild(config);
        a.set({"href":result.links.image});
        var config = {
            tag: 'img'
        };
        var i = a.createChild(config);
        i.set({"src":result.links.preview});
        i.setStyle({"margin-bottom":"5px"});
        imageDiv.createChild({tag:'br'});
        var config = {
            tag: 'a',
            html: 'Remove'
        };
        var a = imageDiv.createChild(config);
        a.set({"href":"javascript:void(0)", "imageid":result.key});
        a.on('click', removeImage, null, {key:result.key });
    } else {
        alert(result.message);
    }
}

function removeImage (evt,el,o){
    var config = {
        url: '/image-remove',
        params:{key:o.key}
    }
    Ext.Ajax.request(config);
    Ext.fly('image-preview-div-' + o.key).remove();
}