//
//
// produces a lightbox that can use remote content
//
//
var objWidgetLightboxProperties={
arrcontent: null,
start: null,
index: null,
elsource: null, //the clicked element
elcomponents: null,
eloverlay: null,
elcontainer: null,
objcontainercoordinates: {},
fxcontainer: null,
elcontent: null,
objcontentcoordinates: {},
htmlcontent: null,
eltitle: null,
htmltitle: null,
elprev: null,
elnext: null,
fxcontent: null,
elcontentwidth: null,
elcontentheight: null,
elmeasurement: null,
objmeasurementsize: {},
fxoverlaycontent: null,
arrformelements: [],
positiontop: 40,
htmltemplate: null, //null: will retrieve standard template, {content: '/bla.html', type: 'remote'}: will use a remote call to retrieve the template, {content: '', type: 'html'} will directly use the passed html as a template
outerclick: true,
imgpath: '',
widgetpath: '',
css: '/css/styles.css',
fxduration: 800,
customcss: '',
onloaded: null,
onopen: null,
onclose: null,
hoverclass: null
};
/* opens a lightbox - preperation step 1 */
function widgetLightboxOpen(objArguments){
//alert('widgetLightboxOpen');
$extend(objWidgetLightboxProperties, objArguments);
var obj=objWidgetLightboxProperties;
var elDivLbComponents=$('lb_components');
if(!$defined(elDivLbComponents)){
//first call: generate the components list
//1) inject the components div
elDivLbComponents=new Element('div', {'id':'lb_components'}).inject($(document.body));
obj.elcomponents=elDivLbComponents;
//2) ajax the components into the new layer
var objRequest = new Request.HTML({
update: elDivLbComponents,
onComplete:function(elResponse, elElements, strHtml){
elDivLbComponents.set('html', strHtml);
widgetLightboxPrepare();
}
}).get(obj.widgetpath+'/basic_components.html');
//2) add onresize event
window.addEvent('resize',function(){
widgetLightboxRepositionOverlay();
widgetLightboxRepositionContainer();
});
//3) script the keystrokes
$(window.document).addEvent('keydown',function(e){
if($defined(objWidgetLightboxProperties.eloverlay)){
if(objWidgetLightboxProperties.eloverlay!=null){
if(objWidgetLightboxProperties.eloverlay.getStyle('display')=='inline'){
if(e.key=='esc'){
//escape key
widgetLightboxClose();
}else{
//next
if(e.key == 'right' || e.key == 'space'){
if(objWidgetLightboxProperties.elnext!=null){
if(objWidgetLightboxProperties.elnext.getStyle('display')=='block')objWidgetLightboxProperties.elnext.getFirst().fireEvent('click');
}
}else{
//previous
if(e.key == 'left'){
if(objWidgetLightboxProperties.elprev!=null){
if(objWidgetLightboxProperties.elprev.getStyle('display')=='block')objWidgetLightboxProperties.elprev.getFirst().fireEvent('click');
}
}
}
}
}
}
}
});
}else{
obj.elcomponents=elDivLbComponents;
widgetLightboxPrepare();
}
}
/* preparation step 2 */
function widgetLightboxPrepare(){
//alert('widgetLightboxPrepare');
var obj=objWidgetLightboxProperties;
//template retrieval
if(obj.htmltemplate==null){
var objRequestNested = new Request.HTML({
onComplete:function(elResponse, elElements, strHtml){
obj.htmltemplate=strHtml;
widgetLightboxStart();
}
}).get(obj.widgetpath+'/standard_template.html');
}else{
if($defined(obj.htmltemplate.type)){
if(obj.htmltemplate.type=='html'){
obj.htmltemplate=obj.htmltemplate.content;
widgetLightboxStart();
}
if(obj.htmltemplate.type=='remote'){
alert('remote template retrieval still to be implemented');
}
}else{
if($type(obj.htmltemplate)=='string'){
if(obj.htmltemplate.length>3){
widgetLightboxStart();
}else{
alert('could not determine the template type for the lightbox');
}
}else{
alert('could not determine the template type for the lightbox');
}
}
}
}
/* starts the initial instance of the lightbox */
function widgetLightboxStart(){
//alert('widgetLightboxStart');
var obj=objWidgetLightboxProperties;
//back out if no content available
if(obj.arrcontent==null){
alert('no content supplied');
widgetLightboxClose();
}else{
if(obj.onopen!=null)eval(obj.onopen);
var intWindowHeight=window.getHeight();
var intWindowWidth=window.getWidth();
var intWindowScrollY=window.getScroll().y;
var intWindowScrollSize = $(window).getScrollSize().y;
//grab the default elements and stick them in the global object for later reference
var elDivLbComponents=obj.elcomponents;
var elDivOverlay=elDivLbComponents.getElement('div.lb_overlay');
obj.eloverlay=elDivOverlay;
var elDivContainer=elDivLbComponents.getElement('div.lb_container');
obj.elcontainer=elDivContainer;
var elDivMeasurement=elDivLbComponents.getElement('div.lb_measurement');
obj.elmeasurement=elDivMeasurement;
//set the index to the start position
obj.index=obj.start;
if(obj.index==null)obj.index=0;
//fix transparent png for ie6 and below
if(Browser.Engine.trident4){
var objStyles={
'background-image': 'none',
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+obj.imgpath+'/overlay.png, sizingMethod=\'scale\')'
}
elDivOverlay.setStyles(objStyles);
}
//prepare
//0) make the body element not scrollable
//$(document.body).addClass('lb_notscrollable');
//1) load the template into the container
elDivContainer.set('html', obj.htmltemplate);
//2) retrieve template elements
obj.eltitle=elDivContainer.getElement('div.lb_title')
obj.elprev=elDivContainer.getElement('div.lb_previous')
obj.elnext=elDivContainer.getElement('div.lb_next')
//3) get the content layer
var elDivContent=elDivContainer.getElement('div.lb_content')
obj.elcontent=elDivContent;
//set to a fixed height if needed (and the also set overflow to auto and the hack for ie)
if(obj.elcontentwidth!=null){
elDivContent.setStyles({
'width': obj.elcontentwidth,
'height': obj.elcontentheight,
'overflow': 'auto'
});
if(Browser.Engine.trident)elDivContent.setStyle('margin-bottom', '-16px');
}
//4) load the title
var objCurrentLightboxData=obj.arrcontent[obj.index];
var strContentType=objCurrentLightboxData.title.type;
if(strContentType=='html'){
obj.eltitle.set('html', objCurrentLightboxData.title.content);
}
if(strContentType=='remote'){
var strUrl=objCurrentLightboxData.title.content;
var objRequest = new Request.HTML({
onComplete:function(elResponse, elElements, strHtml){
obj.eltitle.set('html', strHtml);
obj.htmltitle=strHtml;
}
}).get(strUrl);
}
//4) measure the width and height of the container and the content layer with the template loaded
elDivContainer.setStyles({
'left': '-2000px'
});
elDivContainer.setStyles({
'visibility': 'visible'
});
var objCoordinates=elDivContainer.getCoordinates();
obj.objcontainercoordinates=objCoordinates;
var objCoordinatesContent=obj.elcontent.getCoordinates();
obj.objcontentcoordinates=objCoordinatesContent;
//calculate the initial position of the container
var intTop=intWindowScrollY+obj.positiontop;
var intLeft=(intWindowWidth-objCoordinates.width)/2;
//calculate the start position of the container (which is the position of the clicked element)
//alert($type(obj.elsource));
var intTopStart, intLeftStart
if(obj.elsource==null){
intTopStart=obj.positiontop;
intLeftStart=intWindowWidth/2;
}else{
var objCoordinatesClickedElement=obj.elsource.getCoordinates();
intTopStart=objCoordinatesClickedElement.top+(objCoordinatesClickedElement.height/2);
intLeftStart=objCoordinatesClickedElement.left+(objCoordinatesClickedElement.width/2);
}
//hide all elements that will shine through the overlay
var arrFormElements=$$('select','textarea');
obj.arrformelements=arrFormElements;
if(arrFormElements.length != 0){ arrFormElements.setStyle('display','none') };
//show the overlay
elDivOverlay.setStyles({
'height': intWindowScrollSize,
'width': intWindowWidth,
'display': 'inline'
});
if(obj.outerclick){
elDivOverlay.setStyle('cursor', 'pointer');
elDivOverlay.addEvent('click', widgetLightboxClose);
}
//animate the container from the clicked position to the destination position
var fxContainerMorph = new Fx.Morph(elDivContainer, {
duration: obj.fxduration,
transition: Fx.Transitions.Cubic.easeInOut,
onComplete: function(){
widgetLightboxRepositionOverlay();
widgetLightboxLoadContent();
}
});
fxContainerMorph.start({
'left': [intLeftStart, intLeft],
'top': [intTopStart, intTop],
'width': [5, objCoordinates.width],
'height': [5, objCoordinates.height]
});
}
}
/* loads the content */
function widgetLightboxLoadContent(){
//alert('widgetLightboxLoadContent');
var obj=objWidgetLightboxProperties;
var objCoordinates=obj.elcontainer.getCoordinates();
obj.objcontainercoordinates=objCoordinates;
var objCoordinatesContent=obj.elcontent.getCoordinates();
obj.objcontentcoordinates=objCoordinatesContent;
var objRequest;
var strUrl, strContentType
//replace with dummy content to ease animation
obj.elcontent.set('html', '');
//hide previous and next
obj.elprev.setStyle('display', 'none');
obj.elnext.setStyle('display', 'none');
//start loading the content
objCurrentLightboxData=obj.arrcontent[obj.index];
//the title
strContentType=objCurrentLightboxData.title.type;
if(strContentType=='html'){
obj.eltitle.set('html', objCurrentLightboxData.title.content);
}
if(strContentType=='remote'){
strUrl=objCurrentLightboxData.title.content;
objRequest = new Request.HTML({
onComplete:function(elResponse, elElements, strHtml){
obj.eltitle.set('html', strHtml);
obj.htmltitle=strHtml;
}
}).get(strUrl);
}
//the body content
strContentType=objCurrentLightboxData.body.type;
if(strContentType=='html'){
obj.htmlcontent=objCurrentLightboxData.body.content;
widgetLightboxResize();
}
if(strContentType=='remote'){
var strUrl=objCurrentLightboxData.body.content;
var objRequest = new Request.HTML({
onComplete:function(elResponse, elElements, strHtml){
obj.htmlcontent=strHtml;
widgetLightboxResize();
}
}).get(strUrl);
}
}
/* resize the container */
function widgetLightboxResize(){
var obj=objWidgetLightboxProperties;
var strHtml=obj.htmlcontent
//alert(strHtml);
//only resize if there is no fixed width and height set
if(obj.elcontentwidth==null){
//measure the size of the content including the template that has just been loaded in
obj.elmeasurement.set('html', obj.htmltemplate);
var elDivContent=obj.elmeasurement.getElement('div.lb_content');
elDivContent.set('html', strHtml);
obj.objmeasurementsize=obj.elmeasurement.getSize();
var objSizeNewContent=elDivContent.getSize();
//set the fx
if(obj.fxcontainer==null){
obj.fxcontainer = new Fx.Morph(obj.elcontainer, {
duration: obj.fxduration,
transition: Fx.Transitions.Cubic.easeInOut,
onComplete: function(){
obj.elcontent.set('html', obj.htmlcontent);
//continue to next step
widgetLightboxAfterCare();
}
});
};
if(obj.fxcontent==null){
obj.fxcontent = new Fx.Morph(obj.elcontent, {
duration: obj.fxduration,
transition: Fx.Transitions.Cubic.easeInOut,
onComplete: function(){
//obj.elcontent.erase('style');
}
});
};
var intWidthStart=obj.objcontainercoordinates.width;
var intWidthEnd=obj.objmeasurementsize.x;
var intHeightStart=obj.objcontainercoordinates.height;
var intHeightEnd=obj.objmeasurementsize.y;
//alert(intHeightStart+" - "+intHeightEnd)
var intLeftStart=obj.objcontainercoordinates.left;
var intWindowWidth=window.getWidth();
var intLeftEnd=(intWindowWidth-intWidthEnd)/2;
if(intLeftEnd<0)intLeftEnd=0;
obj.fxcontainer.start({
'left': [intLeftStart, intLeftEnd],
'width': [intWidthStart, intWidthEnd],
'height': [intHeightStart, intHeightEnd]
});
var objCurr=obj.arrcontent[obj.index].body;
var intHeightAdditional=0;
if($defined(objCurr))intHeightAdditional=objCurr.height
obj.fxcontent.start({
'width': objSizeNewContent.x,
'height': objSizeNewContent.y+intHeightAdditional
});
}else{
//we are using a fixed width and height
obj.elcontent.set('html', strHtml);
widgetLightboxAfterCare();
}
}
/* previous-next etc. */
function widgetLightboxAfterCare(){
var obj=objWidgetLightboxProperties;
//alert('widgetLightboxAfterCare');
//set previous and next labels and events
var intLength=obj.arrcontent.length;
if(intLength==1){
obj.elprev.setStyle('display', 'none');
obj.elnext.setStyle('display', 'none');
}else{
if(intLength==2){
if(obj.index==0){
obj.elprev.setStyle('display', 'none');
obj.elnext.setStyle('display', 'block');
widgetLightboxSetButton(obj.elnext, 1);
}else{
obj.elprev.setStyle('display', 'block');
obj.elnext.setStyle('display', 'none');
widgetLightboxSetButton(obj.elprev, 0);
}
}else{
obj.elprev.setStyle('display', 'block');
obj.elnext.setStyle('display', 'block');
if(obj.index==0){
//first
widgetLightboxSetButton(obj.elprev, (intLength-1));
widgetLightboxSetButton(obj.elnext, 1);
}else{
if(obj.index==(intLength-1)){
//last
widgetLightboxSetButton(obj.elprev, obj.index-1);
widgetLightboxSetButton(obj.elnext, 0);
}else{
//all other
widgetLightboxSetButton(obj.elprev, obj.index-1);
widgetLightboxSetButton(obj.elnext, obj.index+1);
}
}
}
}
//sometimes the content is bigger when visible (IE7)...
if(obj.elcontentwidth==null){
var intHeightEnd=obj.elcontent.getFirst().getSize().y;
var intHeightStart=obj.elcontent.getSize().y;
if(intHeightEnd>intHeightStart && Math.abs(intHeightEnd-intHeightStart)>10 ){
(function(){
obj.elcontent.setStyle('height', intHeightEnd);
}).delay(600);
intHeightEnd=obj.elcontainer.getSize().y+(intHeightEnd-intHeightStart);
obj.elcontainer.tween('height', intHeightEnd)
}
}
//execute loaded function if defined
if(obj.onloaded!=null)eval(obj.onloaded);
//recalculate the coordinates - just to be sure...
var obj=objWidgetLightboxProperties;
var objCoordinates=obj.elcontainer.getCoordinates();
obj.objcontainercoordinates=objCoordinates;
var objCoordinatesContent=obj.elcontent.getCoordinates();
obj.objcontentcoordinates=objCoordinatesContent;
if(obj.elcontentwidth!=null && Browser.Engine.trident){
var elContentRoot=obj.elcontent.getFirst();
if($defined(elContentRoot)){
var objContentRootSize=elContentRoot.getSize();
elContentRoot.setStyles({
'height': objContentRootSize.y+10,
'width': objContentRootSize.x-10
});
}
}
}
/* closes the lightbox and resets variables */
function widgetLightboxClose(){
var obj=objWidgetLightboxProperties;
//remove any html (template and content) from the container
if(obj.elcontainer!=null)obj.elcontainer.getFirst().destroy();
//hide the container
if(obj.elcontainer!=null)obj.elcontainer.set('style', '');
//hide the overlay
if(obj.eloverlay!=null)obj.eloverlay.set('style', '');
if(obj.outerclick){
if(obj.eloverlay!=null)obj.eloverlay.removeEvents('click');
}
//make the window scollable again
$(document.body).removeClass('lb_notscrollable');
//show form elements again
if(obj.arrformelements.length != 0){ obj.arrformelements.setStyle('display','') };
//reset other important variables
obj.arrcontent=null;
obj.start=null;
obj.index=null;
obj.elsource=null;
obj.elcomponents=null;
obj.eloverlay=null;
obj.elcontainer=null;
obj.objcontainercoordinates={};
obj.fxcontainer=null;
obj.elcontent=null;
obj.objcontentcoordinates={};
obj.fxcontent=null;
obj.elcontentwidth=null;
obj.elcontentheight=null;
obj.elmeasurement=null;
obj.objmeasurementsize={};
obj.fxoverlaycontent=null;
obj.htmlcontent=null;
obj.eltitle=null;
obj.htmltitle=null;
obj.elprev=null;
obj.elnext=null;
if(obj.onclose!=null)eval(obj.onclose);
}
/* UTILITIES */
function widgetLightboxRepositionOverlay(){
if(objWidgetLightboxProperties.eloverlay!=null){
if(objWidgetLightboxProperties.eloverlay.getStyle('display')=='none'){ return; };//resize only if visible
var intWindowScrollSize = $(window).getScrollSize().y;
var intWindowWidth=window.getWidth();
//var intWindowHeight=window.getHeight();
//var intOverlayHeight
objWidgetLightboxProperties.eloverlay.setStyles({ 'height':intWindowScrollSize, 'width': intWindowWidth});
}
}
function widgetLightboxRepositionContainer(){
if(objWidgetLightboxProperties.elcontainer!=null){
if(objWidgetLightboxProperties.eloverlay.getStyle('display')=='none'){ return; };//resize only if visible
var intWindowScrollY=window.getScroll().y;
var intWindowWidth=window.getWidth();
var intTop=intWindowScrollY+objWidgetLightboxProperties.positiontop;
var intLeft=(intWindowWidth-objWidgetLightboxProperties.objcontainercoordinates.width)/2;
if(intLeft<0)intLeft=0;
objWidgetLightboxProperties.elcontainer.setStyles({ 'left':intLeft, 'top': intTop});
}
}
function widgetLightboxSetButton(el, intNewIndex){
var obj=objWidgetLightboxProperties;
var strLabel=obj.arrcontent[intNewIndex].title.label;
el.set('html', ''+strLabel+'');
el.removeEvents();
el.addEvents({
mouseover : function(){
if(obj.hoverclass!=null)el.addClass(obj.hoverclass);
},
mouseout : function(){
if(obj.hoverclass!=null)el.removeClass(obj.hoverclass);
},
click: function(event){
obj.index=intNewIndex;
widgetLightboxLoadContent();
}
});
elSpan=el.getFirst();
elSpan.removeEvents();
elSpan.addEvents({
mouseover : function(){
this.getParent().fireEvent('mouseover');
},
mouseout : function(){
this.getParent().fireEvent('mouseout');
},
click: function(event){
this.getParent().fireEvent('click');
}
});
}