// ----------------------------------------------------------------------------------- // // ContactForm v1.0 // by Sam Licavoli - http://www.bsswebinc.com // Last Modification: 12/19/08 // // built on Lightbox v2.04 // by Lokesh Dhakar - http://www.lokeshdhakar.com // Last Modification: 2/9/08 // // For more information, visit: // http://lokeshdhakar.com/projects/lightbox2/ // // Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ // - Free for use in both personal and commercial projects // - Attribution requires leaving author name, author link, and the license info intact. // // Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets. // Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous. // // ----------------------------------------------------------------------------------- /* Table of Contents ----------------- Configuration Contactbox Class Declaration - initialize() - updateFormCaller() - start() - enableKeyboardNav() - disableKeyboardNav() - keyboardAction() - rebuildForm() - end() Function Calls - document.observe() */ // ----------------------------------------------------------------------------------- // // Configurationl // ContactboxOptions = Object.extend({ fileLoadingImage: '/images/loading.gif', fileBottomNavCloseImage: '/images/closelabel.png', overlayOpacity: 0.8, // controls transparency of shadow overlay animate: true, // toggles resizing animations resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest) borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable // When grouping images this is used to write: Image # of #. // Change it for non-english localization labelImage: "Image", labelOf: "of" }, window.ContactboxOptions || {}); // ----------------------------------------------------------------------------------- var Contactbox = Class.create(); Contactbox.prototype = { initialize: function() { this.updateFormCaller(); this.keyboardAction = this.keyboardAction.bindAsEventListener(this); if (ContactboxOptions.resizeSpeed > 10) ContactboxOptions.resizeSpeed = 10; if (ContactboxOptions.resizeSpeed < 1) ContactboxOptions.resizeSpeed = 1; this.resizeDuration = ContactboxOptions.animate ? ((11 - ContactboxOptions.resizeSpeed) * 0.15) : 0; this.overlayDuration = ContactboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration // When Contact starts it will resize itself from 250 by 250 to the current image dimension. // If animations are turned off, it will be hidden as to prevent a flicker of a // white 250 by 250 box. var size = (ContactboxOptions.animate ? 421 : 1) + 'px'; var objBody = $$('body')[0]; objBody.appendChild(Builder.node('div',{id:'overlay'})); objBody.appendChild(Builder.node('div',{id:'contactbox'}, [ Builder.node('div',{id:'FormContainer'}, Builder.node('form',{id:'UserRegister', name:'UserRegister', method:'post'}, [ Builder.node('label',{htmlFor:'ContactName',id:'Contact'},'*Name:'), Builder.node('input',{id:'ContactName', type:'text'}), Builder.node('br'), Builder.node('label',{htmlFor:'Address'},'Address:'), Builder.node('input',{id:'Address', type:'text'}), Builder.node('br'), Builder.node('label',{htmlFor:'City'},'City:'), Builder.node('input',{id:'City', type:'text'}), Builder.node('br'), Builder.node('label',{htmlFor:'State'},'State:'), Builder.node('input',{id:'State', type:'text'}), Builder.node('br'), Builder.node('label',{htmlFor:'Zip'},'Zip:'), Builder.node('input',{id:'Zip', type:'text'}), Builder.node('br'), Builder.node('label',{htmlFor:'Phone'},'*Phone:'), Builder.node('input',{id:'Phone1', type:'text', size:'3'}), Builder.node('span',{className:'Phone'}, '-'), Builder.node('input',{id:'Phone2', type:'text', size:'3'}), Builder.node('span',{className:'Phone'}, '-'), Builder.node('input',{id:'Phone3', type:'text', size:'4'}), Builder.node('br'), Builder.node('label',{htmlFor:'Email'},'*Email:'), Builder.node('input',{id:'Email', type:'text'}), Builder.node('br'), Builder.node('label',{htmlFor:'Month'},'Date of Interest:'), Builder.node('select',{id:'Month'}, [ Builder.node('option',{value:'01'}, 'Jan'), Builder.node('option',{value:'02'}, 'Feb'), Builder.node('option',{value:'03'}, 'Mar'), Builder.node('option',{value:'04'}, 'Apr'), Builder.node('option',{value:'05'}, 'May'), Builder.node('option',{value:'06'}, 'Jun'), Builder.node('option',{value:'07'}, 'Jul'), Builder.node('option',{value:'08'}, 'Aug'), Builder.node('option',{value:'09'}, 'Sept'), Builder.node('option',{value:'10'}, 'Oct'), Builder.node('option',{value:'11'}, 'Nov'), Builder.node('option',{value:'12'}, 'Dec'), Builder.node('option',{value:''}, 'month') ]), Builder.node('select',{id:'Day'}, [ Builder.node('option',{value:'1'}, '1'), Builder.node('option',{value:'2'}, '2'), Builder.node('option',{value:'3'}, '3'), Builder.node('option',{value:'4'}, '4'), Builder.node('option',{value:'5'}, '5'), Builder.node('option',{value:'6'}, '6'), Builder.node('option',{value:'7'}, '7'), Builder.node('option',{value:'8'}, '8'), Builder.node('option',{value:'9'}, '9'), Builder.node('option',{value:'10'}, '10'), Builder.node('option',{value:'11'}, '11'), Builder.node('option',{value:'12'}, '12'), Builder.node('option',{value:'13'}, '13'), Builder.node('option',{value:'14'}, '14'), Builder.node('option',{value:'15'}, '15'), Builder.node('option',{value:'16'}, '16'), Builder.node('option',{value:'17'}, '17'), Builder.node('option',{value:'18'}, '18'), Builder.node('option',{value:'19'}, '19'), Builder.node('option',{value:'20'}, '20'), Builder.node('option',{value:'21'}, '21'), Builder.node('option',{value:'22'}, '22'), Builder.node('option',{value:'23'}, '23'), Builder.node('option',{value:'24'}, '24'), Builder.node('option',{value:'25'}, '25'), Builder.node('option',{value:'26'}, '26'), Builder.node('option',{value:'27'}, '27'), Builder.node('option',{value:'28'}, '28'), Builder.node('option',{value:'29'}, '29'), Builder.node('option',{value:'30'}, '30'), Builder.node('option',{value:'31'}, '31'), Builder.node('option',{value:''}, 'day') ]), Builder.node('select',{id:'Year'}, [ Builder.node('option',{value:'2009'}, '2009'), Builder.node('option',{value:'2010'}, '2010'), Builder.node('option',{value:'2011'}, '2011'), Builder.node('option',{value:'2012'}, '2012'), Builder.node('option',{value:'2013'}, '2013'), Builder.node('option',{value:'2014'}, '2014'), Builder.node('option',{value:'2015'}, '2015'), Builder.node('option',{value:'2016'}, '2016'), Builder.node('option',{value:'2017'}, '2017'), Builder.node('option',{value:'2018'}, '2018'), Builder.node('option',{value:'2019'}, '2019'), Builder.node('option',{value:'2020'}, '2020'), Builder.node('option',{value:'2021'}, '2021'), Builder.node('option',{value:'2022'}, '2022'), Builder.node('option',{value:'2023'}, '2023'), Builder.node('option',{value:'2024'}, '2024'), Builder.node('option',{value:'2025'}, '2025'), Builder.node('option',{value:'2026'}, '2026'), Builder.node('option',{value:'2027'}, '2027'), Builder.node('option',{value:'2028'}, '2028'), Builder.node('option',{value:'2029'}, '2029'), Builder.node('option',{value:'2030'}, '2030'), Builder.node('option',{value:''}, 'year') ]), Builder.node('br'), Builder.node('label',{htmlFor:'Type'},'*Inquiry Type:'), Builder.node('select',{id:'Type'}, [ Builder.node('option',{value:'Corporate Event'}, 'Corporate Event'), Builder.node('option',{value:'Cake'}, 'Cake'), Builder.node('option',{value:'Hall'}, 'Hall Rental'), Builder.node('option',{value:'Event'}, 'Event Planning'), Builder.node('option',{value:'Catering'}, 'Catering'), Builder.node('option',{value:'Multiple'}, 'Multiple Services'), Builder.node('option',{value:'General'}, 'General') ]), Builder.node('br'), Builder.node('label',{htmlFor:'ContactMessage', className:'Contact'},'*Message:'), Builder.node('br'), Builder.node('textarea',{id:'ContactMessage'}), Builder.node('br'), Builder.node('p','*Denotes required field'), Builder.node('br'), Builder.node('br'), Builder.node('input',{id:'Submit', type:'button', value:'Submit',onclick:'contactscript(["ContactName","Address","City","State","Zip","Phone1","Phone2","Phone3","Email","Month","Day","Year","Type","ContactMessage","NO_CACHE"],["FormContainer"]);'}), Builder.node('br') ] ) ), Builder.node('div',{id:'loading'},Builder.node('a',{id:'loadingLink', href: '#' },Builder.node('img', {src: ContactboxOptions.fileLoadingImage}))),Builder.node('div',{id:'bottomNav'},Builder.node('a',{id:'bottomNavClose', href: '#' },Builder.node('img', { src: ContactboxOptions.fileBottomNavCloseImage }))) ] ) ); $('overlay').hide().observe('click', (function() { this.end(); }).bind(this)); $('loading').hide().observe('focus',(function() { this.end(); }).bind(this)); $('contactbox').hide().observe('click', (function(event) { if (event.element().id == 'contactbox') this.end(); }).bind(this)); $('FormContainer').setStyle({ width: size, height: '507px' }); $('bottomNav').setStyle({ width: size}); $('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this)); $('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this)); var th = this; (function(){ var ids = 'overlay contactbox FormContainer hoverNavloading loadingLink ' + 'bottomNav bottomNavClose'; $w(ids).each(function(id){ th[id] = $(id); }); }).defer(); }, //end initialize updateFormCaller: function() { this.updateFormCaller = Prototype.emptyFunction; document.observe('click', (function(event){ var target = event.findElement('a[rel^=contactbox]') || event.findElement('area[rel^=contactbox]'); if (target) { event.stop(); this.start(target); } }).bind(this)); }, // enableKeyboardNav() // enableKeyboardNav: function() { document.observe('keydown', this.keyboardAction); }, // // disableKeyboardNav() // disableKeyboardNav: function() { document.stopObserving('keydown', this.keyboardAction); }, // // keyboardAction() // keyboardAction: function(event) { var keycode = event.keyCode; var escapeKey; if (event.DOM_VK_ESCAPE) { // mozilla escapeKey = event.DOM_VK_ESCAPE; } else { // ie escapeKey = 27; } var key = String.fromCharCode(keycode).toLowerCase(); if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close Contactbox this.end(); } }, // // start() // Display overlay and lightbox. If image is part of a set, add siblings to imageArray. // start: function() { $$('object', 'embed').each(function(node){ node.style.visibility = 'hidden' }); // stretch overlay to fill page and fade in var arrayPageSize = this.getPageSize(); $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' }); new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: ContactboxOptions.overlayOpacity }); // calculate top and left offset for the lightbox var arrayPageScroll = document.viewport.getScrollOffsets(); var contactboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10); var contactboxLeft = arrayPageScroll[0]; this.contactbox.setStyle({ top: contactboxTop + 'px', left: contactboxLeft + 'px' }).show(); $('FormContainer').show(); }, // // end() // end: function() { this.disableKeyboardNav(); this.contactbox.hide(); new Effect.Fade(this.overlay, { duration: this.overlayDuration }); $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' }); }, //getPageSize getPageSize: function() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = window.innerWidth + window.scrollMaxX; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer if(document.documentElement.clientWidth){ windowWidth = document.documentElement.clientWidth; } else { windowWidth = self.innerWidth; } windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = xScroll; } else { pageWidth = windowWidth; } return [pageWidth,pageHeight]; } };//close Contactbox.Prototype document.observe('dom:loaded', function () { new Contactbox(); });