// ##### 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: {
overlay: 'overlay', //id of semi-transparent background layer
container: 'layerWin', //id of container for window
pageContainer: 'pageContainer', //id of container for entire page
openLinks: 'a.openWindow', // links that will open the window
closeLinks: 'a.closeWindow', // links that will open the window
winTitle: 'winTitle', // id containing title
updateArea: 'updateArea' // id of container that will hold new content
},
initialize: function(options){
this.setOptions(options),
this.container = $(this.options.container) || null,
this.overlay = $(this.options.overlay) || null,
this.pageContainer = $(this.options.pageContainer) || null,
this.winTitle = $(this.options.winTitle) || null,
this.updateArea = $(this.options.updateArea) || null,
this.layerHTML = (this.container) ? this.container.innerHTML : null,
this.effects = [], // no effects are included in this class yet. Plane to add later
this.openLinks = $$(this.options.openLinks),
this.closeLinks = $$(this.options.closeLinks),
this.Safari = (window.webkit) ? true : 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){
//this.makeWindow();
if (!e) var e = window.event;
new Event(e).stop(); // accomplishes same as "return false"
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; // get url from href
if (this.safari){
origEl= el; // for safari - write element to global variable
if (origUrl == '') {origUrl = url}; // for safari write href to global variable
}
var title = el.title; // get window title from link title
var rel = el.rel; // if rel contains 'iframe' content is pulled in via an iframe. If not, pulled in via ajax. Rel can also pass size data for iframe.
var iframe = false;
if ($defined(rel) && rel.indexOf("iframe") >-1) iframe = true; // eval rel for 'iframe'
this.buildWindow(iframe,url, title);
this.setFrameSize(rel);
if(this.Safari) el.href='javascript:void(0)';// for safari change the href to void
return false;
},
// if iframe=true, adds iframe to window and set src to url
buildWindow: function(iframe, url, title){
if (iframe){
this.container.innerHTML=this.iframeHtml;
if (this.safari && url.indexOf('javascript')>-1) url = origUrl; // for safari pull url from global variable
$('winFrame').src=url;
this.showWindow();
// if iframe=false, passes url to ajax
} else {
this.getAjax(url);
}
// if a title attribute exists it is written as the title of the window
if (title.length > 0 && $('winTitle')){ // set title
$('winTitle').innerHTML = title;
}
return false;
},
// if height and width for the iframe were passed in the rel, the iframe is set to them
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"; // 2nd position in array is passed height
winframe.style.width=w +"px"; // 3rd position in array is passed widthreturn;
return false;
},
// iframe size is parsed from rel
getFrameSize: function(x){
if(x.substring(0,4) == "size"){
el = x.split(" ");
return el;
} return;
},
// class 'block' is added to window to make it visible and onclick is added to the container and overlay to trigger hiding the window
showWindow: function(){
this.container.addClass('block');
this.overlay.addClass('block');
(function(){ this.setWinHeight(); return false;}).bind(this).delay(300);
this.closeLinks.each(function(l){
l.addEvent('click', this.closeWindow);
}, this);
this.container.addEvent('click', this.closeWindow.bind(this));
this.overlay.addEvent('click', this.closeWindow.bind(this));
return false;
},
//window overlay is set to the height and width of the browser
setWinHeight: function (){
this.overlay.style.height=Math.max(this.pageContainer.offsetHeight, window.getHeight()+ window.getScrollTop()) + "px";
this.overlay.style.width=window.getScrollWidth() + "px";
return false;
},
// window is turned off by removing the class 'block'
closeWindow: function(e){
if (!e) var e = window.event; new Event(e).stop();
this.closeLinks = [];
this.container.removeClass('block');
this.overlay.removeClass('block');
this.container.innerHTML=this.layerHTML;
if (this.safari){
if (origEl.href.indexOf('javascript')>-1) origEl.setAttribute("href",origUrl)//reset href from global variable
origUrl = '';//safari only clear global variable
}
return false;
},
// ajax call is made
getAjax: function(url){
var req = new Ajax(url, {
update: this.updateArea,
method: 'get',
evalScripts: true,
onSuccess: initSelectors
//onComplete: ,
//onFailure:
});
req.request();
this.showWindow();
return false;
},
// holds iframe markup
iframeHtml: '',
windowHtml: '\
',
makeWindow: function(){
var div = document.createElement('div');
this.overlay.injectAfter(div);
div.innerHTML=this.windowHtml;
}
});
//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.Morph(el, {duration: 1500}).start({
'opacity': [0, .9],
'height': [1, 310],
'width': [1, 270]
});
}
function closeWindow(el){
var effect = new Fx.Morph(el, {duration: 1500}).start({
'opacity': [.9, 0],
'height': [310, 1],
'width': [270, 1]
});
}
window.addEvent('domready', function(){
if($('mss-bookmark'))
{$('mss-bookmark').addEvent('click', function(){
openWindow('mss-social');
}); }
});
function writeWindow(){
var windowContent = 'close 
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
