// JScript File

var index = 0;
var global_media_id = 0;
var global_isadmin = false;
var global_isloggedin = false;

function InitTags(mediaid)
{
    MessageBox.Show('Click on the photo to tag it.');
    
    var img = document.getElementById('tag-image');
    
    img.selectedbox = null;
    img.className = 'activated';
    
    img.onclick = function(e)
    {
        var newbox = this.selectedbox;
        var b = false;
        
        if(newbox == null)
        {
            var newid = 'tag-box-' + index.toString();

            newbox = document.createElement('div', newid);
            newbox.id = newid;
            newbox.className = 'new-floater';
            newbox.index = index;
            newbox.viewmode = 0;
            
            //custom properties
            newbox.list = new List(newbox);
            newbox.productid = 0;
            newbox.mediaid = mediaid;
            newbox.profileid = 0;
            newbox.users = null;
            newbox.products = null;
            
            newbox.onclick = function(ev)
            {
                img.onclick(ev);
            };
            
            b = true;
            
            this.selectedbox = newbox;
        }
        
        if(b)
        {
            document.body.appendChild(newbox);
            document.body.appendChild(newbox.list.box);
        }
        
        var img_x = GetX(this);
        var img_y = GetY(this);
        
        var newx = GetMiddleMousePosX(e, newbox);
        var newy = GetMiddleMousePosY(e, newbox);
        
        if(newx < img_x) newx = img_x;
        if(newy < img_y) newy = img_y;
        
        if(newx + newbox.clientWidth > img_x + this.clientWidth) newx = (img_x + this.clientWidth) - newbox.clientWidth;
        if(newy + newbox.clientHeight > img_y + this.clientHeight) newy = (img_y + this.clientHeight) - newbox.clientHeight;
        
        newbox.style.left = newx.toString() + 'px';
        newbox.style.top = newy.toString() + 'px';
        newbox.list.SetPosition(this, newbox);
        
        index++;
    };

}

function LoadFloaters()
{
    var img = document.getElementById('tag-image');
  
    var mediaid = global_media_id;
    if(mediaid <= 0) return;
    
    var params = new Array();
    params[0] = 'media-id=' + mediaid;
    
    var a = new AjaxCall('get.media.stickies', params);
    a.sessionid = 'xx-xx';
    a.resulttype = 'xml';
    
    a.Send(function(result)
    {
        var xml = LoadXMLDoc(result)
        var n = xml.getElementsByTagName('item');
        var i = 0;
        var bottom_links = document.getElementById('bottom-stickie-links');
        
        for(i = 0; i < n.length; i++)
        {
            var itemname = n[i].childNodes[2].firstChild.nodeValue;
            var nodeid = n[i].childNodes[0].firstChild.nodeValue;
            var profile = n[i].childNodes[3].firstChild.nodeValue;
            var product = n[i].childNodes[4].firstChild.nodeValue;
            var x = n[i].childNodes[5].firstChild.nodeValue;
            var y = n[i].childNodes[6].firstChild.nodeValue;
            var link = '/' + profile.toString();
            var itemid = profile;
            
            if(parseInt(product) > 0)
            {
                link = '/apps/store/?id=' + product.toString();
                itemid = product;
            }
            
            var k = PositionFloater(img, itemname, nodeid, x, y, link, itemid);
            
            if(bottom_links != null)
            {
                if(bottom_links.childNodes.length <= 0)
                {
                    var f = document.createElement('font');
                    f.innerHTML = 'In this photo: ';
                    bottom_links.appendChild(f);
                }
                
                bottom_links.appendChild(CreateBottomLink(nodeid, itemname, k, link));
            }
        }
        
        if(bottom_links != null)
        {
            var clear = document.createElement('div');
            clear.className = 'clear';
            bottom_links.appendChild(clear);
        }
        
    });
    
}

function CreateBottomLink(nodeid, itemname, floater, link)
{
    var item = document.createElement('div');
    item.id = 'sticky-item-link-' + nodeid;
    item.className = 'sticky-item-link';
    
    var name = document.createElement('a');
    
    name.innerHTML = '<a class="bottom-link" href="' + link + '">' + itemname + '</a>';
    name.id = 'name-' + nodeid;
    name.floater = floater;
    name.itemname = itemname;
    name.itemid = nodeid;
    
    item.onmouseover = function(ev)
    {
        CreateOverlay(name.floater, false, name.itemname, name.itemid);
        name.floater.className = 'visible-floater';
    };
    
    item.onmouseout = function(ev)
    {
        name.floater.className = 'saved-floater';
        FadeOut('v-' + name.floater.id);
    };

    if(global_isadmin)
    {
        var remove_link = document.createElement('a', 'stickie-link-remove-' + nodeid);
        
        remove_link.id = 'remove-' + nodeid;
        remove_link.innerHTML = 'X';
        remove_link.nodeid = nodeid;
        remove_link.href = "javascript:void(0)"

        remove_link.onclick = function(ev)
        {
            DeleteStickie(this.nodeid);
        };
    }
    
    item.appendChild(name);    
    
    if(global_isadmin) item.appendChild(remove_link);
    
    return item;
}

function DeleteStickie(nodeid)
{
    var bottom_links = document.getElementById('bottom-stickie-links');
    var x = null;
    
    if(bottom_links != null)
    {
        var bottom_link = document.getElementById('sticky-item-link-' + nodeid);
        if(bottom_link != null) bottom_links.removeChild(bottom_link);
    }
    
    x = document.getElementById('saved-floater-' + nodeid.toString());
    if(x != null) document.body.removeChild(x); 
    
    x = document.getElementById('v-saved-floater-' + nodeid);
    if(x != null) document.body.removeChild(x);
    
    var params = new Array();
    params[0] = 'id=' + nodeid;
    
    var a = new AjaxCall('delete.media.sticky', params);
    a.sessionid = 'xx-xx';
    a.resulttype = 'text';
    
    a.Send(function(result)
    {
        //
    });
}

function List(newbox)
{
    var i = newbox.index;
    var newid = 'user-list-' + i.toString();
    var tabs = document.createElement('div', 'tab-holder');
    var tab_users = document.createElement('a', 'tab-users');
    var tab_products = document.createElement('a', 'tab-products');
    
    tabs.className = 'tab-holder';

    tab_users.id = 'tab-users';
    tab_products.id = 'tab-products';
    
    tab_users.className = 'tab-selected';
    tab_products.className = 'tab';
    
    tab_users.href = 'javascript:void(0);';
    tab_products.href = 'javascript:void(0);';
    
    tab_users.onclick = function(e)
    {
        this.className = 'tab-selected';
        tab_products.className = 'tab';
        GetUsers(inner, newbox);
    };
    
    tab_products.onclick = function(e)
    {
        this.className = 'tab-selected';
        tab_users.className = 'tab';
        GetProducts(inner, newbox);
    };
    
    tab_users.innerHTML = 'Users';
    tab_products.innerHTML = 'Products';
    
    var box = document.createElement('div', newid);
    box.id = newid;
    box.className = 'user-list';
    
    newid = 'user-list-inner-' + index.toString();
    
    var inner = document.createElement('div', newid);
    inner.id = newid;
    inner.className = 'user-list-inner';
    
    var buttons = document.createElement('div', 'buttons-' + i.toString());
    buttons.id = 'buttons-' + i.toString();
    buttons.className = 'buttons';
    
    var cancel_button = document.createElement('input', 'cancel-button-' + i.toString());
    cancel_button.id = 'cancel-button-' + i.toString();
    cancel_button.type = 'button';
    cancel_button.value = 'Cancel';
    
    cancel_button.onclick = function(ev)
    {
        ClearBox(newbox);
    };
    
    buttons.appendChild(cancel_button);
    
    var h1 = document.createElement('strong', '');
    h1.innerHTML = 'Select an Item';

    buttons.appendChild(cancel_button);
    
    GetUsers(inner, newbox);

    tabs.appendChild(tab_users);
    tabs.appendChild(tab_products);

    box.appendChild(h1);
    box.appendChild(tabs);
    box.appendChild(inner);
    box.appendChild(buttons);
    
    this.box = box;
    this.SetPosition = SetPosition;
}

function CreateFilterBox(boxid)
{
    var div = document.createElement('div');
    div.id = boxid;
    div.className = 'filter-box';
    
    var input = document.createElement('input');
    input.id = 'filter-' + boxid;
    
    input.onkeyup = function(ev)
    {
        FilterList(this.value);
    };
    
    div.appendChild(input)
    
    return div;
}

function GetUsers(inner, newbox)
{
    $('#products-holder').hide();
    BlankFilter();
    
    
    if(newbox.users == null)
    {
        var vars = new Array();
        vars[0] = 'me-too=true';
        
        var a = new AjaxCall('get.friends', vars);
        var pr = document.createElement('img', 'progress');
        var holder = document.createElement('div', 'progress-holder');
        
        holder.className = 'progress-holder';
        pr.src = '/__images/icons/progress-round.gif';

        holder.appendChild(pr);
        
        inner.appendChild(CreateFilterBox('user-filter'));
        inner.appendChild(holder);
        
        a.sessionid = 'xxx-xxx';
        a.resulttype = 'xml';
        
        a.Send(function(result)
        {
            var xml = LoadXMLDoc(result);
            var n = xml.getElementsByTagName('item');
            var i = 0;
            
            inner.removeChild(holder);
            holder = document.createElement('div', 'users-holder');
            holder.id = 'users-holder';
            
            for(i = 0; i < n.length; i++)
            {
                var id = n[i].childNodes[0].firstChild.nodeValue;
                var name = n[i].childNodes[1].firstChild.nodeValue;
                
                holder.appendChild(LineItem(id, newbox, name, id, 0, ''));
            }
            
            inner.appendChild(holder);
            newbox.users = holder;
        });
    }
    else
    {
        $('#' + newbox.users.id.toString()).show();
    }
}

function GetProducts(inner, newbox)
{
    $('#users-holder').hide();
    BlankFilter();
    
    if(newbox.products == null)
    {
        var a = new AjaxCall('get.products', null);
        var pr = document.createElement('img', 'progress');
        var holder = document.createElement('div', 'progress-holder');
        
        holder.className = 'progress-holder';
        pr.src = '/__images/icons/progress-round.gif';

        holder.appendChild(pr);
        inner.appendChild(holder);
        
        a.sessionid = 'xxx-xxx';
        a.resulttype = 'xml';
        
        a.Send(function(result)
        {
            var xml = LoadXMLDoc(result);
            var n = xml.getElementsByTagName('item');
            var i = 0;
            
            inner.removeChild(holder);
            
            holder = document.createElement('div', 'products-holder');
            holder.id = 'products-holder';
            
            for(i = 0; i < n.length; i++)
            {
                var id = n[i].childNodes[0].firstChild.nodeValue;
                var name = n[i].childNodes[1].firstChild.nodeValue;
                var filename = n[i].childNodes[2].firstChild.nodeValue;
                
                holder.appendChild(LineItem(id, newbox, name, 0, id, '[90]' + filename));
            }

            inner.appendChild(holder);
            newbox.products = holder;
        });
    }
    else
    {
        $('#' + newbox.products.id.toString()).show();
    }
}

function BlankFilter()
{
    try
    {
        document.getElementById('filter-user-filter').value = '';
    }
    catch(ex) { }
}

function FilterList(term)
{
    var listid = 'users-holder';
    var tab = document.getElementById('tab-users');
    if(tab != null && tab.className == 'tab') listid = 'products-holder';

    var div = document.getElementById(listid);

    if(div == null)
    {
        alert('div == null (' + listid + ')');
        return;
    }

    var i = 0;
    
    for(i = 0; i < div.childNodes.length; i++)
    {
        var txt = new String('');
        try
        {
            txt = div.childNodes[i].firstChild.innerHTML.toString().toLowerCase();
            
            if(term.length == 0 || txt.indexOf(term.toLowerCase()) >= 0)
            {
                $('#' + div.childNodes[i].id.toString()).show();
            }
            else
            {
                $('#' + div.childNodes[i].id.toString()).hide();
            }
        }
        catch(ex)
        {
            //
        }
    }
}


function LineItem(id, newbox, name, profileid, productid, imageurl)
{
    var n = document.createElement('div', 'line-item-' + id.toString());
    var a = document.createElement('a', 'click-item-' + id.toString());

    a.href = 'javascript:void(0);';
    a.innerHTML = name;
    a.productname = name;
    
    if(productid > 0)
    {
        a.onmouseover = function(ev)
        {
            var idiv = document.getElementById('current-disp-image');
            
            if(idiv == null)
            {
                idiv = document.createElement('div');
                idiv.id = 'current-disp-image';
                idiv.className = 'pop-product-div';
                idiv.innerHTML = '<img src="/user.images/products/' + (productid % 100).toString() + '/' + (productid % 10000).toString() + '/' + productid.toString()  + '/' + imageurl + '" style="border:black 1px solid;" />';
                document.body.appendChild(idiv);
            }
            idiv.style.top = GetY(this.parentNode).toString() + 'px';
            idiv.style.left = (155 + GetX(this.parentNode)).toString() + 'px';
        };
        
        a.onmouseout = function(ev)
        {
            var idiv = document.getElementById('current-disp-image');
            if(idiv != null)
            {
                document.body.removeChild(idiv);
            }
        }
    }
    
    a.onclick = function(ev)
    {
        var img = document.getElementById('tag-image');
        
        var x = GetX(newbox);
        var y = GetY(newbox);
        var w = newbox.clientWidth;
        var h = newbox.clientHeight;
        
        x -= GetX(img);
        y -= GetY(img);
        
        var params = new Array();
        
        params[0] = 'media-id=' + newbox.mediaid.toString();
        params[1] = 'x=' + x.toString();
        params[2] = 'y=' + y.toString();
        params[3] = 'product-id=' + productid.toString();
        params[4] = 'width=' + w.toString();
        params[5] = 'height=' + h.toString();
        params[6] = 'profile-id=' + profileid.toString();
        
        var ac = new AjaxCall('media.tag.save', params);
        ac.sessionid = 'xx-xx';
        ac.resulttype = 'xml';
        
        ac.Send(function(result)
        {
            var itemname = '';
            var itemid = '';
            var xml = LoadXMLDoc(result);
            
            itemname = GetNodeValue(xml, 'name', 0);
            itemid = GetNodeValue(xml, 'id', 0);
            
            var k = PositionFloater(img, itemname, result, x, y, '#', productid);

            var bottom_links = document.getElementById('bottom-stickie-links');
            if(bottom_links != null)
            {
                if(bottom_links.childNodes.length <= 0)
                {
                    var f = document.createElement('font');
                    f.innerHTML = 'In this photo: ';
                    bottom_links.appendChild(f);
                }
                
                bottom_links.appendChild(CreateBottomLink(itemid, itemname, k, '#'));
            }

            ClearBox(newbox);
        });
    };
    
    n.id = 'line-item-' + id.toString();
    n.className = 'line-item';
    n.appendChild(a); // = '<a href="#">Line Item ' + i.toString() + '</a>';

    return n;
}

function ClearBox(newbox)
{
    var idiv = document.getElementById('current-disp-image');
    if(idiv != null) document.body.removeChild(idiv);
    
    $('#' + newbox.id.toString()).fadeOut(300);
    $('#' + newbox.list.box.id.toString()).fadeOut(300, function()
    {
        var x = document.getElementById('tag-image');
        if(x != null) x.selectedbox = null;

        document.body.removeChild(newbox);
        document.body.removeChild(newbox.list.box);
    });
}

function SetPosition(img, newbox)
{
    var offset = newbox.clientWidth + 10;
    
    if(GetX(img) + img.clientWidth < (newbox.clientWidth) + GetX(newbox) + 200)
    {
        offset = -(10 + newbox.list.box.clientWidth);
    }
    
    this.box.style.top = GetY(newbox).toString() + 'px';
    this.box.style.left = (GetX(newbox) + offset).toString() + 'px';
}

// x is relative to the image
function PositionFloater(img, name, id, x, y, link, itemid)
{
    var divid = 'saved-floater-' + id.toString();
    var n = document.getElementById(divid);
    
    if(n == null)
    {
        n = document.createElement('div', divid);
        n.id = divid;
        n.className = 'saved-floater';
        
        n.onmouseover = function(e)
        {
            CreateOverlay(this, false, name, itemid);
        };

        n.onmouseout = function(e)
        {
            
        };
        
        n.onclick = function(e)
        {
            location.href = link;
        };
        
        document.body.appendChild(n);
    }
    
    n.style.left = (GetX(img) + parseInt(x)).toString() + 'px';
    n.style.top = (GetY(img) + parseInt(y)).toString() + 'px';
    
    return n;
}

function CreateOverlay(n, autofade, name, itemid)
{
    var x = document.createElement('div', 'v-' + n.id);
    x.className = 'label';
    x.id = 'v-' + n.id;
    x.innerHTML = name;
    
    n.onmouseout = function(e)
    {
        FadeOut(x.id);
    };
    
    document.body.appendChild(x);
    x.style.left = GetMiddlePosX(x, n) + 'px';
    x.style.top = (GetY(n) + n.clientHeight).toString() + 'px';
    x.controller = n;

    if(autofade) setTimeout("FadeOut('" + x.id + "');", 1500);
    
}

function FadeOut(divid)
{
    $('#' + divid).fadeOut(500, function()
    {
        document.body.removeChild(document.getElementById(divid));
    });
}

function GetBottomPos(thisobj, relobj)
{
    return GetX(relobj) + ((relobj.clientWidth / 2) - (thisobj.clientWidth/ 2));
}

function GetMiddlePosX(thisobj, relobj)
{
    return GetX(relobj) + ((relobj.clientWidth / 2) - (thisobj.clientWidth/ 2));
}

function GetMiddlePosY(thisobj, relobj)
{
    return GetY(relobj) + ((relobj.clientHeight / 2) - (thisobj.clientHeight/ 2));
}

function GetMiddleMousePosY(e, obj)
{
    return (GetMouseY(e) - (obj.clientHeight / 2));
}

function GetMiddleMousePosX(e, obj)
{
    return (GetMouseX(e) - (obj.clientWidth / 2));
}

function GetMouseX(e)
{
    if (document.all) return event.clientX + document.body.scrollLeft;
    else return e.pageX;
}

function GetMouseY(e)
{
    if (document.all) return event.clientY + document.body.scrollTop;
    else return e.pageY;
}

onload = LoadFloaters;