var state = 'url';
var canMove = true;
var lastIconEdited = 0;

function init() {
    var name = document.getElementById('web-name');
    name.style.display = 'none';

    var form = document.getElementById('add-form');
    form.onsubmit = function(e) {return validate(this);}
    form.elements["url"].onkeyup = function(e) {return checkURL(this);}
    form.elements["add"].disabled = true;

    var items = getElementsByClassName('remove-icon', 'IMG', document);
    for (var i = 0; i < items.length; i++) {
        items[i].onclick = function() {return removeItem(this);}
    }

    items = getElementsByClassName('up-icon', 'IMG', document);
    for (i = 0; i < items.length; i++) {
        items[i].onclick = function() {return upItem(this);}
    }

    items = getElementsByClassName('down-icon', 'IMG', document);
    for (i = 0; i < items.length; i++) {
        items[i].onclick = function() {return downItem(this);}
    }

    items = getElementsByClassName('nowhere', 'A', document);
    for (i = 0; i < items.length; i++) {
        items[i].onclick = function() {return false;}
    }

    items = getElementsByClassName('ajaxize', 'A', document);
    for (i = 0; i < items.length; i++) {
        items[i].onclick = function() {return callFromAjax(this);}
    }

    items = getElementsByClassName('editicon', 'IMG', document);
    for (i = 0; i < items.length; i++) {
        items[i].onclick = function() {return editIcon(this);}
    }

    items = getElementsByClassName('icon-select', 'IMG', document);
    for (i = 0; i < items.length; i++) {
        items[i].onclick = function() {return selectIcon(this);}
    }

    items = getElementsByClassName('ulid-form', 'FORM', document);
    for (i = 0; i < items.length; i++) {
        items[i].onsubmit = function() {return editUlink(this);}
    }

    items = getElementsByClassName('test-login', 'A', document);
    for (i = 0; i < items.length; i++) {
        items[i].onclick = function() {return openExternalWeb(this);}
    }

    items = getElementsByClassName('ask-login', 'A', document);
    for (i = 0; i < items.length; i++) {
        items[i].onclick = function() {return askForLogin(this);}
    }
}

function askForLogin(item) {
    var form = findParent(item, 'FORM');
    var id = form.elements["id"].value;
    xmlhttpPost('/action/a_ask4login/', 'id='+id, askForLoginOk);
    return false;
}

function askForLoginOk(resp) {
    alertPopup("Tu solicitud se ha registrado correctamente. Se evaluara en los proximos dias, estate atento.");
}

function openExternalWeb(item) {
    var form = findParent(item, 'FORM');
    var user = form.elements["web-user"].value;
    var pwd = form.elements["web-pwd"].value;
    var url = form.elements["login-url"].value;
    var params = form.elements["login-params"].value;

    params = params.replace('%user%', encodeURIComponent(user));
    params = params.replace('%pwd%', encodeURIComponent(pwd));

    params = encode64(params);
    var my_params = "?url=" + encodeURIComponent(url) + "&params=" + encodeURIComponent(params);
    var link = item.href;
    var pos = link.indexOf('x.js');
    link = link.substring(0, pos+4) + my_params + link.substring(pos+4, link.length);

    window.open(link);
    return false;
}

function editUlink(item) {
    var id = item.elements["id"].value;
    var url = item.elements["url"].value;
    var user = item.elements["web-user"].value;
    var pwd = item.elements["web-pwd"].value;
    var ulid = item.elements["ulid"].value;
    xmlhttpPost('/action/a_edit_ulink/', 
            'id='+id+'&ulid='+ulid+'&url='+encodeURIComponent(url)+'&web-user='+
                encodeURIComponent(user)+'&web-pwd='+encodeURIComponent(pwd),
            ulidEdited);
    return false;
}

function ulidEdited(resp) {
    var result = splitEx(resp, ' ', 2);
    if (result[0] != 'ok') {
        alertPopup("Se produjo un error modificando los datos del enlace. Por favor recarga la pagina.");
    }
}

function editIcon(item) {
    var div = findParent(item, 'DIV');
    var ulid = div.id.split('-');
    lastIconEdited = ulid[1];
    openPopup('icons-popup');
    loadImages();
}

function selectIcon(item) {
    var iconParts = item.src.split('/');
    var icon = iconParts[iconParts.length-1];
    xmlhttpPost('/action/a_change_icon/', 'ulid='+lastIconEdited+'&icon='+encodeURIComponent(icon), changeIcon);
    closePopupByName('icons-popup');
}

function changeIcon(resp) {
    var result = splitEx(resp, ' ', 3);
    if (result[0] == 'ok') {
        var ulid = 'ulid-' + result[1];
        var item = document.getElementById(ulid);
        var imgs = getElementsByClassName('editicon', 'IMG', item);
        if (imgs[0]) {
            imgs[0].src = result[2] + '?time=' + Math.ceil(Math.random() * 10000);
        }
    } else {
        alertPopup("No se pudo cambiar el icono");
    }
}

function callFromAjax(item) {
    var pos = item.href.lastIndexOf('link=');
    var site = item.href.substring(pos + 5);
    xmlhttpPost('/action/a_add_link/', 'link='+site, showNewLink);
    return false;
}

function upItem(item) {
    if (!canMove) return;

    var div = findParent(item, 'DIV');
    var id = div.id;

    var links = document.getElementById('the-links');
    var childs = links.getElementsByTagName("DIV");
    for (var i = 0;  i < childs.length;  i++) {
        if (childs[i].id == id) {
            if (i-1 >= 0) {
                if (i-1 == 0) {
                    var up = getElementsByClassName('up-icon', 'IMG', childs[i-1]);
                    up[0].className = removeClass(up[0].className, 'invisible');
                    up = getElementsByClassName('up-icon', 'IMG', childs[i]);
                    up[0].className = addClass(up[0].className, 'invisible');
                }
                if (i == childs.length - 1) {
                    var down = getElementsByClassName('down-icon', 'IMG', childs[i]);
                    down[0].className = removeClass(down[0].className, 'invisible');
                    down = getElementsByClassName('down-icon', 'IMG', childs[i-1]);
                    down[0].className = addClass(down[0].className, 'invisible');
                }
                links.insertBefore(childs[i], childs[i-1]);
                break;
            }
        }
    }

    if (i-1 >= 0) {
        canMove = false;
        var ulid1 = childs[i].id.split('-');
        var ulid2 = childs[i-1].id.split('-');
        xmlhttpPost('/action/a_xchg_ulink/', 'from='+ulid1[1]+'&to='+ulid2[1], restoreMove);
    }
}

function downItem(item) {
    if (!canMove) return;

    var div = findParent(item, 'DIV');
    var id = div.id;

    var links = document.getElementById('the-links');
    var childs = links.getElementsByTagName("DIV");
    for (var i = 0;  i < childs.length;  i++) {
        if (childs[i].id == id) {
            if (i+1 < childs.length) {
                if (i == 0) {
                    var up = getElementsByClassName('up-icon', 'IMG', childs[i]);
                    up[0].className = removeClass(up[0].className, 'invisible');
                    up = getElementsByClassName('up-icon', 'IMG', childs[i+1]);
                    up[0].className = addClass(up[0].className, 'invisible');
                }
                if (i == childs.length - 2) {
                    var down = getElementsByClassName('down-icon', 'IMG', childs[i+1]);
                    down[0].className = removeClass(down[0].className, 'invisible');
                    down = getElementsByClassName('down-icon', 'IMG', childs[i]);
                    down[0].className = addClass(down[0].className, 'invisible');
                }
                links.insertBefore(childs[i+1], childs[i]);
                break;
            }
        }
    }

    if (i+1 < childs.length) {
        canMove = false;
        var ulid1 = childs[i].id.split('-');
        var ulid2 = childs[i+1].id.split('-');
        xmlhttpPost('/action/a_xchg_ulink/', 'from='+ulid1[1]+'&to='+ulid2[1], restoreMove);
    }
}

function restoreMove(resp) {
    canMove = true;
}

function removeItem(item) {
    var div = findParent(item, 'DIV');
    var ulid = div.id.split('-');
    xmlhttpPost('/action/a_delete_link/', 'id='+ulid[1]+'&t=0', removeLink);
}

function removeLink(resp) {
    var result = splitEx(resp, ' ', 2);
    if (result[0] == 'ok') {
        var item = document.getElementById('ulid-' + result[1]);
        var div = findParent(item, 'DIV');
        var parent = div.parentNode;
        parent.removeChild(div);

        var allItems = parent.getElementsByTagName('DIV');
        var lastItem = allItems[allItems.length - 1];
        var down = getElementsByClassName('down-icon', 'IMG', lastItem);
        down[0].className = addClass(down[0].className, 'invisible');
    } else {
        alertPopup("Error inesperado. No se pudo eliminar el enlace.");
    }
}

function checkURL(item) {
    var redAlert = document.getElementById('red-alert');
    var form = document.getElementById('add-form');
    form.elements["add"].disabled = true;

    var res = item.value.match(/^http(s)?:\/\/[a-z0-9-]+(\.[a-z0-9-]+)+?(:[0-9]+)?(\/)?.*$/i);
    if (res != null) {
        form.elements["add"].disabled = false;
        redAlert.style.visibility = 'hidden';
        state = 'check';
    } else {
        form.elements["add"].disabled = true;
        redAlert.style.visibility = 'visible';
        state = 'url';
    }
}

function validURL(resp) {
    var redAlert = document.getElementById('red-alert');
    var wait = document.getElementById('wait');
    wait.style.visibility = 'hidden';

    var result = splitEx(resp, ' ', 2);
    if (result[0] == 'ok') {
        var form = document.getElementById('add-form');
        form.elements["add"].disabled = false;
        redAlert.style.visibility = 'hidden';

        var web = result[1].split(',');
        var site = web[0];
        if (site == 'new') {
            var title = web[1];
            var name = document.getElementById('web-name');
            name.style.display = 'block';
            form.elements["name"].value = title;
            form.elements["name"].focus();
            state = 'ready';
        } else {
            form.elements["name"].value = '';
            form.elements["url"].value = 'http://';
            form.elements["private"].checked = false;

            addLink(site);
            state = 'url';
        }
    } else {
        redAlert.style.visibility = 'visible';
        state = 'url';
    }
}

function validate(form) {
    var wait = document.getElementById('wait');

    if (state == 'check') {
        state = 'checking';
        form.elements["add"].disabled = true;
        wait.style.visibility = 'visible';
        var redAlert = document.getElementById('red-alert');
        redAlert.style.visibility = 'hidden';

        xmlhttpPost('/action/a_check_url/', 'url='+encodeURIComponent(form.elements["url"].value), validURL);
    } else if (state == 'ready') {
        if (form.elements["name"].value.length >= 3) {
            form.elements["add"].disabled = true;
            wait.style.visibility = 'visible';
            createLink(form);
        }
    }
    return false;
}

function createLink(form) {
    var url = form.elements["url"].value;
    var name = form.elements["name"].value;
    var isPrivate = form.elements["private"].checked;
    var isMark = form.elements["mark"].value;

    xmlhttpPost('/action/a_create_link/', 'url='+encodeURIComponent(url)+
            '&name='+encodeURIComponent(name)+'&private='+isPrivate+'&mark='+isMark, showNewLink);
}

function addLink(site) {
    xmlhttpPost('/action/a_add_link/', 'link='+site, showNewLink);
}

function showNewLink(resp) {
    var result = splitEx(resp, ' ', 2);
    if (result[0] == 'ok') {
        var link = result[1].split(',');
        var id = link[0];
        var ulid = link[1];
        var name = link[2];
        var show = link[3];
        var url = link[4];
        var icon = link[5];
        var wlogin = link[6];
        var wparams = link[7];

        hideMenuItems(new Array());

        if (show == '1') {
            var links = getElementsByClassName('link', 'DIV', document);
            var newLink = links[0].cloneNode(true);
            newLink.id = 'ulid-' + ulid;

            var icons = getElementsByClassName('favicon', 'IMG', newLink);
            icons[0].src = icon;
            icons[0].alt = icons[0].title = name;
            var span = getElementsByClassName('name', 'SPAN', newLink);
            for (var i = 0; i < span.length; i++) {
                span[i].innerHTML = name;
            }
            var alink = getElementsByClassName('a-link', 'A', newLink);
            alink[0].href = 'http://' + url;

            var form = getElementsByClassName('ulid-form', 'FORM', newLink)[0];
            form.elements["url"].value = 'http://' + url;
            form.elements["id"].value = id;
            form.elements["ulid"].value = ulid;
            form.elements["web-user"].value = '';
            form.elements["web-pwd"].value = '';
            form.onsubmit = function() {return editUlink(this);}

            var ilogin = getElementsByClassName('icon-login', 'SPAN', newLink);
            var ialogin = getElementsByClassName('icon-ask-login', 'SPAN', newLink);
            if (wlogin != '') {
                ilogin[0].className = removeClass(ilogin[0].className, 'hidden');
                ialogin[0].className = addClass(ialogin[0].className, 'hidden');
                form.elements["login-url"].value = wlogin;
                form.elements["login-params"].value = wparams;
            } else {
                ilogin[0].className = addClass(ilogin[0].className, 'hidden');
                ialogin[0].className = removeClass(ialogin[0].className, 'hidden');
                form.elements["login-url"].value = '';
                form.elements["login-params"].value = '';
            }
            ialogin[0].onclick = function() {return askForLogin(this);}
            var itest = getElementsByClassName('test-login', 'A', newLink);
            itest[0].onclick = function() {return openExternalWeb(this);}

            var up = getElementsByClassName('up-icon', 'IMG', newLink);
            var down = getElementsByClassName('down-icon', 'IMG', newLink);
            up[0].className = removeClass(up[0].className, 'invisible');
            up[0].onclick = function() {return upItem(this);}
            down[0].className = addClass(down[0].className, 'invisible');
            down[0].onclick = function() {return downItem(this);}
            var remove = getElementsByClassName('remove-icon', 'IMG', newLink);
            remove[0].title = "Quitar enlace a " + name;
            remove[0].onclick = function() {return removeItem(this);}
            var oldLastLink = links[links.length-1];
            down = getElementsByClassName('down-icon', 'IMG', oldLastLink);
            down[0].className = removeClass(down[0].className, 'invisible');

            var last = links[links.length-1];
            last.parentNode.appendChild(newLink);
        }

        if (state == 'ready') {
            var form = document.getElementById('add-form');
            form.elements["url"].value = 'http://';
            form.elements["name"].value = '';
            form.elements["private"].checked = false;

            var webname = document.getElementById('web-name');
            webname.style.display = 'none';
            var wait = document.getElementById('wait');
            wait.style.visibility = 'hidden';

            state = 'url';
        }
    } else {
    }
}

function loadImages() {
    var father = document.getElementById('icon-content');
    var items = getElementsByClassName('icon-select', 'IMG', father);
    if (items[0]) {
        items[0].src = items[0].title;
        items[0].title = 'Seleccionar';
        items[0].className = 'icon-load';
        setTimeout(loadImages, 100);
    }
}

addLoadEvent(init);