function showDiv(toshow, tohide) {
    $(toshow).setStyle('display', 'block');
    $(tohide).setStyle('display', 'none');
}

function toggleLanguage(event, lang) {
    target = event.target ? event.target : event.srcElement;
    _doToggleLanguage(target, lang);
}

function _doToggleLanguage(elem, lang) {
    sps = $('langs').getElements('li');
    sps.each(function(item, index) {
        item.removeClass('langSelected');
    });
    divs = $('multilingual').childNodes;
    for (i=0;i<divs.length;i++) {
        if ( divs[i].nodeName != 'DIV') {
            continue;
        }
        d = $(divs[i]);
        d.setStyle('display', 'none');
    }
    $('lang_'+lang).setStyle('display', 'block');
    elem.addClass('langSelected');
}

function _add_lang_handler() {
    lcode = $('new_lang_code').get('value');
    ml = $('multilingual');

    // data div itself
    l = ml.getFirst();
    n = l.clone();
    n.set('id', 'lang_'+lcode);
    n.inject(ml);

    inps = n.getElements('input');
    labels = n.getElements('label');
    ta = n.getElements('textarea');

    // change inputs
    for (i=0; i<inps.length; i++ ) {
        el = inps[i];
        nam = el.get('name');
        nam = nam.substring(nam.indexOf('_')+1);
        elnam = lcode+'_'+nam;
        elpar = el.getParent();
        //el.setAttribute('name', lcode+'_'+nam);
        //el.setProperty('name', lcode+'_'+nam);
        //el.setAttribute('id', lcode+'_'+nam);
        //el.setAttribute('value', '');
        newel = new Element('input', {'type': 'text', 'id':elnam, 'name':elnam});
        newel.inject(elpar);

        spans = elpar.getElements('span.vocabularyButton');
        for (j=0; j<spans.length; j++ ) {
            selm = spans[j];
            selm.destroy();
            selm = new Element('span', {'class': 'vocabularyButton', 'text': ' V',
                    'events': {'click': vocabulary.display_vocabulary.bind(vocabulary, [nam, elnam]) } 
                    });
            selm.inject(elpar);
        }
        el.destroy();
    }

    // change labels
    for (i=0; i<labels.length; i++) {
        lab = labels[i];
        nam = lab.get('for');
        nam = nam.substring(nam.indexOf('_')+1);
        lab.set('for', lcode+'_'+nam);
    }

    // change textareas
    // TODO

    // change spans - vocabulary clickable
    /*
    for (i=0; i<spans.length; i++ ) {
        el = spans[i];
        o = el.get('textonclick');
        spl = o.split('display_vocabulary');
        attrs = spl[1];
        for (j=0; j<10; j++ ) {
            attrs = attrs.replace(/'/, '');
            attrs = attrs.replace(/\(/, '');
            attrs = attrs.replace(/\)/, '');
        }
        atts = attrs.split(',');
        fname = atts[0].trim();
        eid = atts[1].trim();
        eid = lcode + '_' + eid.substring(eid.indexOf('_')+1);
        el.set('onclick', "javascript:vocabulary.display_vocabulary('"+fname+"', '"+eid+"')");
    }
    */

    // add lang to langsbar
    //lo = $('langs').getFirst().getFirst();
    //nlo = lo.clone();
    //nlo.set('onclick', "javascript:toggleLanguage(event, '"+lcode+"')");
    ocl = "javascript:toggleLanguage(event, '"+lcode+"')";
    //nlo.set('text', lcode);
    //nlo.injectBefore($('addLanguage'));
    nlo = new Element('li', {'class': 'clickable', 
        'text':lcode,
        'events':{'click': toggleLanguage.bindWithEvent(this, lcode)}
    });
    nlo.injectBefore($('addLanguage'));

    // create a hidden input
    hid = new Element('input', {'type': 'hidden', 'name': 'md_rlang:list','value': lcode});
    hid.inject($('resource_languages'));

    // destroy overlay
    destroyOverlay();
    _doToggleLanguage(nlo, lcode);
}

function addLanguage() {
    createOverlay();
    c = $('vocContainer');
    p = new Element('div', {'style': 'text-align:center; position: absolute; width:90%'});
    p.setStyle('top', c.getSize().y/2);
    txt = new Element('span', {'text': 'Type in the language code:'});
    txt.inject(p);
    b = new Element('br');
    b.inject(p);
    lcode = new Element('input', {'id': 'new_lang_code'});
    lcode.inject(p);
    lsub = new Element('input', {
            'type': 'button', 
            'value': 'OK',
            'events': {'click': _add_lang_handler}
            });
    lsub.inject(p);
    lcan = new Element('input', {
            'type': 'button', 
            'value': 'Cancel',
            'events': {'click': destroyOverlay}
            });
    lcan.inject(p);
    p.inject(c);
}

function createOverlay() {
    bod = $(document.body)
    d = new Element('div', {'class' : 'overlay', 'id' : 'overlay'});
    d.inject(bod, 'top');
    d.setStyle('height', bod.getScrollSize().y);

    vc = new Element('div', {'class' : 'vocContainer', 'id' : 'vocContainer'});
    vc.inject(bod);
    vc.setStyle('width', window.getSize().x-300);
    vc.setStyle('height', window.getSize().y-170);
    vc.setStyle('top', 100+window.getScroll().y);
    vc.setStyle('left', 215);
    
    cl = new Element('div', {
        'class' : 'vocClose', 
        'events': {'click': destroyOverlay}
    });
    cl.set('html', '<span>Close</span>');
    cl.inject(vc);
}

function destroyOverlay() {
    $('overlay').destroy();
    $('vocContainer').destroy();
    document.fireEvent('overlayClosed');
}

/*
 * BEGIN: file upload 
 * */

function removeFile(fid, temporal) {
    r = new Request.JSON({url: 'removeAttachmentJSON', onComplete: populateFiles}).get({'rid': $('resourceID').get('value'), 'fid': fid});
    destroyOverlay();
}

function warnFileRemoval(fid, temporal) {
    console.log(fid);
    console.log(temporal);
    createOverlay();
    c = $('vocContainer');
    p = new Element('div', {'style': 'text-align:center; position: absolute; width:90%'});
    p.setStyle('top', c.getSize().y/2);
    txt = new Element('span', {'text': 'Are you sure you want to remove a file? This cannot be undone and file is permanently lost!'});
    txt.inject(p);
    b = new Element('br');
    b.inject(p);
    cnB = new Element('input', {'type': 'submit', 'value': 'Cancel', 'events':{'click': destroyOverlay}});
    cnB.inject(p);
    p.appendText(' ');
    okB = new Element('input', {'type': 'submit', 'value': 'I am sure, delete', 'events':{'click':removeFile.bind(null, [fid, temporal])}});
    okB.inject(p);
    p.inject(c);
}

function populateFiles(flist) {
    console.log("... pop files");
    console.log(flist);
    fl = $('filesList');
    fl.set('html', '');
    for (i=0; i<flist.length; i++) {
        fid = flist[i][0];
        fname = flist[i][1];
        tmp = false;
        if ( flist[i].length == 3 ) {
            tmp = flist[i][2];
        }
        d = new Element('div', {'id': 'file_'+fid});
        d.inject(fl);
        spCl = new Element('span', {'class': 'closeCross', 'text': 'X', 
                'events':{'click': warnFileRemoval.bind(null, ['file_'+fid, tmp])}
                });
        spCl.inject(d);
        spE = new Element('span', {'html': '&nbsp;'});
        spE.inject(d);
        spFn = new Element('span', {'text': fname});
        spFn.inject(d);
    }
}

function filesOverlayClosed() {
    r = new Request.JSON({url: 'listAttachmentsJSON', onComplete: populateFiles}).get({'rid': $('resourceID').get('value')});
    document.removeEvent('overlayClosed', filesOverlayClosed);
}

function startUpload() {
    createOverlay();
    c = $('vocContainer');
    p = new Element('iframe', {'src': 'upload.html', 'id': 'uploadIframe', 'frameborder': '0'});
    p.setStyle('top', c.getSize().y/2);
    p.setStyle('top', 0);
    p.inject(c);
    document.addEvent('overlayClosed', filesOverlayClosed);
}


/*
 * END: file upload
 * */

function Vocabulary() {
    this.putback = "";
    this.field = "";
    this.expanding = null;
}

Vocabulary.prototype.expandVocabulary = function(cid) {
    this.expanding = cid;
    r = new Request.JSON({url: 'getVocabulary', onComplete: this.populateVocabulary.bind(this)}).get({'field': this.field, 'par': cid});
}

Vocabulary.prototype.useVocabulary = function(a) {
    pb = $(this.putback);
    if ( pb.value.length == 0 ) {
        pb.value = a;
    } else {
        pb.value += ", "+a;
    }
    pb.fireEvent('change');
    destroyOverlay();
}

Vocabulary.prototype.populateVocabulary = function(j, k, l) {
    expands = j.expands;
    j = j.results;
    if ( j.length == 0 && this.expanding != null ) {
        this.useVocabulary(this.expanding);
        return;
    }
    if ( $('vocList') != null ) {
        p.set('html', '');
    } else {
        p = new Element('div', {'id': 'vocList'});
        p.inject($('vocContainer'));
    }
    for (i=0; i<j.length; i++) {
        e = j[i];
        l = new Element('div');
        counter = "";
        if ( e[0] != null ) {
            counter = '('+e[0]+')';
        }
        if ( e.length == 3 ) {
            l.set('text', e[2]+counter);
        } else {
            l.set('text', e[1]+counter);
        }
        if ( !expands ) {
            l.addEvent('click', this.useVocabulary.bind(this, e[1]));
        } else {
            l.addEvent('click', this.expandVocabulary.bind(this, e[1]));
        }

        l.inject(p);
        p.appendText(' ');
    }
}

Vocabulary.prototype.display_vocabulary = function(field, elemid) {
    this.putback = elemid;
    this.field = field;
    this.expanding = null;
    createOverlay();
    r = new Request.JSON({url: 'getVocabulary', onComplete: this.populateVocabulary.bind(this)}).get({'field': field});
    document.removeEvent('overlayClosed', filesOverlayClosed);
}

function startUpload() {
    createOverlay();
    c = $('vocContainer');
    p = new Element('iframe', {'src': 'upload.html', 'id': 'uploadIframe', 'frameborder': '0'});
    p.setStyle('top', c.getSize().y/2);
    p.setStyle('top', 0);
    p.inject(c);
    document.addEvent('overlayClosed', filesOverlayClosed);
}


/*
 * END: file upload
 * */

function Vocabulary() {
    this.putback = "";
    this.field = "";
    this.expanding = null;
}

Vocabulary.prototype.expandVocabulary = function(cid) {
    this.expanding = cid;
    r = new Request.JSON({url: 'getVocabulary', onComplete: this.populateVocabulary.bind(this)}).get({'field': this.field, 'par': cid});
}

Vocabulary.prototype.useVocabulary = function(a) {
    pb = $(this.putback);
    if ( pb.value.length == 0 ) {
        pb.value = a;
    } else {
        pb.value += ", "+a;
    }
    pb.fireEvent('change');
    destroyOverlay();
}

Vocabulary.prototype.populateVocabulary = function(j, k, l) {
    expands = j.expands;
    j = j.results;
    if ( j.length == 0 && this.expanding != null ) {
        this.useVocabulary(this.expanding);
        return;
    }
    if ( $('vocList') != null ) {
        p.set('html', '');
    } else {
        p = new Element('div', {'id': 'vocList'});
        p.inject($('vocContainer'));
    }
    for (i=0; i<j.length; i++) {
        e = j[i];
        l = new Element('div');
        counter = "";
        if ( e[0] != null ) {
            counter = '('+e[0]+')';
        }
        if ( e.length == 3 ) {
            l.set('text', e[2]+counter);
        } else {
            l.set('text', e[1]+counter);
        }
        if ( !expands ) {
            l.addEvent('click', this.useVocabulary.bind(this, e[1]));
        } else {
            l.addEvent('click', this.expandVocabulary.bind(this, e[1]));
        }

        l.inject(p);
        p.appendText(' ');
    }
}

Vocabulary.prototype.display_vocabulary = function(field, elemid) {
    this.putback = elemid;
    this.field = field;
    this.expanding = null;
    createOverlay();
    r = new Request.JSON({url: 'getVocabulary', onComplete: this.populateVocabulary.bind(this)}).get({'field': field});
}

window.addEvent('domready', function() {
        window.vocabulary = new Vocabulary();
        });