/**
 * Main container
 */
function PictureTagContainer(element){
    var props = {
        element: element,
        notes: new Array()
    };

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

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

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

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

PictureTagContainer.prototype.AddNote = function(note){
    //Add the note to the array of notes
    this.notes[this.notes.length] = note;
    note.container = this;
    //Add note to the DOM
    this.element.appendChild(note.gui.ElementCont);
    this.element.appendChild(note.gui.ElementRect);
    this.element.appendChild(note.gui.ElementNote);
}

PictureTagContainer.prototype.DeleteNote = function(note){
    /* remove from the DOM */
    this.element.removeChild(note.gui.ElementCont);
    this.element.removeChild(note.gui.ElementRect);
    this.element.removeChild(note.gui.ElementNote);
    /* remove from the array... */
    this.notes.remove(note);
}

function PictureTag(text,id,param,rect){
    var props = {
        text: text,
        id: id,
        param: param, //zum beispiel link zum UserProfil
        rect: rect,
        container: null,
        YOffset: 5,
        XOffset: 0,
        gui: null
    }

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

PictureTag.prototype.ShowNoteText = function(){
    this.container.HideAllNoteTexts();
    //this.gui.ElementRect.style.border='0px';
    //this.gui.ElementRect.style.margin='0';
    this.gui.ElementCont.style.dislpay = 'block';
    this.gui.ElementRect.style.display = 'block'
    this.gui.ElementNote.style.display='block';
};
PictureTag.prototype.HideNoteText = function(){
    this.gui.ElementCont.style.display='none';
    this.gui.ElementRect.style.display='none';
    this.gui.ElementNote.style.border='0px';
};
PictureTag.prototype.HideNote = function (){
    this.gui.ElementCont.style.display = 'none';
    this.gui.ElementRect.style.display='none';
    this.gui.ElementNote.style.display='none';
};
PictureTag.prototype.ShowBox = function(){
    this.gui.ElementCont.style.display = 'block';
    this.gui.ElementRect.style.display = 'block';
    this.gui.ElementNote.style.border = '0px';
};
PictureTag.prototype.ShowNote = function(){
    this.gui.ElementCont.style.display = 'block';
    this.gui.ElementRect.style.display='block';
    this.gui.ElementNote.style.display='block';
}

PictureTag.prototype.CreateElements = function(){
    this.gui = new PictureTagGUI();
    var currentNote = this;
    //container box
    var cont = document.createElement('div');
    //cont.id = "fn-area-new"
    cont.style.cssText = 'position: absolute;'+
                         'border: 0px solid #d4d82d;'+
                         'margin: 1px;'+
                         'cursor: crosshair;'
    HandleEvent(cont,'mouseover',function(){currentNote.ShowNote();});
    HandleEvent(cont,'mouseout',function(){currentNote.HideNote();});
        
    var box = document.createElement('div');
    box.style.cssText = 'position: absolute;'+
                        'border: 1px solid #d4d82d;'+
                        'margin: 1px;'+
                        'cursor: crosshair;'
    //Attach mouse events to the box
    HandleEvent(box,'mouseover',function(){currentNote.ShowNote();});
    HandleEvent(box,'mouseout',function(){currentNote.HideNote();});

    //Add note to the Box
    var noteArea = document.createElement('div');
    noteArea.style.cssText = 'position: absolute;'+
                             'cursor: pointer;'+
                             'max-width: 200px;'+
                             'display: none;'+
                             'z-index: 5000;'

    var titleArea = document.createElement('div');
    titleArea.style.cssText = 'background-color: #ffeecc;'
                             +'border: 1px solid #000000;'
                             +'padding: 2px; -moz-border-radius: 7px;'

    //Attach mouse events to the noteArea
    HandleEvent(noteArea,'mouseover',function(){currentNote.ShowNote();});
    HandleEvent(noteArea,'mouseout',function(){currentNote.HideNote();});
    HandleEvent(noteArea,'click',function(){window.location.href = '/'+currentNote.param;});
    
    titleArea.innerHTML = this.text;
    noteArea.appendChild(titleArea);

    //Set up the GUI Object
    this.gui.ElementCont = cont;
    this.gui.ElementRect = box;
    this.gui.ElementNote = noteArea;
    this.gui.TextTitle = titleArea;
    //Position the note text
    this.PositionNote();
};

PictureTag.prototype.PositionNote = function(){
    /* CONT */
    this.gui.ElementCont.style.left = this.rect.left - 25 + 'px';
    this.gui.ElementCont.style.top = this.rect.top - 25 + 'px';
    this.gui.ElementCont.style.width = this.rect.width + 'px';
    this.gui.ElementCont.style.height = this.rect.height + 25 + 'px';
    /* BOX */
    this.gui.ElementRect.style.left  = this.rect.left - 25 +'px';
    this.gui.ElementRect.style.top  = this.rect.top  - 25 + 'px';
    this.gui.ElementRect.style.width  = this.rect.width + 'px';
    this.gui.ElementRect.style.height  = this.rect.height + 'px';
    /* NOTE */
    this.gui.ElementNote.style.left = this.rect.left - 25 +'px';
    this.gui.ElementNote.style.top  = this.rect.top + this.YOffset + parseInt(this.rect.height/2) + 'px';
}

/**
 * PictureTag GUI Object
 */
function PictureTagGUI(){
    //Container
    this.ElementCont = null;
    //BOX
    this.ElementRect = null;
    //Note
    this.ElementNote = null;
    this.TextTitle = null;
}

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

function HandleEvent(obj,event,func){
    if(typeof func != 'function'){
        return;
    }
    if(navigator.userAgent.search('MSIE')!= -1){//Internet explorer
        obj.attachEvent('on'+event, func);
    }
    else {//Other Browser
        obj.addEventListener(event, func, false);
    }
}


function showTag(Obj){
    Obj.ShowNote();
}
function hideTag(obj){
    obj.HideNote();
}