/** * Icon menu script for resource-it.dk * * @author Christian Hansen * @version 1.0 * @package resource-it.dk * @copyright Resource it ApS * * This file is part of fc-mondo.dk. * **/ /** * IconMenu is the constructor for the IconMenu object * @access public * @param object HTMLElement - the object that should be replaced with the interactive menu. * @param integer width - the icon menu box default width * @param integer height - the icon menu box default height * @param string icon - the name of the active icon. * @return void **/ function IconMenu(o,width,height,icon) { this.action = false; this.width = width; this.height = height; this.parent = o.parentNode; this.parent.pos = resExt.getElementPosition(this.parent); this.IconMenuBtn = document.createElement("div"); this.IconMenuBtn.appendChild(o.getElementsByTagName("img").item(0)); this.IconMenuBtn.className = o.className; resExt.addEventHandler(this.IconMenuBtn,"click",this.display.bind(this)); o.parentNode.replaceChild(this.IconMenuBtn,o); this.IconMenuBtn.pos = resExt.getElementPosition(this.IconMenuBtn); //mode for this entry this.mode = document.createElement("img"); this.mode.style.position = "absolute"; this.mode.style.top = "8px"; this.mode.style.left = "8px"; this.mode.style.zIndex = 1000; this.mode.style.filter = "alpha(opacity=100)"; //add IconMenu content area this.content = document.createElement("div"); this.content.style.position = "absolute"; this.content.style.top = "10px"; this.content.style.left = "10px"; this.content.style.zIndex = 100; //add icon to remove the box again this.icon = document.createElement("img"); this.icon.src = "/graphics/" + icon; this.icon.style.position = "absolute"; this.icon.style.top = "8px"; this.icon.style.left = "-3px"; this.icon.style.filter = "alpha(opacity=100)"; resExt.addEventHandler(this.icon,"click",this.display.bind(this)); this.content.appendChild(this.icon); //define backgroundImages this.backgroundImage = [ {top:0,left:0,width:19,height:19,src:'top_left'}, {top:0,left:19,width:(this.width - 39),height:19,src:'top'}, {top:0,right:0,width:20,height:19,src:'top_right'}, {top:19,right:0,width:20,height:(this.height - 39),src:'right'}, {bottom:0,right:0,width:20,height:20,src:'bottom_right'}, {bottom:0,left:19,width:(this.width - 39),height:20,src:'bottom'}, {bottom:0,left:0,width:19,height:20,src:'bottom_left'}, {top:19,left:0,width:19,height:(this.height - 39),src:'left'}, {top:19,left:19,width:(this.width - 39),height:(this.height - 39),src:'center'} ]; //preload background images for ( var c = 0; c < this.backgroundImage.length; c++ ) { var tmpimg = document.createElement("img"); tmpimg.src = "/graphics/IconMenu_" + this.backgroundImage[c]["src"] + ".png"; tmpimg.style.display = "none"; //document.getElementById("basicmenu").appendChild(tmpimg); }//for }//IconMenu /** * setHeight alters the icon menu box height * @access private * @param integer height - the new height * @return void **/ IconMenu.prototype.setHeight = function(height) { this.IconMenuBox.style.height = height + "px"; this.IconMenuBox.center.style.height = (height - 39) + "px"; this.IconMenuBox.left.style.height = (height - 39) + "px"; this.IconMenuBox.right.style.height = (height - 39) + "px"; }//setHeight IconMenu.prototype.expand = function(width,height) { }//expand IconMenu.prototype.collapse = function() { }//collapse IconMenu.prototype.display = function() { if ( this.action == "show" ) this.hide(); else this.show(); }//display /** * show displays the icon box * @access public * @return void **/ IconMenu.prototype.show = function(now) { this.action = "show"; if ( !this.IconMenuBox ) { this.IconMenuBox = document.createElement("div"); this.IconMenuBox.setAttribute("id","IconMenuBox"); this.IconMenuBox.style.position = "absolute"; this.IconMenuBox.style.zIndex = 1001; this.IconMenuBox.style.width = this.width; this.IconMenuBox.style.height = this.height + "px"; this.IconMenuBox.style.opacity = "0"; this.IconMenuBox.style.filter = "alpha(opacity=0)"; this.IconMenuBox.style.backgroundRepeat = "no-repeat"; this.IconMenuBox.style.display = "none"; var top = this.IconMenuBtn.pos.y - this.parent.pos.y; var left = this.IconMenuBtn.pos.x - this.parent.pos.x; this.IconMenuBox.style.top = top - 10 + "px"; this.IconMenuBox.style.left = ( left - 8 ) + "px"; this.IconMenuBox.style.opacity = ".0"; this.IconMenuBox.style.display = "block"; this.parent.appendChild(this.IconMenuBox); this.opacity = 0; for ( var c = 0; c < this.backgroundImage.length; c++ ) { //add background-image: this.IconMenuBox[this.backgroundImage[c]["src"]] = document.createElement("img"); if ( /MSIE/.test(navigator.appVersion) ) { this.IconMenuBox[this.backgroundImage[c]["src"]].style.zIndex = 1000; this.IconMenuBox[this.backgroundImage[c]["src"]].src = "/graphics/1x1_transparent.gif"; this.IconMenuBox[this.backgroundImage[c]["src"]].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/graphics/IconMenu_" + this.backgroundImage[c]["src"] + ".png', sizingMethod='scale');" } else { this.IconMenuBox[this.backgroundImage[c]["src"]].src = "/graphics/IconMenu_" + this.backgroundImage[c]["src"] + ".png"; }//else this.IconMenuBox[this.backgroundImage[c]["src"]].style.position = "absolute"; this.IconMenuBox[this.backgroundImage[c]["src"]].style.zIndex = "1"; for ( var b in this.backgroundImage[c] ) { if ( b != "src" ) this.IconMenuBox[this.backgroundImage[c]["src"]].style[b] = this.backgroundImage[c][b] + "px"; } this.IconMenuBox.appendChild(this.IconMenuBox[this.backgroundImage[c]["src"]]); }//for this.IconMenuBox.appendChild(this.content); }//if if ( now != undefined && now ) { this.opacity = 1; this.IconMenuBox.style.opacity = this.opacity; this.IconMenuBox.style.filter = "alpha(opacity=" + Math.round(100 * this.opacity) + ")"; }//if setTimeout(function() { if ( this.opacity < 1 ) { this.IconMenuBox.style.display = "block"; this.opacity += 0.2; if ( this.opacity > 1 ) this.opacity = 1; this.IconMenuBox.style.opacity = this.opacity; this.IconMenuBox.style.filter = "alpha(opacity=" + Math.round(100 * this.opacity) + ")"; if ( this.action == "show" ) setTimeout(arguments.callee.bind(this),30); } else { try { this.owner.onShow(); } catch(e) { } }//else }.bind(this),30); }//show /** * hide hides the icon box * @access public * @return void **/ IconMenu.prototype.hide = function() { this.action = "hide"; setTimeout(function() { if ( this.opacity > 0 ) { this.IconMenuBox.style.display = "block"; this.opacity -= 0.2; if ( this.opacity < 0 ) this.opacity = 0; this.IconMenuBox.style.opacity = this.opacity; this.IconMenuBox.style.filter = "alpha(opacity=" + Math.round(100 * this.opacity) + ")"; if ( this.action == "hide" ) setTimeout(arguments.callee.bind(this),30); } else { this.IconMenuBox.style.display = "none"; try { this.owner.onHide(); } catch(e) { } }//else }.bind(this),30); }//hide /** * sets flag on icon * @access public * @return void **/ IconMenu.prototype.setAlert = function(mode) { try { if ( mode ) { this.IconMenuBtn.appendChild(this.mode); } else { this.IconMenuBtn.removeChild(this.mode); }//else } catch(e) { } }//setAlert IconMenu.prototype.setAlertIcon = function(icon) { this.mode.src = "/graphics/" + icon; }//setAlertIcon /*=============================================== ADD contact box to icon menu ===============================================*/ /** * Contact is the contact object * @access public * @param object HTMLElement - the object that should be replaced with the interactive menu. * @return void * @uses class.cookie.js * @uses class.function.js **/ function Contact(o) { this.cb = new IconMenu(o,500,300,"icon_mail_on.png"); this.display = new Cookie("Contact.display"); this.cb.setAlertIcon("icon_mail_alert.png"); //register this object on IconMenu for callback this.cb.owner = this; this.contactForm = [ {type:'text',title:'Navn'}, {type:'text',title:'Titel/stilling'}, {type:'text',title:'Virksomhed/organisation'}, {type:'text',title:'Overskrift/emne'}, {type:'textarea',title:'Kommentar'} ]; var top = -4; for( var c = 0; c < this.contactForm.length; c++ ) { //add name input field var ftitle = document.createElement("div"); ftitle.style.position = "absolute"; ftitle.style.top = top + "px"; ftitle.style.left = "28px"; ftitle.style.fontWeight = "bold"; ftitle.style.width = "226px"; ftitle.style.zIndex = 1002; ftitle.style.filter = "alpha(opacity=100)"; ftitle.style.color = "#000000"; ftitle.style.fontSize = "10px"; ftitle.appendChild(document.createTextNode(this.contactForm[c]["title"])); this.cb.content.appendChild(ftitle); switch(this.contactForm[c]["type"]) { case "text": this.contactForm[c].field = document.createElement("input"); this.contactForm[c].field.type = "text"; this.contactForm[c].field.style.top = ( top + 13 ) + "px"; this.contactForm[c].field.style.height = 22 + "px"; top += 40; break; case "textarea": this.contactForm[c].field = document.createElement("textarea"); this.contactForm[c].field.style.top = ( top + 13 ) + "px"; this.contactForm[c].field.style.height = 82 + "px"; top += 100; break; }//switch this.contactForm[c].field.style.position = "absolute"; this.contactForm[c].field.style.left = "28px"; this.contactForm[c].field.style.width = "426px"; this.contactForm[c].field.style.border = "solid 1px #000000"; this.contactForm[c].field.style.filter = "alpha(opacity=80)"; this.contactForm[c].field.style.opacity = .8; this.contactForm[c].field.className = "inputtext"; resExt.addEventHandler(this.contactForm[c].field,"keyup",this.updateCache.bind(this)); this.cb.content.appendChild(this.contactForm[c].field); //create cache object this.contactForm[c].field.cache = new Cookie("Contact." + this.contactForm[c]["title"]); //check wether the contact box should appear if ( this.display.getValue() ) this.cb.show(true); }//for this.submitbtn = document.createElement("input"); this.submitbtn.type = "button"; this.submitbtn.value = "Send"; this.submitbtn.style.position = "absolute"; this.submitbtn.style.left = "198px"; this.submitbtn.style.top = top + "px"; this.submitbtn.style.width = "55px"; this.submitbtn.style.fontSize = "10px"; this.submitbtn.style.textAlign = "right"; this.submitbtn.style.border = "solid 1px #000000"; this.submitbtn.style.backgroundColor = "#000000"; this.submitbtn.style.color = "#ffffff"; this.submitbtn.style.filter = "alpha(opacity=80)"; this.submitbtn.style.opacity = .8; this.submitbtn.style.backgroundImage = "url('/graphics/icon_contact_submit.png')"; this.submitbtn.style.backgroundRepeat = "no-repeat"; resExt.addEventHandler(this.submitbtn,"click",this.submit.bind(this)); this.cb.content.appendChild(this.submitbtn); this.hidebtn = document.createElement("input"); this.hidebtn.type = "button"; this.hidebtn.value = "Skjul formular"; this.hidebtn.style.position = "absolute"; this.hidebtn.style.left = "88px"; this.hidebtn.style.top = top + "px"; this.hidebtn.style.width = "105px"; this.hidebtn.style.fontSize = "10px"; this.hidebtn.style.textAlign = "right"; this.hidebtn.style.border = "solid 1px #000000"; this.hidebtn.style.backgroundColor = "#000000"; this.hidebtn.style.color = "#ffffff"; this.hidebtn.style.filter = "alpha(opacity=80)"; this.hidebtn.style.opacity = .8; this.hidebtn.style.backgroundImage = "url('/graphics/icon_contact_submit.png')"; this.hidebtn.style.backgroundRepeat = "no-repeat"; resExt.addEventHandler(this.hidebtn,"click",this.cb.hide.bind(this.cb)); this.cb.content.appendChild(this.hidebtn); this.cancelbtn = document.createElement("input"); this.cancelbtn.type = "button"; this.cancelbtn.value = "Slet"; this.cancelbtn.style.position = "absolute"; this.cancelbtn.style.left = "28px"; this.cancelbtn.style.top = top + "px"; this.cancelbtn.style.width = "55px"; this.cancelbtn.style.fontSize = "10px"; this.cancelbtn.style.textAlign = "right"; this.cancelbtn.style.border = "solid 1px #000000"; this.cancelbtn.style.backgroundColor = "#000000"; this.cancelbtn.style.color = "#ffffff"; this.cancelbtn.style.filter = "alpha(opacity=80)"; this.cancelbtn.style.opacity = .8; this.cancelbtn.style.backgroundImage = "url('/graphics/icon_contact_cancel.png')"; this.cancelbtn.style.backgroundRepeat = "no-repeat"; resExt.addEventHandler(this.cancelbtn,"click",this.cancel.bind(this)); this.cb.content.appendChild(this.cancelbtn); this.readCache(); this.updateAlert(); }//Contact Contact.prototype.submit = function() { var com = new AjaxReq("/xml.blog.php",this); com.addPost("blogentryid",blogId); //gather data and disable fields while sending data: for ( var c = 0; c < this.contactForm.length; c++ ) { com.addPost(this.contactForm[c].title,this.contactForm[c].field.value); this.contactForm[c].field.disabled = "disabled"; }//for //remove buttons to awoid user input while sending data this.cb.content.removeChild(this.submitbtn); this.cb.content.removeChild(this.hidebtn); this.cb.content.removeChild(this.cancelbtn); this.pulseimg = document.createElement("img"); this.pulseimg.src = "/graphics/mail_sender_" + ( Math.round(((Math.random() * 3) + 1)) ) + ".png"; this.pulseimg.style.position = "absolute"; this.pulseimg.style.left = "29px"; this.pulseimg.style.top = "259px"; this.cb.content.appendChild(this.pulseimg); this.pulseinfo = document.createElement("div"); this.pulseinfo.style.position = "absolute"; this.pulseinfo.style.left = "56px"; this.pulseinfo.style.top = "256px"; this.pulseinfo.style.width = "300px"; this.pulseinfo.style.fontSize = "12px"; this.pulseinfo.style.filter = "alpha(opacity=80)"; this.pulseinfo.style.color = "#000000"; this.writemsg("Sender kommentar...vent venligst",0); this.cb.content.appendChild(this.pulseinfo); this.pulseimg.on = true; this.pulse(0); com.send(); }//submit Contact.prototype.confirmed = function(xmlhash,xml) { this.blogcomment = xmlhash["data"]; window.setTimeout(this.end.bind(this,0,1),300); }//submitConfirmed Contact.prototype.end = function(c,h) { var hex = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]; if ( c != undefined ) { this.contactForm[c].field.disabled = false; if ( ++h < hex.length) { this.contactForm[c].field.style.color = "#" + hex[h] + hex[h] + hex[h] + hex[h] + hex[h] + hex[h]; window.setTimeout(this.end.bind(this,c,h),20); } else { if ( ++c < this.contactForm.length ) window.setTimeout(this.end.bind(this,c,1),50); else window.setTimeout(this.end.bind(this),50); } } else { this.pulseimg.on = false; this.pulseimg.src = "/graphics/mail_sender_3.png"; this.clearCache(); for ( var c = 0; c < this.contactForm.length; c++ ) this.contactForm[c].field.style.color = "#000000"; this.writemsg("Kommentar sendt!",0); var div = document.createElement("div"); div.className="blog_comment"; div.innerHTML = this.blogcomment; document.getElementById("blogcomments").appendChild(div); setTimeout(this.cancel.bind(this,true),1000); }//else }//field Contact.prototype.pulse = function() { if ( this.pulseimg.on ) { var sender = Math.round(((Math.random() * 3) + 1)); this.pulseimg.src = "/graphics/mail_sender_" + sender +".png"; var timeout = Math.round(((Math.random() * 300) + 60)); var timer = setTimeout(this.pulse.bind(this),timeout); }//if }//pulse Contact.prototype.writemsg = function(msg,n) { if ( n == 0 ) { clearTimeout(this.pulseinfo.writetimer); while ( this.pulseinfo.childNodes.length > 0) this.pulseinfo.removeChild(this.pulseinfo.childNodes.item(0)); } var node = document.createTextNode(msg.substr(n,1)); if ( n > 0 ) this.pulseinfo.removeChild(this.pulseinfo.childNodes.item(this.pulseinfo.childNodes.length - 1)); this.pulseinfo.appendChild(node); this.pulseinfo.appendChild(document.createTextNode("_")); n++; if ( n < msg.length) this.pulseinfo.writetimer = setTimeout(this.writemsg.bind(this,msg,n),25); }//writemsg Contact.prototype.cancel = function(btn) { this.cb.hide(); this.clearCache(); this.updateAlert(); if ( btn ) { this.cb.content.removeChild(this.pulseimg); this.cb.content.removeChild(this.pulseinfo); this.cb.content.appendChild(this.submitbtn); this.cb.content.appendChild(this.hidebtn); this.cb.content.appendChild(this.cancelbtn); }//if }//cancel Contact.prototype.onShow = function() { this.display.setValue("1"); this.contactForm[0].field.focus(); }//onShow Contact.prototype.onHide = function() { this.display.remove(); }//onShow Contact.prototype.updateAlert = function() { var contents = 0; for ( var c = 0; c < this.contactForm.length; c++ ) { contents = this.contactForm[c].field.cache.getValue().length > 0 ? 1 : contents; }//for if ( parseInt(contents) != 0 ) this.cb.setAlert(true); else this.cb.setAlert(false); }//updateAlert Contact.prototype.updateCache = function() { for ( var c = 0; c < this.contactForm.length; c++ ) { this.contactForm[c].field.cache.setValue(this.contactForm[c].field.value); }//for this.updateAlert(); }//updateCache Contact.prototype.readCache = function() { for ( var c = 0; c < this.contactForm.length; c++ ) { if ( this.contactForm[c].field.cache.getValue() ) this.contactForm[c].field.value = this.contactForm[c].field.cache.getValue(); }//for }//readCache Contact.prototype.clearCache = function() { for( var c = 0; c < this.contactForm.length; c++ ) { this.contactForm[c].field.value = ""; this.contactForm[c].field.cache.setValue(this.contactForm[c].field.value); }//for }//clearCache