/* Script: modalizer.js
Provides functionality to overlay the window contents with a semi-transparent layer that prevents interaction with page content until it is removed.
Author:
Aaron Newton (aaron [dot] newton [at] cnet [dot] com)
*/
var Modalizer = new Class({
defaultModalStyle: {
display:'block',
position:'fixed',
top:'0px',
left:'0px',
'z-index':1000,
'background-color':'#333',
opacity:0.8
},
setModalOptions: function(options){
this.modalOptions = $merge({
width:(window.getScrollWidth()+300)+'px',
height:(window.getScrollHeight()+300)+'px',
elementsToHide: 'select',
onModalHide: Class.empty,
onModalShow: Class.empty,
hideOnClick: true,
modalStyle: {},
updateOnResize: true
}, this.modalOptions, options || {});
},
resize: function(){
if($('modalOverlay')) {
$('modalOverlay').setStyles({
width:(window.getScrollWidth()+300)+'px',
height:(window.getScrollHeight()+300)+'px'
});
}
},
setModalStyle: function (styleObject){
this.modalOptions.modalStyle = styleObject;
this.modalStyle = $merge(this.defaultModalStyle, {
width:this.modalOptions.width,
height:this.modalOptions.height
}, styleObject);
if($('modalOverlay'))$('modalOverlay').setStyles(this.modalStyle);
return(this.modalStyle);
},
modalShow: function(options){
this.setModalOptions(options||{});
var overlay = null;
if($('modalOverlay')) overlay = $('modalOverlay');
if(!overlay) overlay = new Element('div').setProperty('id','modalOverlay').injectInside(document.body);
overlay.setStyles(this.setModalStyle(this.modalOptions.modalStyle));
if(window.ie6) overlay.setStyle('position','absolute');
$('modalOverlay').removeEvents('click').addEvent('click', function(){
this.modalHide(this.modalOptions.hideOnClick);
}.bind(this));
this.bound = this.bound||{};
if(!this.bound.resize && this.modalOptions.updateOnResize) {
this.bound.resize = this.resize.bind(this);
window.addEvent('resize', this.bound.resize);
}
this.modalOptions.onModalShow();
this.togglePopThroughElements(0);
overlay.setStyle('display','block');
return this;
},
modalHide: function(override){
if(override === false) return false;
this.togglePopThroughElements(1);
this.modalOptions.onModalHide();
if($('modalOverlay'))$('modalOverlay').setStyle('display','none');
if(this.modalOptions.updateOnResize) {
this.bound = this.bound||{};
if(!this.bound.resize) this.bound.resize = this.resize.bind(this);
window.removeEvent('resize', this.bound.resize);
}
return this;
},
togglePopThroughElements: function(opacity){
if((window.ie6 || (window.gecko && navigator.userAgent.test('mac', 'i')))) {
$$(this.modalOptions.elementsToHide).each(function(sel){
sel.setStyle('opacity', opacity);
});
}
}
});
// ##### LayerWindow Class #####
var origUrl = '';
var origEl = null;
var curUrl=window.location.href.split('?')[0].split('#')[0];
var curTitle = document.title;
var layerWindow = new Class({
options: {
openLinks: 'a.openWindow', // links that will open the window
closeLinks: 'a.closeWindow', // links that will open the window
winTitle: 'winTitle'
},
initialize: function(options){
this.setOptions(options),
this.waitText = 'Please wait. Loading...',
this.winTitle = $(this.options.winTitle) || null,
this.openLinks = $$(this.options.openLinks),
this.closeLinks = $$(this.options.closeLinks),
this.Safari = (window.webkit) ? true : false,
this.container = false,
this.setUpLinks(this.openLinks)
},
// adds onclick to openLinks to launch window
setUpLinks: function(links){
links.each(function(l){
l.addEvent('click', this.getAttibutes.bind(this));
}, this);
},
// gets attributes from link that launched window and uses them
getAttibutes: function(e){
if (!e) var e = window.event;
new Event(e).stop();
var el = (e.target) ? e.target : ((e.srcElement) ? e.srcElement : null);
el = ($type(el).toLowerCase() == 'textnode' || el.tagName.toLowerCase() == 'img') ? el.parentNode: el;
var url = el.href;
if (this.safari){origEl= el; if (origUrl == '') {origUrl = url};}
var title = el.title;
var rel = el.rel;
var iframe = ($defined(rel) && rel.indexOf("iframe") >-1) ? true : false;
if (!iframe)return;
this.buildWindow(url, title, rel);
if(this.Safari) el.href='javascript:void(0)';
return;
},
// if iframe=true, adds iframe to window and set src to url
buildWindow: function(url, title, rel){
if (this.container) {this.container.remove(); }
this.container = new Element('div', {'id': 'layerWin'}).injectInside(document.body);
this.container.innerHTML=this.iframeHtml;
if (this.safari && url.indexOf('javascript')>-1) url = origUrl;
$('winFrame').src=url;
this.showWindow();
if (title.length > 0 && $('winTitle'))$('winTitle').innerHTML = title;
this.setFrameSize(rel);
},
setFrameSize: function(rel){
var winframe = $('winFrame');
if (!winframe || this.getFrameSize(rel).length < 1) return;
var h = (this.getFrameSize(rel)[1] * 1) + 15;
var w = (this.getFrameSize(rel)[2] * 1);
winframe.style.height=h +"px";
winframe.style.width=w +"px";
},
getFrameSize: function(x){
if(x.substring(0,4) == "size"){
el = x.split(" ");
return el;
} return;
},
showWindow: function(){
this.makeWaiting();
this.container.addClass('mss-block');
this.modal = new Modalizer().modalShow()
this.closeLinks.each(function(l){
l.addEvent('click', this.closeWindow);
}, this);
this.container.addEvent('click', this.closeWindow.bind(this));
},
closeWindow: function(e){
if (!e) var e = window.event; new Event(e).stop();
this.closeLinks = [];
if ($('winFrame')){
$('winFrame').style.backgroundColor='transparent';
}
this.container.removeClass('mss-block');
this.modal.modalHide();
if (this.safari){
if (origEl.href.indexOf('javascript')>-1) origEl.setAttribute("href",origUrl)
origUrl = '';
}
},
// holds iframe markup
iframeHtml: '',
makeWaiting: function(){
var el = ($('loading')) ? $('loading') : new Element('div', {'id': 'loading', 'alt':this.waitText, 'title':this.waitText}).injectInside($('winCell'));
el.innerHTML=this.waitText;
setTimeout('changeWinBg()',3000)
}
});
//adds Options and Events features to the class
layerWindow.implement(new Options, new Events);
function openWindow(el){
$(el).innerHTML=writeWindow();
new layerWindow({});
var effect = new Fx.Styles(el, {duration: 1500}).start({
'opacity': [0, .9],
'height': [1, 290],
'width': [1, 270]
});
}
function changeWinBg(){
if ($('winFrame')) $('winFrame').style.backgroundColor='#ffffff';
}
function closeWindow(el){
var effect = new Fx.Styles(el, {duration: 1500}).start({
'opacity': [.9, 0],
'height': [290, 1],
'width': [270, 1]
});
}
window.addEvent('domready', function(){
$('mss-bookmark').addEvent('click', function(){
openWindow('mss-social');
});
});
function writeWindow(){
var windowContent = 'close 
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\