/* //******* // // filename: form_modal.js // author: Zack Brown // date: 7th January 2011 // //******* */ //declare FormModal class var FormModal = Class.create(); //declare the FormModal prototype FormModal.prototype = { //modal body element modal_body: null, //model overlay and wrapper modal_overlay: null, modal_wrapper: null, //init self initialize:function() { //gather body element this.modal_body = $$('body')[0]; //declare elements this.modal_overlay = new Element("div", {id: "modal_overlay"}); this.modal_wrapper = new Element("div", {id: "modal_wrapper"}); this.modal_header = new Element("div", {id: "modal_header"}); this.modal_title = new Element("h1", {id: "modal_title"}); this.modal_close = new Element("img", {id: "modal_close", width: "16px", height: "16px", alt: "Modal Window", src: "images/smcms/cross.png"}); this.modal_content = new Element("div", {id: "modal_content"}); //declare form elements this.modal_form = new Element("form", {action: "meetings/request/", method: "post"}); this.modal_form_fieldset = new Element("fieldset", {}); this.model_form_name_input = new Element("input", {type: "text", name: "input_name"}); this.modal_form_email_address_input = new Element("input", {type: "text", name: "input_email_address"}); this.modal_form_company_input = new Element("input", {type: "text", name: "input_company"}); this.modal_form_day_input = new Element("select", {name: "input_start_day"}); this.modal_form_month_input = new Element("select", {name: "input_start_month"}); this.modal_form_year_input = new Element("select", {name: "input_start_year"}); this.modal_form_hour_input = new Element("select", {name: "input_start_hour"}); this.modal_form_minute_input = new Element("select", {name: "input_start_minute"}); this.modal_form_submit_input = new Element("input", {type: "submit", value: "Request Meeting", name: "input_submit"}); this.modal_form_name_label = new Element("label", {}); this.modal_form_email_address_label = new Element("label", {}); this.modal_form_company_label = new Element("label", {}); this.modal_form_date_label = new Element("label", {}); this.modal_form_time_label = new Element("label", {}); this.modal_form_submit_label = new Element("label", {}); this.modal_form_name_paragraph = new Element("p", {}); this.modal_form_email_address_paragraph = new Element("p", {}); this.modal_form_company_paragraph = new Element("p", {}); this.modal_form_date_paragraph = new Element("p", {}); this.modal_form_time_paragraph = new Element("p", {}); this.modal_form_date_wrapper = new Element("div", {className: "select_fields"}); this.modal_form_time_wrapper = new Element("div", {className: "select_fields"}); //set modal from label content this.modal_form_name_paragraph.innerHTML = "* Name:"; this.modal_form_email_address_paragraph.innerHTML = "* Email Address:"; this.modal_form_company_paragraph.innerHTML = "* Company/Meeting Location:"; this.modal_form_date_paragraph.innerHTML = "* Date:"; this.modal_form_time_paragraph.innerHTML = "* Time:"; //append label content to labels this.modal_form_name_label.appendChild(this.modal_form_name_paragraph); this.modal_form_email_address_label.appendChild(this.modal_form_email_address_paragraph); this.modal_form_company_label.appendChild(this.modal_form_company_paragraph); this.modal_form_date_label.appendChild(this.modal_form_date_paragraph); this.modal_form_time_label.appendChild(this.modal_form_time_paragraph); //append select fields to wrapper this.modal_form_date_wrapper.appendChild(this.modal_form_day_input); this.modal_form_date_wrapper.appendChild(this.modal_form_month_input); this.modal_form_date_wrapper.appendChild(this.modal_form_year_input); this.modal_form_time_wrapper.appendChild(this.modal_form_hour_input); this.modal_form_time_wrapper.appendChild(this.modal_form_minute_input); //append input fields to labels this.modal_form_name_label.appendChild(this.model_form_name_input); this.modal_form_email_address_label.appendChild(this.modal_form_email_address_input); this.modal_form_company_label.appendChild(this.modal_form_company_input); this.modal_form_date_label.appendChild(this.modal_form_date_wrapper); this.modal_form_time_label.appendChild(this.modal_form_time_wrapper); this.modal_form_submit_label.appendChild(this.modal_form_submit_input); //append labels to fieldset this.modal_form_fieldset.appendChild(this.modal_form_name_label); this.modal_form_fieldset.appendChild(this.modal_form_email_address_label); this.modal_form_fieldset.appendChild(this.modal_form_company_label); this.modal_form_fieldset.appendChild(this.modal_form_date_label); this.modal_form_fieldset.appendChild(this.modal_form_time_label); this.modal_form_fieldset.appendChild(this.modal_form_submit_label); //select arrays var select_days = []; var select_months = [{text: "January", value: 1}, {text: "February", value: 2}, {text: "March", value: 3}, {text: "April", value: 4}, {text: "May", value: 5}, {text: "June", value: 6}, {text: "July", value: 7}, {text: "August", value: 8}, {text: "September", value: 9}, {text: "October", value: 10}, {text: "November", value: 11}, {text: "December", value: 12}]; var select_years = []; var select_hours = []; var select_minutes = [{text: "00", value: 0}, {text: "15", value: 15}, {text: "30", value: 30}, {text: "45", value: 45}]; //current year var current_year = new Date().getFullYear(); //create array of days for(index = 1; index <= 31; ++index) { //append day to array of days select_days[select_days.length] = {text: index, value: index}; } //create array of years for(index = current_year; index < (current_year + 1); ++index) { //append year to array of years select_years[select_years.length] = {text: index, value: index}; } //create array of hours for(index = 8; index <= 17; ++index) { //append hour to array of hours select_hours[select_hours.length] = {text: (index < 10 ? "0" + index : index), value: index}; } //loop through array of days select_days.each(function(day) { //append option this.modal_form_day_input.options.add(new Option(day.text, day.value)); }.bind(this)); //loop through array of months select_months.each(function(month) { //append option this.modal_form_month_input.options.add(new Option(month.text, month.value)); }.bind(this)); //loop through array of years select_years.each(function(year) { //append option this.modal_form_year_input.options.add(new Option(year.text, year.value)); }.bind(this)); //loop through array of hours select_hours.each(function(hour) { //append option this.modal_form_hour_input.options.add(new Option(hour.text, hour.value)); }.bind(this)); //loop through array of minutes select_minutes.each(function(minute) { //append option this.modal_form_minute_input.options.add(new Option(minute.text, minute.value)); }.bind(this)); //append fieldset to form this.modal_form.appendChild(this.modal_form_fieldset); //bind event listener for keyboard events this.modal_keyboard_listener = this.modal_keyboard_listener.bindAsEventListener(this); //bind event listener for mouse events this.modal_mouse_listener = this.modal_mouse_listener.bindAsEventListener(this); //observe click events on modal close image Event.observe(this.modal_close, "click", this.modal_hide.bind(this)); //set default modal title this.modal_title.innerHTML = "Request A Meeting"; //append notes to header this.modal_header.appendChild(this.modal_title); this.modal_header.appendChild(this.modal_close); //append nodes to wrapper this.modal_wrapper.appendChild(this.modal_header); this.modal_wrapper.appendChild(this.modal_content); //append nodes to body this.modal_body.appendChild(this.modal_overlay); this.modal_body.appendChild(this.modal_wrapper); //append form to modal this.modal_content.appendChild(this.modal_form); //hide overlay and wrapper this.modal_overlay.hide(); this.modal_wrapper.hide(); //gather meeting overlay elements var meeting_overlay = $("outlook_meeting_overlay"); var meeting_transparent = $("outlook_meeting_transparent"); //gather meeting banner elements var meeting_banners = $$(".outlook_meeting_banner"); //check meeting overlay element is valid if(meeting_overlay != undefined) { //observe click events Event.observe(meeting_overlay, "click", this.modal_display.bind(this)); } //check meeting transparent element is valid if(meeting_transparent != undefined) { //observe click events Event.observe(meeting_transparent, "click", this.modal_display.bind(this)); } //check meeting banner elements is valid if(meeting_banners != undefined && meeting_banners.length > 0) { //loop through array of meeting banner elements meeting_banners.each(function(banner) { //check banner element is valid if(banner != undefined) { //observe click events Event.observe(banner, "click", this.modal_display.bind(this)); } }.bind(this)); } }, //wrapper function for handling keyboard events modal_keyboard_listener: function(event) { //gather key event var key_code = event.keyCode; //define escape key code var escape_key_code; //determine if (event.DOM_VK_ESCAPE) { //FF escape_key_code = event.DOM_VK_ESCAPE; } else { //IE escape_key_code = 27; } //check key code if(key_code == escape_key_code) { //hide modal this.modal_hide(); } }, //wrapper function for handling mouse events modal_mouse_listener: function(event) { //gather scroll dimensions var page_scroll_dimensions = document.viewport.getScrollOffsets(); //set overlay scroll offset this.modal_overlay.setStyle({top: (page_scroll_dimensions[1] - 25) + "px"}); //set wrapper scroll offset this.modal_wrapper.setStyle({top: (page_scroll_dimensions[1] + 35) + "px"}); }, //wrapper function for submitting the modal form modal_submit: function() { //create new ajax request new Ajax.Request("site/quote/", { method: "post", parameters: $("quote_sidebar").serialize(), onComplete: function() { // }, onSuccess: function(result) { //create paragraph var response_text = new Element("div", {}); //save response text response_text.innerHTML = result.responseText; //reset inner html this.modal_content.innerHTML = ""; //append response text this.modal_content.appendChild(response_text); //display modal this.modal_display(); }.bind(this)}); }, //wrapper function for displaying modal modal_display: function() { //observe keyboard events Event.observe(document, 'keydown', this.modal_keyboard_listener); //observe keyboard events Event.observe(window, 'scroll', this.modal_mouse_listener); //stretch overlay to fill screen this.modal_overlay.setStyle({width: document.viewport.getWidth() + "px", height: (document.viewport.getHeight() + 25) + "px"}); //gather scroll dimensions var page_scroll_dimensions = document.viewport.getScrollOffsets(); //set scroll offset for overlay this.modal_overlay.setStyle({top: (page_scroll_dimensions[1] - 25) + "px"}); //set position for modal this.modal_wrapper.setStyle({top: (page_scroll_dimensions[1] + 35) + "px", left: ((document.viewport.getWidth() / 2) - (parseInt(this.modal_wrapper.getStyle("width")) / 2)) + "px"}).show(); //fade overlay in new Effect.Appear(this.modal_overlay, {duration: 0.5, from: 0.0, to: 0.7, afterFinish: function() { this.modal_overlay.show(); }.bind(this) }); }, //wrapper function for hiding modal modal_hide: function() { //stop observing keyboard events Event.stopObserving(document, 'keydown', this.modal_keyboard_listener); //stop observing mouse events Event.stopObserving(window, "scroll", this.modal_mouse_listener); //hide wrapper this.modal_wrapper.hide(); //fade wrapper out new Effect.Fade(this.modal_overlay, {duration: 0.5, afterFinish: function() { this.modal_overlay.hide(); }.bind(this) }); } }; //observe window load event Event.observe(window, 'load', function() { //create a new form modal var form_modal = new FormModal(); });