/**
* Advisor
*
* Know issues
*
* - In IE 6 and 7 the opacity Animation don't works
*
* @author Forzieri
**/
var Advisor = {
// HTML Elements
advisor: null,
overlay: null,
advisorContent: null,
advisorContentLoader: null,
advisorCloseButton: null,
advisor_id: 'forzieriAdvisor',
advisorContent_id: 'forzieriAdvisorContent',
advisorContentLoader_id: 'forzieriAdvisorContentLoader',
advisorTableContainer: 'forzieriAdvisorTableCenter',
advisorCloseButton_id: 'fzb_closeBtn',
advisorTable: '',
//advisorTable: '',
// Button Text
okTextButton: Messages.msg_ok,
cancelTextButton: Messages.msg_cancel,
advisor_ok_button: ''+this.okTextButton+'',
advisor_cancel_button: ''+this.cancelTextButton+'',
// Overlay
userOverlay: false,
// Content
contentURL: null,
contentText: null,
// Options object
options: {},
// Initialization
// Attributes:
// - width: the width of the Advisor
init: function(options) {
// If Exist Another Advisor, Destroy It
if ($(this.advisor_id)) {
this.closeAdvisor();
return;
}
// Set Data
this.options = options || {};
// Scope
var obj = this;
// Create the Advisor Div
this.advisor = new Element('div', {
'id': this.advisor_id,
'html': this.advisorTable,
'styles': {
'display': 'block',
'width': '100%',
'height': 'auto',
'text-align': 'center',
'top': 0,
'left': 0,
'z-index': 13000,
'opacity': 0
}
});
// Overlay
if (this.options.useOverlay) {
this.overlay = new Element('div', {
'id': 'advisorOverlay',
'styles': {
'background': '#fff',
'opacity': 0.7,
'height': document.getCoordinates().height,
'width': '100%',
'position': 'absolute',
'top': 0,
'left': 0,
'z-index': 0
}
});
this.overlay.inject($(this.advisor), 'top');
}
// Put Advisor Div at the top of the Body
this.advisor.inject($(document.body), 'top');
// Set Styles for the Advisor
$('advisorTable').setStyles({
'position': 'relative',
'top': '200px',
'width': this.options.width,
'height': 'auto',
'margin': '0 auto',
'text-align': 'left'
});
// Create the Advisor Div Content and Set it's styles
this.advisorContent = new Element('div', {
'id': this.advisorContent_id,
'styles': {
//'margin': '10px', // Commented for the new version with the shadows
'padding': '10px 30px 10px 10px',
'border': '1px solid #dedad7',
'background': '#ebebeb url(/forzieriAdvisor/img/background.jpg) bottom left repeat-x',
'position': 'relative'
}
});
// Inject content in the Advisor Table
this.advisorContent.inject($(this.advisorTableContainer));
// Create the Advisor Div Content Loader
// Here i can load the content of the Advisor
this.advisorContentLoader = new Element('div', {
'id': this.advisorContentLoader_id
});
// Inject content in the Advisor Table
this.advisorContentLoader.inject($(this.advisorContent_id));
// Close Button
this.addCloseButton();
// #########
// Load Data
// #########
if (this.options.contentURL != null) {
this.loadContent({
// The URL
contentURL: this.options.contentURL,
// CallBack
callBack: this.setCustomNavigationAndAppear,
// Scope Class
obj: this
});
} else {
// Insert Data in Container
$(this.advisorContentLoader_id).set('html', this.options.contentText);
// Set Navigation
this.setCustomNavigationAndAppear(this);
}
},
addCloseButton: function() {
// Scope
var obj = this;
// Only if closeButton option is true
if (this.options.closeButton) {
// Create Close Button
this.advisorCloseButton = new Element('a', {
'id': this.advisorCloseButton_id,
'href': '#',
'html': 'Close',
'events': {
'click': function() {
if (typeof(obj.options.closeButtonAction) != 'function') {
obj.closeAdvisor();
} else {
obj.options.closeButtonAction();
}
return false;
}
}
});
// Put Close Button in the Table Content
this.advisorCloseButton.inject($(this.advisorContent_id), 'top');
}
},
// Arguments:
// - contentURL : the URL content
// - callBack : the callback function
// - obj : the scope object
loadContent: function(opts) {
// Scope
var obj = this;
// Request
var request = new Request({
method: 'post',
url: opts.contentURL,
evalScripts: true
});
request.onSuccess = function(responseText) {
// Insert Data in Container
$(opts.obj.advisorContentLoader_id).set('html', responseText);
// CallBack
opts.callBack(opts.obj);
}
request.onFailure = function(xhr) {
alert('Failure Error! Try Again Later.');
}
request.onException = function(headerName, value) {
alert('Exception Error! Try Again Later.');
}
request.send();
},
// Set Custom Navigation if required and Appear Advisor
setCustomNavigationAndAppear: function(obj) {
// Check for Custom Navigation Buttons
if (!obj.options.customNavigation) {
// Buttons Text
if (obj.options.cancelButton != null) { obj.cancelTextButton = obj.options.cancelButton; }
if (obj.options.okButton != null) { obj.okTextButton = obj.options.okButton; }
// Insert Buttons
obj.createButtons();
// Add Buttons Events
obj.createButtonsEvents();
}
// Advisor Appear
obj.didAppear();
},
// Create Buttons
createButtons: function() {
// Create the Buttons Div
var buttonsDiv = new Element('div', {
'class': 'fza_navigation',
'html': this.advisor_ok_button + this.advisor_cancel_button
});
// Inject NAvigation Buttons
buttonsDiv.inject($(this.advisorContent), 'bottom');
$$('#fza_okButton span').set('html', this.okTextButton);
$$('#fza_cancelButton span').set('html', this.cancelTextButton);
},
// Create Button Events
createButtonsEvents: function() {
// Scope
var obj = this;
// Cancel Button
$('fza_cancelButton').addEvent('click', function() {
obj.closeAdvisor();
return false;
});
// Ok Button Events only if Exist an event
if (obj.options.okButtonEvent != null) {
$('fza_okButton').addEvent('click', function() {
obj.options.okButtonEvent();
obj.closeAdvisor();
return false;
});
}
},
// Advisor Did Appear
didAppear: function() {
// Check for positions
if (this.options.elementToAlign != null) {
$(this.advisor_id).setStyles({
'top': 0,
'left': 0,
'position': 'absolute',
'width': 'auto'
});
$('advisorTable').setStyles({
'top': $(this.options.elementToAlign).getCoordinates().top - $(this.advisor_id).getCoordinates().height,
'left': $(this.options.elementToAlign).getCoordinates().left,
'position': 'absolute'
});
switch(this.options.appearPositionY) {
case 'left':
$('advisorTable').setStyle( 'left', this.findPos(this.options.elementToAlign)[0] );
break;
case 'center':
$('advisorTable').setStyle( 'left', this.findPos(this.options.elementToAlign)[0] - ((parseInt($('advisorTable').getStyle('width'))/2) - ($(this.options.elementToAlign).getCoordinates().width/2)) );
break;
case 'right':
$('advisorTable').setStyle( 'left', this.findPos(this.options.elementToAlign)[0] - (parseInt($('advisorTable').getStyle('width')) - $(this.options.elementToAlign).getCoordinates().width) );
break;
}
switch(this.options.appearPositionX) {
case 'top':
$('advisorTable').setStyle( 'top', this.findPos(this.options.elementToAlign)[1] - $('advisorTable').getCoordinates().height );
break;
case 'bottom':
$('advisorTable').setStyle( 'top', this.findPos(this.options.elementToAlign)[1] + $(this.options.elementToAlign).getCoordinates().height );
break;
}
}
// Hide all Selects
$$('body select').setStyle('visibility', 'hidden');
// Set Appear Animation
appearAnimation = new Fx.Morph($(this.advisor_id), {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
appearAnimation.start({
'opacity': 1
});
},
// Close Advisor and Destroy Elements
closeAdvisor: function() {
// Set Appear Animation
disappearAnimation = new Fx.Morph($(this.advisor_id), {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
// Scope
var obj = this;
// Animation Effect
disappearAnimation.start({
'opacity': 0
});
// On Complete
disappearAnimation.onComplete = function() {
// Destroy Element
$(obj.advisor_id).destroy();
// Show all Selects
$$('body select').setStyle('visibility', 'visible');
}
},
// Find Object Position
findPos: function(elm) {
var curleft = curtop = 0;
if (elm.offsetParent) {
do {
curleft += elm.offsetLeft;
curtop += elm.offsetTop;
} while (elm = elm.offsetParent);
}
return [curleft,curtop];
}
};