function OpenEyesContainer(element, config)
{
    var props = {
        element: element,
        dragresize: null,
        notes: new Array(),
        editing: false
    };

    for (var p in props)
    {
        this[p] = (!config || typeof config[p] == 'undefined') ? props[p] : config[p];
    }

};

OpenEyesContainer.prototype.DeleteNote = function(note)
{

    note.UnSelect();

    /* remove from the DOM */
    this.element.removeChild(note.gui.ElementRect);
    this.element.removeChild(note.gui.ElementNote);

    /* remove from the array... */
    this.notes.remove(note);
}

OpenEyesContainer.prototype.AddNote = function(note)
{
    if(!this.editing)
    {
        /* add the note to the array of notes, and set its container */
        this.notes[this.notes.length] = note;
        note.container = this;

        /* add the note to the DOM */
        this.element.appendChild(note.gui.ElementRect);
        this.element.appendChild(note.gui.ElementNote);
    }
};


OpenEyesContainer.prototype.HideAllNoteTexts = function()
{
    for (var i = 0;i<this.notes.length;i++)
        this.notes[i].HideNoteText();
};


OpenEyesContainer.prototype.DisableAllNotes = function()
{
    for (var i = 0;i<this.notes.length;i++)
        this.notes[i].DisableNote();
};

OpenEyesContainer.prototype.HideAllNotes = function()
{
    for (var i = 0;i<this.notes.length;i++)
        this.notes[i].HideNote();
};

OpenEyesContainer.prototype.ShowAllNotes = function()
{
    for (var i = 0;i<this.notes.length;i++)
        this.notes[i].ShowNote();
};

OpenEyesContainer.prototype.EnableAllNotes = function()
{
    for (var i = 0;i<this.notes.length;i++)
        this.notes[i].EnableNote();
};



function PhotoNote(text,id,rect,link)
{
    var props = {
        text: text,
        id: id,
        rect: rect,
        selected: false,
        container: null,
        dragresize: null,
        oldRect: null,
        YOffset: 10,
        XOffset: 0,
        onsave: null,
        ondelete: null,
        gui: null,
        link:link

    };

    for (var p in props)
    {
        this[p] = props[p];
    }

    this.CreateElements();
}


PhotoNote.prototype.Select = function()
{
    //window.status = 'container: ' + this.container;
    if(!this.container.editing)
    {
                    this.ShowNoteText();
            this.dragresize.select(this.gui.ElementRect);
            this.selected = true;
            this.SetEditable(true);
            }
}


PhotoNote.prototype.UnSelect = function()
{
    this.dragresize.deselect(false);
    this.selected = false;
    this.SetEditable(false);
    this.HideNoteText();
}

PhotoNote.prototype.Save = function()
{
    this.oldRect = null;
    this.gui.TextTitle.innerHTML = this.gui.TextBox.value;
    this.text = this.gui.TextBox.value
    this.UnSelect();
}



PhotoNote.prototype.Cancel = function()
{
    if(this.id < 0)
    {
        this.container.DeleteNote(this)
    }
    else
    {
       //reset the node to it's old position
        if(this.oldRect != null)
        {
            this.rect = this.oldRect;
        }
        this.oldRect = null;
        this.gui.TextBox.value = this.text;
        this.PositionNote();
        this.UnSelect();
    }

}

PhotoNote.prototype.ShowNoteText = function()
{
    if(!this.container.editing)
    {
        this.container.HideAllNoteTexts();
        this.container.DisableAllNotes();
        this.EnableNote();

        this.gui.ElementRect.style.border='';
        this.gui.ElementRect.style.margin='0';
        this.gui.ElementNote.style.display='block';
    }
}

PhotoNote.prototype.DisableNote = function ()
{
    this.dragresize.enabled=false;
}

PhotoNote.prototype.EnableNote = function ()
{
    this.dragresize.enabled=true;
}

PhotoNote.prototype.HideNoteText = function ()
{
    this.gui.ElementRect.style.border='0px solid #D4D82D';
    this.gui.ElementRect.style.margin='1px';
    this.gui.ElementNote.style.display='none';
}


PhotoNote.prototype.HideNote = function ()
{
    this.gui.ElementRect.style.display='none';
    this.gui.ElementNote.style.display='none';
}


PhotoNote.prototype.ShowNote = function ()
{
    this.gui.ElementRect.style.display='block';
    this.gui.ElementNote.style.display='none';
}



PhotoNote.prototype.SetEditable = function(editable)
{
    this.container.editing = editable;

    if(editable)
    {
        //the first child of the note is the text
        this.gui.TextTitle.style.display = 'none';

        //the second child is the edit area...
        this.gui.EditArea.style.display = 'block';

        //if this is a "new" note, then hide the delete button
        if(this.id <= 0)
            this.gui.DeleteButton.style.display = 'none';
        else
            this.gui.DeleteButton.style.display = 'inline';

        // get the textarea and select the text...
        this.HighlightTextbox();
   }
    else
    {
        //the first child of the note is the text
        this.gui.TextTitle.style.display = 'block';

        //the second child is the edit area...
        this.gui.EditArea.style.display = 'none';
    }
}

PhotoNote.prototype.HighlightTextbox = function ()
{
    if(this.gui.EditArea.style.display=='block')
    {
        var textfield = this.gui.TextBox;
        setTimeout(function() {
                try
                {
                    textfield.focus();
                    textfield.select();
                }
                catch(e) {}
            }, 200);
    }

}

PhotoNote.prototype.CreateElements = function()
{

    this.gui = new PhotoNoteGUI();

    var newArea = document.createElement('div');
    this.dragresize = new DragResize('dragresize', { allowBlur: false });
    newArea.className = 'fn-area';
    newArea.id = 'fn-area-new';

    var newAreaBlack = document.createElement('div');
    newAreaBlack.className = 'fn-area-blackborder';
    var newAreaWhite = document.createElement('div');
    newAreaWhite.className = 'fn-area-whiteborder';


    var currentNote = this;


    var newAreaInner = document.createElement('div');
    newAreaInner.className = 'fn-area-inner';
    newAreaWhite.appendChild(newAreaInner);

    addEvent(newAreaInner, 'mouseover', function() {
            currentNote.ShowNoteText();
        });
    addEvent(newAreaInner, 'mouseout', function() {

            if(!currentNote.selected)
            {
                setTimeout(function () {
                    currentNote.HideNoteText();
                    }, 250);

            }
        });

    addEvent(newAreaInner, 'mousedown', function() {
            if(!currentNote.selected)
            {
                //window.status = 'mouseDown2!';
                currentNote.Select();
            }
        });
        
    addEvent(newAreaInner, 'click', function() {
            var txt = currentNote.text;
            var st = currentNote.text.indexOf("[");
            var ed = currentNote.text.indexOf("]");
            
            if(!currentNote.selected && currentNote.link!=""   )
            {
                
                //window.status = 'mouseDown2!';
                window.location = currentNote.link;
                
            }
        });     


    newAreaBlack.appendChild(newAreaWhite);
    newArea.appendChild(newAreaBlack);

    var noteArea = document.createElement('div');
    noteArea.className = 'fn-note';

    var titleArea = document.createElement('div');
    titleArea.className = 'fn-note-text';
    var t = document.createTextNode(this.text);
    titleArea.appendChild(t);
    noteArea.appendChild(titleArea);

    var editArea = document.createElement('div');
    editArea.className = 'fn-note-edit';

    var editAreaText = document.createElement('div');
    editAreaText.className = 'fn-note-edit-text';

    var newTextbox = document.createElement('textarea');
    newTextbox.value = this.text;
    editAreaText.appendChild(newTextbox);
    editArea.appendChild(editAreaText);

    var buttonsDiv = document.createElement('div');
    var newButtonOK = document.createElement('input');
    newButtonOK.type='button';
    newButtonOK.className = 'btn1';
    newButtonOK.value='Save';
    newButtonOK.onclick = function() {


            if(currentNote.onsave)
            {
               
                var res = currentNote.onsave(currentNote);
                if(res > 0)
                {
                    //window.status = '';
                    currentNote.id = res;
                    currentNote.Save();
                }
                else
                {
                    alert("error saving note");
                    currentNote.Cancel();
                }
            }
            else
            {
                alert("onsave must be implemented in order to *actually* save");
                currentNote.Cancel();
            }


        };
    buttonsDiv.appendChild(newButtonOK);

    var newButtonCancel = document.createElement('input');
    newButtonCancel.type='button';
    newButtonCancel.className = 'btn1';
    newButtonCancel.value='Close';
    newButtonCancel.onclick = function() {
    currentNote.Cancel();

        };
    buttonsDiv.appendChild(newButtonCancel);

    var newButtonDelete = document.createElement('input');
    newButtonDelete.type='button';
    newButtonDelete.className = 'btn1';
    newButtonDelete.value='Delete';
    newButtonDelete.onclick = function() {

            if(currentNote.ondelete)
            {
                var res = currentNote.ondelete(currentNote);
                if(res)
                {
                    currentNote.container.DeleteNote(currentNote);
                }
                else
                {
                    alert("error deleting note");
                }
            }
            else
            {
                alert("ondelete must be implemented in order to *actually* delete");
            }
        };
    buttonsDiv.appendChild(newButtonDelete);

    editArea.appendChild(buttonsDiv);
    noteArea.appendChild(editArea);



    /********* DRAG & RESIZE EVENTS **********************/
    this.dragresize.isElement = function(elm)
        {
            if(elm.className == 'fn-area')
            {
                this.maxRight = currentNote.container.element.offsetWidth - 30;
                this.maxBottom = currentNote.container.element.offsetHeight - 19;
                return true;
            }
        };
    this.dragresize.isHandle = function(elm)
        {
            if(elm.className == 'fn-area')
                return true;
        };
    this.dragresize.ondragfocus = function()
        {
            currentNote.gui.ElementRect.style.cursor = 'move';
        };
    this.dragresize.ondragblur = function()
        {
            currentNote.gui.ElementRect.style.cursor = 'pointer';
        };
    this.dragresize.ondragstart = function()
        {
            if(currentNote.oldRect == null)
            {
                var r = currentNote.rect;
                currentNote.oldRect = new PhotoNoteRect(r.left,r.top,r.width,r.height);
            }
        };
    this.dragresize.ondragend = function()
        {
            //window.status = 'LKSFDLKJDFSLKJFDLKJ';
            currentNote.HighlightTextbox();
        };
    this.dragresize.ondragmove = function()
        {
            currentNote.rect.left = parseInt(this.element.style.left);
            currentNote.rect.top = parseInt(this.element.style.top);
            currentNote.rect.width = parseInt(this.element.style.width);
            currentNote.rect.height = parseInt(this.element.style.height);
            currentNote.PositionNote();
        };

    this.dragresize.apply(document);




    /* setup the GUI object */
    this.gui.ElementRect = newArea;
    this.gui.ElementNote = noteArea;
    this.gui.EditArea = editArea;
    this.gui.TextBox = newTextbox;
    this.gui.TextTitle = titleArea;
    this.gui.DeleteButton = newButtonDelete;

    /* position the note text below the note area */
    this.PositionNote();

}

PhotoNote.prototype.PositionNote = function()
{
    /* outer most box */
    this.gui.ElementRect.style.left  = this.rect.left + 'px';
    this.gui.ElementRect.style.top  = this.rect.top + 'px';
    this.gui.ElementRect.style.width  = this.rect.width + 'px';
    this.gui.ElementRect.style.height  = this.rect.height + 'px';

    // black border
    this.gui.ElementRect.firstChild.style.width  = parseInt(this.gui.ElementRect.style.width) - 2 + 'px';
    this.gui.ElementRect.firstChild.style.height  = parseInt(this.gui.ElementRect.style.height) - 2 + 'px';

    // white border
    this.gui.ElementRect.firstChild.firstChild.style.width  = parseInt(this.gui.ElementRect.style.width) - 4 + 'px';
    this.gui.ElementRect.firstChild.firstChild.style.height  = parseInt(this.gui.ElementRect.style.height) - 4 + 'px';

    // inner box
    this.gui.ElementRect.firstChild.firstChild.firstChild.style.width  = parseInt(this.gui.ElementRect.style.width) - 6 + 'px';
    this.gui.ElementRect.firstChild.firstChild.firstChild.style.height  = parseInt(this.gui.ElementRect.style.height) - 6 + 'px';

    this.gui.ElementNote.style.left  = this.rect.left + this.XOffset + 'px';
    this.gui.ElementNote.style.top  = this.rect.top + this.YOffset + this.rect.height + 'px';

}




/*********************************************************/
/*** Photo Note GUI Object *******************************/
/*********************************************************/
function PhotoNoteGUI()
{
    this.ElementRect = null;

    // the note text area...
    this.ElementNote = null;
    this.TextTitle = null;
    this.EditArea = null;
    this.TextBox = null;

    // buttons
    this.DeleteButton = null;
}

function PhotoNoteRect(left,top,width,height)
{
    this.left = left;
    this.top = top;
    this.width = width;
    this.height = height;
}

PhotoNoteRect.prototype.toString = function()
{
    return 'left: ' + this.left + ', top: ' + this.top + ', width: ' + this.width + ', height: ' + this.height;
}

var aeOL = [];
function addEvent(o, n, f, l)
{
 var a = 'addEventListener', h = 'on'+n, b = '', s = '';
 if (o[a] && !l) return o[a](n, f, false);
 o._c |= 0;
 if (o[h])
 {
  b = '_f' + o._c++;
  o[b] = o[h];
 }
 s = '_f' + o._c++;
 o[s] = f;
 o[h] = function(e)
 {
  e = e || window.event;
  var r = true;
  if (b) r = o[b](e) != false && r;
  r = o[s](e) != false && r;
  return r;
 };
 aeOL[aeOL.length] = { o: o, h: h };
};
addEvent(window, 'unload', function() {
 for (var i = 0; i < aeOL.length; i++) with (aeOL[i])
 {
  o[h] = null;
  for (var c = 0; o['_f' + c]; c++) o['_f' + c] = null;
 }
});

function cancelEvent(e, c)
{
 e.returnValue = false;
 if (e.preventDefault) e.preventDefault();
 if (c)
 {
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
 }
};

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}


Array.prototype.clear = function () {
    this.length = 0;
};

Array.prototype.remove = function (element) {
    var result = false;
    var array = [];
    for (var i = 0; i < this.length; i++) {
        if (this[i] == element) {
            result = true;
        } else {
            array.push(this[i]);
        }
    }
    this.clear();
    for (var i = 0; i < array.length; i++) {
        this.push(array[i]);
    }
    array = null;
    return result;
};


function DragResize(myName, config)
{
    var props = {
        myName: myName,                  
        enabled: true,                   
        handles: ['tl', 'tm', 'tr',
        'ml', 'mr', 'bl', 'bm', 'br'], 
        isElement: null,                 
        isHandle: null,                  
        element: null,                   
        dragging: null,                  
        minWidth: 10, minHeight: 10,     
        minLeft: 0, maxRight: 9999,      
        minTop: 0, maxBottom: 9999,
        zIndex: 1,                       
        mouseX: 0, mouseY: 0,            
        lastMouseX: 0, lastMouseY: 0,    
        mOffX: 0, mOffY: 0,              
        elmX: 0, elmY: 0,                
        elmW: 0, elmH: 0,                
        allowBlur: true,                 
        ondragfocus: null,               
        ondragstart: null,
        ondragmove: null,
        ondragend: null,
        ondragblur: null
    };

    for (var p in props)
    {
        this[p] = (typeof config[p] == 'undefined') ? props[p] : config[p];
    }
};


DragResize.prototype.apply = function(node)
{
    var obj = this;
    addEvent(node, 'mousedown', function(e) { obj.mouseDown(e) } );
    addEvent(node, 'mousemove', function(e) { obj.mouseMove(e) } );
    addEvent(node, 'mouseup', function(e) { obj.mouseUp(e) } );
};


DragResize.prototype.handleSet = function(elm, show) { with (this)
{

    if (!elm._handle_tr)
    {
        for (var h = 0; h < handles.length; h++)
        {
            // Create 4 news divs, assign each a generic + specific class.
            var hDiv = document.createElement('div');
            hDiv.className = myName + ' ' +  myName + '-' + handles[h];
            elm['_handle_' + handles[h]] = elm.appendChild(hDiv);
        }
    }

    for (var h = 0; h < handles.length; h++)
    {
        elm['_handle_' + handles[h]].style.visibility = show ? 'inherit' : 'hidden';
    }
}};


DragResize.prototype.select = function(newElement) { with (this)
{
    // Selects an element for dragging.

    if (!document.getElementById || !enabled) return;

    // Activate and record our new dragging element.
    if (newElement && (newElement != element) && enabled)
    {
        element = newElement;
        // Elevate it and give it resize handles.
        element.style.zIndex = ++zIndex;
        handleSet(element, true);
        // Record element attributes for mouseMove().
        elmX = parseInt(element.style.left);
        elmY = parseInt(element.style.top);
        elmW = element.offsetWidth;
        elmH = element.offsetHeight;
        if (ondragfocus) this.ondragfocus();
    //window.status = 'start elmX=' + element.className;

    }
}};


DragResize.prototype.deselect = function(keepHandles) { with (this)
{
    if (!document.getElementById || !enabled) return;

    if (!keepHandles)
    {
        if (ondragblur) this.ondragblur();
        handleSet(element, false);
        element = null;
    }

    dragging = null;
    mOffX = 0;
    mOffY = 0;
}};


DragResize.prototype.mouseDown = function(e) { with (this)
{
    if (!document.getElementById || !enabled) return true;

    var elm = e.target || e.srcElement,
    newElement = null,
    newHandle = null,
    hRE = new RegExp(myName + '-([trmbl]{2})', '');

    while (elm)
    {
        // Loop up the DOM looking for matching elements. Remember one if found.
        if (elm.className)
        {
        if (!newHandle && (hRE.test(elm.className) || isHandle(elm))) newHandle = elm;
        if (isElement(elm)) { newElement = elm; break }
        }
        elm = elm.parentNode;
    }

    if (element && (element != newElement) && allowBlur) deselect(false);

    // If we have a new matching element, call select().
    if (newElement && (!element || (newElement == element)))
    {
        // Stop mouse selections.
        cancelEvent(e);
        select(newElement, newHandle);
        dragging = newHandle;
        if (dragging && ondragstart) this.ondragstart();
    }
}};


DragResize.prototype.mouseMove = function(e) { with (this)
{

    if (!document.getElementById || !enabled) return true;

    // We always record the current mouse position.
    mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft;
    mouseY = e.pageY || e.clientY + document.documentElement.scrollTop;

    var diffX = mouseX - lastMouseX + mOffX;
    var diffY = mouseY - lastMouseY + mOffY;
    mOffX = mOffY = 0;
    // Update last processed mouse positions.
    lastMouseX = mouseX;
    lastMouseY = mouseY;

    // That's all we do if we're not dragging anything.
    if (!dragging) return true;

    // Establish which handle is being dragged -- retrieve handle name from className.
    var hClass = dragging && dragging.className &&
    dragging.className.match(new RegExp(myName + '-([tmblr]{2})')) ? RegExp.$1 : '';


    var rs = 0, dY = diffY, dX = diffX;
    if (hClass.indexOf('t') >= 0)
    {
        rs = 1;
        if (elmH - dY < minHeight) mOffY = (dY - (diffY = elmH - minHeight));
        else if (elmY + dY < minTop) mOffY = (dY - (diffY = minTop - elmY));
        elmY += diffY;
        elmH -= diffY;
    }
    if (hClass.indexOf('b') >= 0)
    {
        rs = 1;
        if (elmH + dY < minHeight) mOffY = (dY - (diffY = minHeight - elmH));
        else if (elmY + elmH + dY > maxBottom) mOffY = (dY - (diffY = maxBottom - elmY - elmH));
        elmH += diffY;
    }
    if (hClass.indexOf('l') >= 0)
    {
        rs = 1;
        if (elmW - dX < minWidth) mOffX = (dX - (diffX = elmW - minWidth));
        else if (elmX + dX < minLeft) mOffX = (dX - (diffX = minLeft - elmX));
        elmX += diffX;
        elmW -= diffX;
    }
    if (hClass.indexOf('r') >= 0)
    {
        rs = 1;
        if (elmW + dX < minWidth) mOffX = (dX - (diffX = minWidth - elmW));
        else if (elmX + elmW + dX > maxRight) mOffX = (dX - (diffX = maxRight - elmX - elmW));
        elmW += diffX;
        window.status = 'diffX:' + diffX;
    }
    // If 'rs' isn't set, we must be dragging the whole element, so move that.
    if (dragging && !rs)
    {
        // Bounds check left-right...
        if (elmX + dX < minLeft) mOffX = (dX - (diffX = minLeft - elmX));
        else if (elmX + elmW + dX > maxRight) mOffX = (dX - (diffX = maxRight - elmX - elmW));
        // ...and up-down.
        if (elmY + dY < minTop) mOffY = (dY - (diffY = minTop - elmY));
        else if (elmY + elmH + dY > maxBottom) mOffY = (dY - (diffY = maxBottom - elmY - elmH));
        //window.status = 'diffX-' + diffX + ' , elmX-' + elmX;
        elmX += diffX;
        elmY += diffY;
    }

    //window.status = 'elmX=' + elmX;
    // Assign new info back to the element, with minimum dimensions.
    with (element.style)
    {
        left =   elmX + 'px';
        width =  elmW + 'px';
        top =    elmY + 'px';
        height = elmH + 'px';
    }

    // Evil, dirty, hackish Opera select-as-you-drag fix.
    if (window.opera && document.documentElement)
    {
        var oDF = document.getElementById('op-drag-fix');
        if (!oDF)
        {
            var oDF = document.createElement('input');
            oDF.id = 'op-drag-fix';
            oDF.style.display = 'none';
            document.body.appendChild(oDF);
        }
        oDF.focus();
    }

    if (ondragmove) this.ondragmove();

    // Stop a normal drag event.
    cancelEvent(e);
}};


DragResize.prototype.mouseUp = function(e) { with (this)
{
    // On mouseup, stop dragging, but don't reset handler visibility.
    if (!document.getElementById || !enabled) return;

    if (ondragend) this.ondragend();
    deselect(true);
}};