Content displayed when you click on the first tab.
Content displayed when you click on the second tab.
*/
var Tabs = new Class({
Implements: Options,
options: {
classPrefix: 'Panel'
},
initialize: function(panels, options) {
this.setOptions(options);
if (panels.length <= 0) return false;
this.panels = panels;
this.panels.setStyle('display','none');
this.tabs = [];
this.panels.each(function(el,index) {
var tab = new Element('span',{
'class':this.options.classPrefix+'Tab',
'text':el.get('title'),
'events':{
'click':function(e){
e.stop();
this.activate(el,e.target);
}.bindWithEvent(this)
}
});
this.tabs.include(tab);
}.bind(this));
this.container = new Element('div',{
'class':this.options.classPrefix+'Container',
'styles':{
'overflow':'hidden',
'height':0
}
});
this.container.inject(this.panels[0],'before');
this.panels.each(function(el,index) {
this.container.adopt(el);
}.bind(this));
this.tabs.each(function(el,index){
el.inject(this.container,'before');
}.bind(this));
this.activate(this.panels[0],this.tabs[0])
},
activate: function(panel,tab){
this.panels.removeClass(this.options.classPrefix+'Active');
panel.addClass(this.options.classPrefix+'Active');
this.panels.setStyle('display','none');
panel.setStyle('display','block');
this.tabs.each(function(el,index){
el.removeClass(this.options.classPrefix+'Active');
}.bind(this));
tab.addClass(this.options.classPrefix+'Active');
this.container.tween('height',panel.getSize().y);
}
});
/* ---------------------------------------------------------------------------
Script : Validate
Version : 2.0
Authors : Samuel Birch
Desc : Form validation
Licence : Open Source MIT Licence
Modified : Ryan J. Salva
: Updated to be compatible with Capitol Media code library
*/
var Validate = new Class({
Implements: [Options,Events],
options: {
validateOnBlur: true,
errorClass: 'error',
errorMsgClass: 'errorMessage',
dateFormat: 'MM/dd/yy',
showErrorsInline: true,
label: 'Please wait...',
onFail: Class.empty,
onSuccess: Class.empty
},
initialize: function(form, options) {
this.setOptions(options);
this.form = $(form);
this.elements = this.form.getElements('.required, .email, .number, .date, .postcode');
this.list = [];
this.elements.each(function(el,i){
if(this.options.validateOnBlur){
el.addEvent('blur', this.validate.bind(this, el));
}
}.bind(this));
this.form.addEvent('submit', function(e){
var event = new Event(e);
var doSubmit = true;
this.elements.each(function(el,i){
if(! this.validate(el)){
event.stop();
doSubmit = false
this.list.include(el);
}else{
this.list.erase(el);
}
}.bind(this));
if(doSubmit){
if(this.options.onSuccess){
event.stop();
this.fireEvent('onSuccess');
} else {
this.form.getElement('input[type=submit]').setProperty('value',this.options.label);
}
}else{
// this.getList();
this.fireEvent('onFail');
}
}.bindWithEvent(this));
},
getList: function(){
var list = new Element('ul');
this.list.each(function(el,i){
if(el.title != ''){
var li = new Element('li').set('text',el.title);
}
});
return list;
},
validate: function(el){
var valid = true;
this.clearMsg(el);
switch(el.type){
case 'text':
case 'textarea':
if(el.hasClass('required') && el.value == ''){
valid = false;
this.setMsg(el, 'This field is required.');
} else {
valid = true;
}
if (el.value != '') {
if(el.hasClass('email')){
var regEmail = /^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/;
if(el.value.toUpperCase().match(regEmail)){
valid = true;
}else{
valid = false;
this.setMsg(el, 'Enter a valid email address.');
}
}
if(el.hasClass('number')){
var regNum = /[-+]?[0-9]*\.?[0-9]+/;
if(el.value.match(regNum)){
valid = true;
}else{
valid = false;
this.setMsg(el, 'Enter a valid number');
}
}
if(el.hasClass('postcode')){
var regPC = /^([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([A-Za-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9]?[A-Za-z])))) [0-9][A-Za-z]{2})$/
if(el.value.match(regPC)){
valid = true;
}else{
valid = false;
this.setMsg(el, 'Enter a valid postcode');
}
}
if(el.hasClass('date')){
var d = Date.parse(el.value);
if(d != null){
el.value = d.toString(this.options.dateFormat);
valid = true;
}else{
valid = false;
this.setMsg(el, 'Enter a valid date in the format: '+this.options.dateFormat.toLowerCase());
}
}
}
break;
case 'select-one':
if(el.hasClass('required') && el.selectedIndex != 0) {
valid = true;
} else {
valid = false;
this.setMsg(el, 'This field is required.');
}
break
case 'checkbox':
if(!el.checked){
valid = false;
this.setMsg(el);
}else{
valid = true;
}
break;
case 'radio':
var rad = $A(this.form[el.name]);
var ok = false;
rad.each(function(e,i){
if(e.checked){
ok = true;
}
});
if(!ok){
valid = false;
this.setMsg(rad.getLast(), 'Please select an option');
}else{
valid = true;
this.clearMsg(rad.getLast());
}
break;
}
return valid;
},
setMsg: function(el, msg){
if(msg == undefined){
msg = el.get('title');
}
if(this.options.showErrorsInline){
if(el.error == undefined){
var pos = el.getPosition(el.getOffsetParent());
var width = el.getWidth();
el.error = new Element('div',{
'className':this.options.errorMsgClass,
'styles':{
opacity: 0,
position: 'absolute',
left: pos.x + width,
top: pos.y
},
'text':msg
});
el.error.inject(el.getParent(),'inside');
el.error.tween('opacity',1);
} else {
el.error.set('text',msg);
}
el.addClass(this.options.errorClass);
}
},
clearMsg: function(el){
el.removeClass(this.options.errorClass);
if(el.error != undefined){
el.error.destroy();
el.error = undefined;
}
}
});
