: various content type div depending on file
---------------------------------------------*/
setUpHTML:function(){
// add to body tag
var oBody = $$('body')[0];
if(this.options.overlayOpacity > 0){
this.overlay = new Element('div', { 'id':'nsOverlay', 'style':'background-color:'+this.options.overlayColor+';overflow:hidden;'});//height:0px;opacity:0;
this.overlay.hide().observe('click', (function() { this.closeOverlay(); }).bind(this));
oBody.appendChild(this.overlay);
};
this.holder = new Element('div', {'id':'nsHolder', 'style':'width:'+this.options.initialWidth+'px;height:'+this.options.initialHeight+'px;'}).hide();//
oBody.appendChild(this.holder);
// add to holder div
this.close = new Element('a',{'id':'nsClose'}).hide();
this.close.observe('click', (function(){ this.closeOverlay(); }).bind(this));
this.close.observe('mouseover', (function(){ this.close.setStyle({backgroundPosition : '0 -21px'}); }).bind(this));
this.close.observe('mouseout', (function(){ this.close.setStyle({backgroundPosition : '0 0'}); }).bind(this));
this.holder.appendChild(this.close);
var clsWH = 21;//matches what is set in the css
this.layout = new Element('div', {'id':'nsLayout', 'style':'background-color:'+this.options.contentColor+'; width:'+this.options.initialWidth+'px;height:'+this.options.initialHeight+'px;'});
//, 'style':'width:'+this.options.initialWidth+'px;height:'+this.options.initialHeight+'px;'
if(this.options.addDropShadow){
this.shadow = new Element('div', { 'class':'nsShadow'}).hide();
this.shadow.appendChild(new Element('div',{'id':'nsShadowTL'}));
this.shadow.appendChild(new Element('div',{'id':'nsShadowTop'}));
this.shadow.appendChild(new Element('div',{'id':'nsShadowTR'}));
this.shadow.appendChild(new Element('div',{'id':'nsShadowLeft'}));
this.shadow.appendChild(this.layout);
this.shadow.appendChild(new Element('div',{'id':'nsShadowRight'}));
this.shadow.appendChild(new Element('div',{'id':'nsShadowBL'}));
this.shadow.appendChild(new Element('div',{'id':'nsShadowBottom'}));
this.shadow.appendChild(new Element('div',{'id':'nsShadowBR'}));
this.holder.appendChild(this.shadow);
}else{
this.holder.appendChild(this.layout);
};
//
// set positon of the holder
if(this.options.position != null){
var x = this.options.position.x;
var y = this.options.position.y;
this.holder.setStyle({left: x+'px', top:y+'px'});
if(null != this.shadow) this.shadow .setStyle({left: 0 +'px' , top: 0+'px'});//
}else{
// marginLeft: centers horizontally , marginTop centers vertically
var mT = -(this.options.initialHeight/2);
var mL = -(this.options.initialWidth/2);
this.holder.setStyle({marginLeft:mL+'px', marginTop:mT+'px'});
if(null != this.shadow) this.shadow .setStyle({marginLeft:mL+'px', marginTop:mT+'px'});// this keeps layout int the center
}
// build inside layout
this.loader = new Element('div', {'id':'nsLoader'});
this.contentCnt = new Element('div', {'id':'nsContent','style':'visibility:hidden;'});
this.layout.appendChild(this.contentCnt);
this.layout.appendChild(this.loader);// loader div to hold flash animation
//alert('NSOverlay: setUpHTML');
},
// !Events AND Callbacks
onKeyClick: function(event) {
var keycode = event.keyCode;
//alert('keycode('+keycode+') pressed');
var escapeKey;
if (event.DOM_VK_ESCAPE) { // mozilla
escapeKey = event.DOM_VK_ESCAPE;
}else{ // ie
escapeKey = 27;
};
var key = String.fromCharCode(keycode).toLowerCase();
if(key.match(/x|o|c/) || (keycode == escapeKey)) this.closeBox();
},
onWindowSize: function(){
//alert('window resized');
var pg = document.viewport.getDimensions();
var scrl = document.viewport.getScrollOffsets();
if(null != this.overlay && this.options.overlayOpacity > 0) this.overlay.setStyle({height: pg.height + 'px', top: scrl.top+'px'});
},
onContentEntry : function(){
new Effect.Appear(this.close, { duration: 0.2, from: 0.0, to: 1});
if(this.displayType == 'video' && this.options.movieControlType != 'swf') this.showMovie();
},
// !OPEN/CLOSE
/*
@ if there is an overlay - reveal it
@ reveal the holderarea
@ reveal the shadow for holder if there is one
*/
//---------------
openOverlay:function(){
//alert('NSOverlay: openBox -->'+this.overlay);
this.closed = false;
this.onKeyClick = this.onKeyClick.bindAsEventListener(this);
document.observe('keydown', this.onKeyClick);
Event.observe(window, 'resize', this.onWindowSize.bind(this));
Event.observe(window, 'scroll', this.onWindowSize.bind(this));
var pg = document.viewport.getDimensions();
// do we want the overlay entry to chain- currently happen at same time as parts?
if(null != this.overlay && this.options.overlayOpacity > 0){
this.onWindowSize();
new Effect.Appear(this.overlay, { duration: this.options.overlayDuration, from: 0.0, to: this.options.overlayOpacity});
};
new Effect.Appear(this.holder,{duration: this.options.overlayDuration, from: 0.0, to: 1, afterFinish:(this.content)? this.prepToLoad.bind(this) : ''});
if(null != this.shadow ) new Effect.Appear(this.shadow, { duration: this.options.overlayDuration, from: 0.0, to: 1, delay:0.2});
},
closeOverlay:function(){
document.stopObserving('keydown', this.onKeyClick);
Event.stopObserving(window, 'resize', this.onWindowSize.bind(this));
this.hideLoader();
if(this.fileType == 'swf' || this.options.movieControlType == 'swf') swfobject.removeSWF("nsflash");// if a swf need to remove
if(null != this.vidObj){
this.vidObj.element.parentNode.removeChild(this.vidObj.element); this.vidObj = null; //this.vidObj.stop();
};
if(null != this.contentCnt) this.contentCnt.remove();// do we want to tween out
if(null != this.holder) this.holder.remove();// do we want to tween out?
if(null != this.shadow) this.shadow.remove();// do we want to tween out?
if(null != this.overlay && this.options.overlayOpacity > 0){
new Effect.Fade(this.overlay, { duration: 0.2, to: 0, afterFinish:this.removeAfterClose.bind(this) });
}else{
this.removeAfterClose();
};
},
removeAfterClose:function(){
if(null != this.overlay) this.overlay.remove();
this.cleanUp();
},
cleanUp : function(){
//alert('cleanUp');
this.options = {};
this.content = null;
this.currentRequest = null;
this.currentResponse = null;
this.isMoviePlaying = false;
this.movie = null;
this.type = null;
this.displayType = null;
this.closed = true;
this.fileReady = false;
this.contentCnt = null;
this.overlay = null;
this.holder = null;
this.shadow = null;
//if(gNSOverlay) gNSOverlay = null;
},
//----------------
// !Ready To Show
// #1
loadComplete:function(){
//alert('loadComplete');
this.fileReady = true; //the file is loaded and ready to be showed (see next_prev_aux())
if(this.closed){ return; };//if you close and an onload event is still running
var fileSize = new Hash();// store the size of the loaded media
var targetSize = {};// calculate size plus any passed padding, border, etc
var targetPos = {};// object passed to morph position of holder
var b;
var p = this.options.contentPadding;// store calaculate padding to add
var d;// store file dimesions
var holderDim = this.holder.getDimensions();
var addSize = (this.options.contentPadding*2);// + (this.options.contentBorderWidth*2) amount to add to file size
//var posY = this.contentCnt.cumulativeOffset().top;// the top position of the conetent div
// movies have sizes built into the div- justneed to add top padd to help center
// note that since movies are keeping aspect ratio the top /bottom pad may be larger
if(this.displayType == 'video' && this.options.movieControlType != 'swf'){
var tp = p + (this.options.moviePad/2);
//var bp = tp;//(Prototype.Browser.IE)? 0 : IE and not custom control then don't ad botom pad
this.contentCnt.setStyle({padding:tp+'px'});//{paddingTop:tp+'px',paddingBottom:bp+'px'} need to add in totals for any content padding to layout
}else if(p != 0){
this.contentCnt.setStyle({padding:p+'px'});
};
if(this.displayType == 'asset' && !this.options.fixedSize){//is an image file !file.retrieve('width')
var d = this.currentFile.getDimensions();//
fileSize.update({ 'height':d.height, 'width':d.width});
} else if(this.displayType == 'video' && this.options.movieControlType != 'swf'){// movie
fileSize.update({ 'height':this.movieH, 'width':this.movieW });
}else if(this.displayType == 'webpage'){// external url
fileSize.update({ 'height':this.iframeH, 'width':this.iframeW});// additional for scrollers
} else {//non-image or fixed size image, need to use options value
fileSize.update({ 'height':this.options.contentHeight, 'width':this.options.contentWidth });
};
fileSize = fileSize.toObject();// convert hash to object
// check to see if holder is not the same size as file loaded
// the movies and iframes already have there w x h prefigured
targetSize.width = ((this.displayType == 'video' && this.options.movieControlType != 'swf') || this.displayType == 'webpage')? this.options.contentWidth : (fileSize.width + addSize);//
targetSize.height = ((this.displayType == 'video' && this.options.movieControlType != 'swf') || this.displayType == 'webpage')? this.options.contentHeight : (fileSize.height + addSize);
//if(this.displayType == 'webpage') targetSize.height += this.options.contentBorderWidth;
if((fileSize.width != holderDim.width || this.options.fixedSize) && !this.options.position){
targetPos.marginLeft = -(targetSize.width/2)+'px';
};
if((fileSize.height != holderDim.height || this.options.fixedSize) && !this.options.position){
targetPos.marginTop = -(targetSize.height/2)+'px';
};
targetSize.width = targetSize.width +'px';
targetSize.height = targetSize.height +'px';
if(this.options.contentBorderWidth != 0 ){
b = this.options.contentBorderWidth + 'px solid ' + this.options.contentBorderColor;
this.layout.setStyle({border:b});//contentCnt
};
// change the size of layout area and (and shaodw by default shadow) move holder to keep things centered
if(this.options.resizeMorph){
new Effect.Morph(this.holder, {style:targetPos , duration:this.options.morphDuration,transition:this.options.resizeTransition});
new Effect.Morph(this.layout, {style:targetSize , duration:this.options.morphDuration,transition:this.options.resizeTransition, afterFinish:this.showContent.bind(this)});
}else{
this.layout.setStyle(targetSize);
this.showContent();
}
},
// #3 - either after morph - or directly
showContent:function(){
if(this.displayType != 'webpage' && this.displayType != 'html' && this.displayType != 'video' && this.fileType != 'swf' && this.options.fixedSize){
// make image fit inside passed content width and height
var dim = this.currentFile.getDimensions();
var newW = this.options.contentWidth;
var newH = this.options.contentHeight;
var margTop;
if(dim.width > dim.height){
var ratio = dim.width/dim.height;
var tmpH = newW/ratio;
newH = Math.round(tmpH);
if(newH > this.options.contentHeight){
var per = this.options.contentHeight/newH;
newH *= per;
newW *= per;
};
margTop = (this.options.contentHeight - newH)/2;
this.currentFile.setStyle({marginTop: margTop+'px'});// center image vertically
}else{
var ratio = dim.height/dim.width;
var tmpW = newH/ratio;
newW = Math.round(tmpW);//'auto' Math.round(imgW - (imgW*perc));
if(newW > this.options.contentWidth){
var per = this.options.contentWidth/newW;
newH *= per;
newW *= per;
margTop = (this.options.contentHeight - newH)/2;
this.currentFile.setStyle({marginTop: margTop +'px'});// center image vertically
};
};
// check if new sizes are greater than max
this.contentCnt.setStyle({width:this.options.contentWidth+'px', height:this.options.contentHeight+'px' });
this.currentFile.setStyle({width:newW+'px', height:newH+'px' });
//alert('showContent Fixed size: w:'+newW+', h:'+newH + ', resized ['+ratio+']from ('+dim.width+'x'+dim.height+')');
};
this.contentCnt.setStyle({visibility:'visible', opacity:0.0});
new Effect.Opacity(this.contentCnt,{ duration: this.options.entryDuration, from: 0.0, to: 1, afterFinish:this.onContentEntry.bind(this)});
if(this.displayType != 'video' || this.options.movieControlType == 'swf') this.hideLoader();
},
// !load related methods
showLoader : function(){
this.loader.appendChild(new Element('div', {'id':'animation' }));//new Element
var att = {data:'content/custom-screens/splash/swfs/loading.swf', width:"100%", height:"100%"};// will occupy what ever space set by content
var params = {wmode : "transparent", menu : false};//, align: "middle"
if(null != swfobject && swfobject.hasFlashPlayerVersion(this.options.flashVersion)){
swfobject.createSWF(att, params, 'animation');
};
},
hideLoader : function(){
if(this.loader){
// could tween out then remove swf?
swfobject.removeSWF("animation");
this.loader.setStyle({'visiblity':'hidden'});
this.layout.removeChild(this.loader);
this.loader = null;
}
},
prepToLoad:function(fileObj){
this.fileReady = false;
this.showLoader();
//alert('prepToLoad -'+this.displayType);
switch(this.displayType){
case 'webpage' :
this.loadPage(this.content);
break;
case 'html' :
this.loadHTML(this.content);
break;
case 'video' :
if(this.options.movieControlType == 'swf'){
this.loadSwf(this.content, true);
}else{
this.loadMovie(this.content);
};
break;
default :
if(this.fileType == 'swf'){
this.loadSwf(this.content);// need to test for swfobject else fail gracefully?
}else{
this.loadImage(this.content);
}
break;
};
},
// just a check to see if link is a video service
// can add more as needed
isVideoServiceLink:function(f){
return (f.indexOf("vimeo.com") != -1 || f.indexOf("youtube.com") != -1);
},
// function to determine if the link is a vimeo or you tube and to formalute accordingly
buildVideoServiceLink:function(f){
var sLink = f;
var videoID;
if(f.indexOf("vimeo.com") != -1){
// may look like: http://vimeo.com/VIDEOiD
// or http://vimeo.com/moogaloop.swf?clip_id=6408771&server=vimeo.com&show_title=1&show_byline=1
// think we can split into array and target last index
var a = f.split('/');
var tmp;
if(f.indexOf("moogaloop.swf") != -1 ){
tmp = a.pop().split("?").pop().split("&");//get rid of file name
videoID = tmp.shift();//***NOTE - DANGEROUS assumes clip id is always first....
videoID = videoID.split("=").pop();
}else{
tmp = a.pop().split("&");
// strip extras query param
videoID = tmp.shift();
};
sLink = 'http://player.vimeo.com/video/'+ videoID;
// add back params as well as ?autoplay=1
sLink += '?autoplay=1';
if(tmp.length>0) sLink += '&'+tmp.join('&');
}else if(f.indexOf("youtube.com") != -1){
// may look like http://www.youtube.com/watch?v=ua5CynrKDUo
// or http://www.youtube.com/v/Bbc2unGySM4?fs=1&hl=en_US
var a = f.split('/');
var tmp;
if(f.indexOf("/watch?") != -1){
tmp = a.pop().split("?v=").pop().split("&");
}else{
tmp = a.pop().split("?");
}
// strip extras query param
videoID = tmp.shift();
//result in {VIDEOID}
sLink = 'http://www.youtube.com/embed/'+videoID;
if(tmp.length>0) sLink += '?'+tmp.join('&');
};
return sLink;
},
//------------------------------------
// !unique loading actions
loadImage:function(f){
var c = new Element('img',{id:'nsImage'});
this.contentCnt.appendChild(c);
this.currentFile = c;
var img = new Image();
img.onload = (function(){
this.currentFile.src = f;
this.loadComplete();
}).bind(this);
img.src = f;
},
loadSwf : function(f, isVid){
var sNameId = 'nsflash';
var c = new Element('div', {'id':sNameId}).update('
It appears you do not have the latest version of the Flash plug-in installed. Get latest version.
');
this.contentCnt.appendChild(c);
if(f.indexOf('vimeo.com') != -1 && f.indexOf('autoplay') == -1) f += '&autoplay=1';
var att = {data:f, width:this.options.contentWidth, height:this.options.contentHeight};// +'px'+'px'will occupy what ever space set by content
var params = {wmode : "transparent", menu : false, allowFullScreen: true, allowScriptAccess: 'always', base: this.options.siteURL};//
//
if(isVid){
att.data = this.options.baseURL+'swfs/singleMedia.swf';
if(f.indexOf('http://') == -1) f = this.options.siteURL+f;
params.flashvars = 'file='+f+'&groundcolor='+this.options.contentColor+'&color='+this.options.siteColor+'&w='+this.options.contentWidth+'&h='+this.options.contentHeight;
//+this.movieWthis.movieH
}
if(f.indexOf('pictage.com') != -1){
params.base = 'http://www.pictage.com/photographers/static/static/slideshows/swf/.';// sets base for pictage
}
if(null != swfobject && swfobject.hasFlashPlayerVersion(this.options.flashVersion)){
swfobject.createSWF(att, params, sNameId);
};
this.currentFile = c;
//alert('Load Flash');
this.loadComplete();
},
loadHTML : function(s){
var c = new Element('div', {'id':'nsHtml'}).update(s);
this.contentCnt.appendChild(c);
this.currentFile = c;
this.loadComplete();
},
loadPage : function(f){
// check for vimeo or youtube and build correct link
f = this.buildVideoServiceLink(f);
var c = new Element('iframe', { 'src': f, 'style': 'width:' + this.iframeW + 'px; height:' + this.iframeH + 'px;border: 0px solid #ffffff;', 'scrolling':this.options.iframeScrollers });
this.contentCnt.appendChild(c);
this.currentFile = c;
this.loadComplete();
},
// !Movie Related
loadMovie : function(f){
// we have the option of different controllers
// if movieControlType == 'swf' then we will do a
var c = new Element('div',{'id':'nsMovie'});
// panel and controller placed inside
var panel = new Element('div',{'id':'moviepanel','style':'width:'+this.movieW+'px;height:'+this.movieH+'px;display:block;'});
c.appendChild(panel);
if(this.options.showCustomController){
this.vidController = new QTP.MovieController('nsMovieController');
this.vidController.setMovie(panel);
c.appendChild(this.vidController.element);
};
this.contentCnt.appendChild(c);
this.currentFile = c;
this.loadComplete();// could set a listenre fr when enough is loaded to play...
},
// function called after tween to set up the QT object and listeners and such
showMovie : function(){
this.vidObj = new QTP.Movie({src:this.content, width:this.movieW, height:this.movieH, enablejavascript:true, postdomevents:true, scale :'aspect', controller:!this.options.showCustomController, bgcolor: this.options.contentColor, autoplay: this.options.movieAutoPlay, showlogo: this.options.showQTLogo});//
Event.observe(this.vidObj.element, 'qt_canplay', this.onMovieCanPlay.bind(this));
Event.observe(this.vidObj.element, 'qt_error', this.onMovieError.bind(this));
Event.observe(this.vidObj.element, 'qt_stalled', this.onMovieStall.bind(this));
Event.observe(this.vidObj.element, 'qt_loadedmetadata', this.onMovieMetaLoad.bind(this));
Event.observe(this.vidObj.element, 'qt_waiting', this.onMovieWait.bind(this));
// may need to set a timer to do a reload
$('moviepanel').appendChild(this.vidObj.element);// this prevents a size "flick" in ff
if(this.options.showCustomController) this.vidController.setMovie(this.vidObj);
},
onMovieCanPlay : function(e){
this.vidObj.element.stopObserving('qt_canplay', this.onMovieCanPlay.bind(this));
//alert('onMovieCanPlay, GetDuration='+this.vidObj.element.GetDuration() + ', GetMaxBytesLoaded='+this.vidObj.element.GetMaxBytesLoaded());
this.hideLoader();
},
onMovieError : function(e){
//alert('onMovieError(GetPluginStatus='+e.target.GetPluginStatus()+')');
//if(){
this.vidObj.element.parentNode.removeChild(this.vidObj.element);// remove and try again?this.vidObj
this.showMovie();// try having it relaod?
//}
},
onMovieMetaLoad : function(e){
//alert('onMovieMEta loaded(Duration:'+this.vidObj.element.GetDuration()+')');
},
onMovieStall : function(e){
//alert('onMovieStall(GetPluginStatus='+e.target.GetPluginStatus()+')');
// not sure yet what to do
},
onMovieWait : function(e){
//alert('onMovieWait(GetPluginStatus='+e.target.GetPluginStatus()+')');
// not sure yet what to do
}
});