var items;
var userTags;
var members;
var currMember2Load = 0;
var groupURL = "http://devel.patrickgmj.net/prsonsmushr/groups/dtlt";

function renderItems() {
    
    for (var i = 0; i < items.length; i++) {
        if (i == 0) {
            var nextyTop = 2;
        }
        
        var newItem = new Item(items[i].resourceSet, items[i].name, nextyTop);
        newItem.setHeight();
        newItem.setYPosition();
        newItem.drawSVG();
        newItem.drawResources();
        
        var nextyTop = newItem.yTop + newItem.height + 20;
    }
    
    killWaitDiv();
    
}


function Item(resourceSet, label, yTop) {
    this .resourceSet = resourceSet;
    this .label = label;
    this .yTop = yTop;
    this .height;
    this .yPosition;
    this .mainG = document.createElementNS('http://www.w3.org/2000/svg', 'svg:g');
    
    this .setHeight = function () {
        var size = this .resourceSet.length;
        this .height = 10 + size * 16;
    };
    
    this .setYPosition = function () {
        this .yPosition = 5 + (this .height) /2;
    };
    
    this .drawSVG = function () {
        //make the label text
        var labelText = document.createElementNS('http://www.w3.org/2000/svg', 'svg:text');
        labelText.appendChild(document.createTextNode(this .label));
        labelText.setAttribute('fill', '#86BA0C');
        labelText.setAttribute('dy', '-3');
        //put in the line underneath
        var ln = document.createElementNS('http://www.w3.org/2000/svg', 'svg:line');
        ln.setAttribute('stroke', 'black');
        ln.setAttribute('stroke-opacity', '.5');
        ln.setAttribute('stroke-width', '2');
        ln.setAttribute('x1', '0');
        ln.setAttribute('y1', '0');
        ln.setAttribute('x2', '230');
        ln.setAttribute('y2', '0');
        //add it all to a group
        var labelG = document.createElementNS('http://www.w3.org/2000/svg', 'svg:g');
        
        labelG.appendChild(labelText);
        labelG.appendChild(ln);
        labelG.setAttribute('transform', 'translate(0, ' + this .yPosition + ')');
        this .mainG.appendChild(labelG);
        this .mainG.setAttribute('transform', 'translate(0, ' + this .yTop + ')');
        //add it to svg:svg element
        var svg = document.getElementById('display-svg');
        svg.appendChild(this .mainG);
    }
    
    this .drawResources = function () {
        for (var i = 0; i < this .resourceSet.length; i++) {
            var labelText = document.createElementNS('http://www.w3.org/2000/svg', 'svg:text');
            var linktSpan = document.createElementNS('http://www.w3.org/2000/svg', 'svg:tspan');
            linktSpan.appendChild(document.createTextNode(prettifyText(resourceSet[i].title)));
            linktSpan.setAttribute('onclick', 'window.open("' + resourceSet[i].url + '", "newWin")');
            linktSpan.setAttribute('fill', '#EF7C00');
            
            var moretSpan = document.createElementNS('http://www.w3.org/2000/svg', 'svg:tspan');
            moretSpan.appendChild(document.createTextNode(' (More about this item)'));
            moretSpan.setAttribute('font-size', '10');
            
            moretSpan.setAttribute('onclick', 'showMore(evt, "' + resourceSet[i].url + '")');
            labelText.appendChild(linktSpan);
            labelText.appendChild(moretSpan);
            labelText.setAttribute('fill', '#BD1789');
            //make a group
            var newG = document.createElementNS('http://www.w3.org/2000/svg', 'svg:g');
            
            //calculate the yposition for transformation
            var yPos = (i * 18) + 22;
            newG.setAttribute('transform', 'translate(250, ' + yPos + ')');
            
            newG.appendChild(labelText);
            this .mainG.appendChild(newG);
            
            
            //<svg:path id = "quadcurveABC" d = "M 100 350 Q 150 -300 300 0" stroke = "blue" stroke-width = "5" fill = "none"/>
            var newPath = document.createElementNS('http://www.w3.org/2000/svg', 'svg:path');
            var dStr = "M " + "250 " + (yPos - 5) + " ";
            dStr += "Q " + "230 " + (yPos - 5) + " 230 " + this .yPosition;
            newPath.setAttribute('stroke', '#BD1789');
            newPath.setAttribute('stroke-width', '1');
            newPath.setAttribute('d', dStr);
            newPath.setAttribute('fill', 'none');
            this .mainG.appendChild(newPath);
            
        }
    };
    
}

function showMore(evt, url) {
    var currMoreDiv = document.getElementById('currMoreDiv');
    if (currMoreDiv) {
        currMoreDiv.parentNode.removeChild(currMoreDiv);
    }
    var moreDiv = document.createElement('div');
    
    
    grabResourceSet:
    for (var i = 0; i < items.length; i++) {
        for (var j = 0; j < items[i].resourceSet.length; j++) {
            if (items[i].resourceSet[j].url == url) {
                var resrc = items[i].resourceSet[j];
                break grabResourceSet;
            }
        }
    }
    
    var moreDiv = document.createElement('div');
    var killBox = document.createElement('div');
    killBox.setAttribute('style', 'padding: 2px; position: relative; left: 10px; top: 5px; height: 15px; width: 15px; border: 1px solid black; cursor: pointer;');
    killBox.appendChild(document.createTextNode('X'));
    killBox.setAttribute('onclick', 'this.parentNode.parentNode.removeChild(this.parentNode);');
    moreDiv.appendChild(killBox);
    var links2Div = document.createElement('div');
    var createdOnP = document.createElement('p');
    createdOnP.appendChild(document.createTextNode('Posted on: ' + resrc.created));
    moreDiv.appendChild(createdOnP);
    var links2H3 = document.createElement('h3');
    links2H3.appendChild(document.createTextNode('This item links to:'));
    links2Div.appendChild(links2H3);
    for (var i = 0; i < resrc.linksTo.length; i++) {
        var newP = document.createElement('p');
        newA = document.createElement('a');
        newA.setAttribute('target', '_blank');
        newA.setAttribute('href', resrc.linksTo[i].url);
        newA.appendChild(document.createTextNode(prettifyText(resrc.linksTo[i].title)));
        newP.appendChild(newA);
        newA.setAttribute('style', 'color: #BD1789');
        links2Div.appendChild(newP);
        
    }
    moreDiv.appendChild(links2Div);
    var xPos = evt.pageX + 25;
    var yPos = evt.pageY - 10;
    moreDiv.setAttribute('style', 'border: 2px solid black; background-color: #EF7C00; position:absolute; top: ' + yPos + 'px; left: ' + xPos + 'px;  min-width: 350px; ');
    moreDiv.setAttribute('id', 'currMoreDiv');
    document.body.appendChild(moreDiv);
}

function line2PersonOpt(line) {
    var personSelect = document.getElementById('person-select');
    if ( ! document.getElementById(line.creator)) {
        var newOpt = document.createElement('option');
        
        newOpt.setAttribute('id', line.creator);
       
        newOpt.appendChild(document.createTextNode(line.creatorname));
        personSelect.appendChild(newOpt);
    }
    
}

function line2TagOpt(line) {
    var tagSelect = document.getElementById('tag-select');
    
    var newOpt = findTagOptByLabel(line.tagname);
    if (newOpt) {
        newOpt.tagURIs[newOpt.tagURIs.length] = line.tag;
        newOpt.creators[newOpt.creators.length] = line.creator;
    } else {
        var newOpt = document.createElement('option');
        newOpt.tagURIs = new Array();
        newOpt.tagURIs[0] = line.tag;
        newOpt.creators = new Array();
        newOpt.creators[0] = line.creator;
        newOpt.keep = true;
        newOpt.appendChild(document.createTextNode(prettifyText(line.tagname)));
        tagSelect.appendChild(newOpt);
    }
    
}



function findTagOptByLabel(label) {
    var tagSelect = document.getElementById('tag-select');
    for (var i = 0; i < tagSelect.options.length; i++) {
        if (tagSelect.options[i].textContent == label) {
            return tagSelect.options[i];
        }
    }
    return false;
}

function init() {
    userTags = new Object();
    userTags.lines = new Array();
    var initObj = new InitObj();
    sendData(initObj);
}

function loadMembersInfo() {
    var loadingNotice = document.getElementById('loadingNotice-div');
    if(currMember2Load >= members.length) {

       processUserTags();
    } else {
        newP = document.createElement('p');
        newP.appendChild(document.createTextNode("Getting info for " + members[currMember2Load].name));
        loadingNotice.appendChild(newP);
        newReqObj = new Object();
        newReqObj.url = 'userTags.php';
        newReqObj.userURL = members[currMember2Load].user;
        newReqObj.toPostStr = function() {
            return "userURL="+ this.userURL;
        };
        sendData(newReqObj);
    }

}
function processUserTags() {

    userTags.lines.sort(sortTags);
    for (var i = 0; i < userTags.lines.length; i++) {
        line2PersonOpt(userTags.lines[i]);
        line2TagOpt(userTags.lines[i]);
    }
    var loadingNotice = document.getElementById('loadingNotice-div');
    loadingNotice.parentNode.removeChild(loadingNotice);
}





function filterTagsByUser(select) {
    resetTagVisibility();
    var tagOptions = document.getElementById('tag-select') .getElementsByTagName('option');
    
    for (var k = 0; k < tagOptions.length; k++) {
        tagOptions[k].keep = false;
    }
    
    for (var i = 0; i < select.options.length; i++) {
        if (select.options[i].selected) {
            for (var j = 0; j < tagOptions.length; j++) {
                for (var k = 0; k < tagOptions[j].creators.length; k++) {
                    if (tagOptions[j].creators[k] == select.options[i].id) {
                        tagOptions[j].keep = true;
                    }
                }
            }
        }
    }
    for (var k = 0; k < tagOptions.length; k++) {
        if (tagOptions[k].keep == false) {
            tagOptions[k].setAttribute('style', 'display: none');
        }
    }
}

function prettifyText(text) {
    text = text.replace(/&#039;/g, "'");
    text = text.replace(/&#038;/g, "&");
    text = text.replace(/&quot;/g, '"');
    text = text.replace(/&amp;/g, '&');
    text = text.replace(/&gt;/g, '>');
    text = text.replace(/&lt;/g, '<');
    return text;
}

function resetTagVisibility() {
    
    var tagOptions = document.getElementById('tag-select') .getElementsByTagName('option');
    for (var k = 0; k < tagOptions.length; k++) {
        tagOptions[k].keep == true;
        tagOptions[k].setAttribute('style', 'display:block');
    }
}



function sortTags(a, b) {
    return (b.tagname.toLowerCase() < a.tagname.toLowerCase()) - (a.tagname.toLowerCase() < b.tagname.toLowerCase());
}

function submit() {
    var tagSelect = document.getElementById('tag-select');
    var personSelect = document.getElementById('person-select');
    
    
    var selectedTags = new Array();
    var selectedPersons = new Array();
    for (var i = 0; i < tagSelect.options.length; i++) {
        if (tagSelect.options[i].selected && (tagSelect.options[i].style.display != 'none')) {
            for (var j = 0; j < tagSelect.options[i].tagURIs.length; j++) {
                selectedTags[selectedTags.length] = tagSelect.options[i].tagURIs[j];
            }
        }
    }
    
    for (var i = 0; i < personSelect.options.length; i++) {
        if (personSelect.options[i].selected) {
            selectedPersons[selectedPersons.length] = personSelect.options[i].id;
        }
    }
    if ((selectedTags.length == 0) || (selectedPersons == 0)) {
        alert("Please narrow things down by selecting one or more people and/or one or more tags");
        return;
    }
    var newSubmitObj = new SubmitObj(selectedPersons, selectedTags);
    //make wait-for-it div
    var waitDiv = document.createElement('div');
    var waitP = document.createElement('p');
    var throbber = document.createElement('img');
    throbber.setAttribute('src', '../images/throbber_sm.gif');
    waitP.appendChild(document.createTextNode("Please wait . . . I'm workin' as fast as I can."));
    waitP.appendChild(throbber);
    
    waitDiv.appendChild(waitP);
    waitDiv.setAttribute('id', 'waitDiv');
    killSVG();
    document.body.appendChild(waitDiv);
    sendData(newSubmitObj);
}

function killWaitDiv() {
    var waitDiv = document.getElementById('waitDiv');
    if(waitDiv) {
        waitDiv.parentNode.removeChild(waitDiv);
    }
}
function InitObj() {
    this.url = "getMembers.php";
    this. toPostStr = function() {    
        return "action=getMembers&groupURL=" + groupURL;
    }
}

function SubmitObj(selectedPersons, selectedTags) {
    this . persons = selectedPersons;
    this . tags = selectedTags;
    
    this .toPostStr = function () {
        var postStr = "";
        postStr += "persons=";
        for (var i = 0; i < this .persons.length; i++) {
            postStr += encodeURIComponent(this .persons[i]);
            postStr += ",";
        }
        postStr += "&tags=";
        for (var i = 0; i < this .tags.length; i++) {
            postStr += encodeURIComponent(this .tags[i]);
            postStr += ",";
        }
        return postStr;
    }
}

function killSVG() {
    var svgArea = document.getElementById('display-svg');
    while (svgArea.childNodes.length != 0) {
        svgArea.removeChild(svgArea.firstChild);
    }
}