/**
* 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].ShowNote();
}
};
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.ElementCont.style.display = 'none';
this.gui.ElementRect.style.display = 'none'
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.display='none';
};
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.style.cssText = 'position: absolute;'+
'border: 0px;'+
'margin: 1px;'+
'cursor: crosshair;'
HandleEvent(cont,'mouseover',function(){currentNote.ShowNote();});
HandleEvent(cont,'mouseout',function(){currentNote.HideNote();});
HandleEvent(cont,'click',function(){window.location.href = '/'+currentNote.param;});
var box = document.createElement('div');
box.className='linkeduser';
//Attach mouse events to the box
HandleEvent(box,'mouseover',function(){currentNote.ShowNote();});
HandleEvent(box,'mouseout',function(){currentNote.HideNote();});
HandleEvent(box,'click',function(){window.location.href = '/'+currentNote.param;});
//Add note to the Box
var noteArea = document.createElement('div');
noteArea.className='linkeduser_username';
var titleArea = document.createElement('div');
//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 - 40 +'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();
}