var multiGalleryLightbox = { init: function(options){ this.overlay = new Element('div').setProperty('id','lbOverlay').injectInside(document.body).addEvent('click',this.close.bind(this)); this.gallery = new Element('div').setProperty('id','gallery').injectInside(document.body); this.fx = { overlay: this.overlay.effect('opacity', {duration: 250}).hide()
}
}, open: function(id){ this.setup(true); this.position(); this.fx.overlay.start(0.6); this.gallery.adopt( new Element('div').addClass('leftSide') ); this.gallery.adopt( new Element('div').addClass('rightSide') ); this.gallery.adopt( new Element('div').addClass('topSide') ); this.gallery.adopt( new Element('div').addClass('bottomSide') ); this.content = new Element('div').addClass('content'); this.closeBtn = new Element('div').addClass('closeBtn').adopt( new Element('img').setProperty('src','/images/btn_gallery_Close.gif').addEvent('click',this.close.bind(this)) ); this.menuList = new Element('div').addClass('menuList'); this.menuList.adopt( new Element('ul').adopt( new Element('li').addClass('title').adopt( new Element('img').setProperty('src','/images/title_Galleries.gif')
)
) ); this.content.adopt(this.closeBtn); this.content.adopt(this.menuList); this.content.adopt( new Element('div').addClass('previewImage')
.adopt(new Element('div').addClass('preview'))
.adopt(new Element('div').addClass('captionBkgd').setOpacity(0))
.adopt(new Element('div').addClass('captionText')) ); this.content.adopt( new Element('div').addClass('thumbnails') ); this.content.adopt( new Element('div').setProperty('id','thumbPagination') ); this.gallery.adopt( this.content ); if(window.ie6) $$('#gallery .menuList')[0].setStyle('display','none'); var wh = (window.getHeight() == 0) ? window.getScrollHeight() : window.getHeight(); var st = document.body.scrollTop || document.documentElement.scrollTop; this.top = st + (wh / 10); this.left = Math.floor((window.getScrollLeft()/2)+(window.getWidth()/2)); this.gallery.setStyles({top:this.top+'px',left:this.left+'px',display:''}); var rows = $$('#gallery, #gallery .topSide, #gallery .bottomSide'); rows.each(function(element){ var resize = new Fx.Style(element, 'width', {duration: 500, transition:Fx.Transitions.sineOut}).set(10); resize.custom(10, 892);}); var slide = new Fx.Style($('gallery'), 'left', {duration: 500, transition:Fx.Transitions.sineOut,onComplete:function(){ MultiPhotoGallery(id)} }).set($('gallery').getLeft()); slide.custom($('gallery').getLeft(), $('gallery').getLeft()-446); hideSelectBoxes();}, position: function(){ var ww = (window.getWidth() == 0) ? window.getScrollWidth() : window.getWidth(); var wh = (window.getHeight() == 0) ? window.getScrollHeight() : window.getHeight(); var st = document.body.scrollTop || document.documentElement.scrollTop; this.top = st + (wh / 15); this.overlay.setStyles({top: st+'px', height: wh+'px', width:ww+'px'}); this.left = Math.floor((window.getScrollLeft()/2)+(window.getWidth()/2) - 475); this.gallery.setStyles({top:this.top+'px',left:this.left+'px'});}, setup: function(open){ var fn = open ? 'addEvent' : 'removeEvent'; window[fn]('scroll', this.position.bind(this))[fn]('resize', this.position.bind(this))[fn]('move', this.position.bind(this)); this.step = 0;}, close: function(){ if (this.step < 0) return; this.step = -1; this.gallery.getChildren().remove(); this.fx.overlay.stop(); this.gallery.style.display = 'none'; this.fx.overlay.chain(this.setup.pass(false, this)).start(0); showSelectBoxes(); return false;}
}
window.addEvent('domready', multiGalleryLightbox.init.bind(multiGalleryLightbox)); var maxW = 442; var maxH = 338; var gallery = new Object(); var preview; var paging = false; function MultiPhotoGallery(id){ if(window.ie6) $$('#gallery .menuList')[0].setStyle('display',''); $$('#gallery .previewImage')[0].setStyle('background','#000 url(images/bkgd_LoadingMsg.gif) no-repeat center center'); new Ajax("/ajax.aspx?action=gallery&propertyid=" + id, { method: 'get', evalScripts: true, onComplete: function(text, xml) { formatMultiPhotoGallery(xml)
}
}).request();}
function formatMultiPhotoGallery(xml){ var menu = xml.getElementsByTagName("Gallery"); var menuList = $$(".menuList ul")[0]; for(var x=0,xl=menu.length;x<xl;x++){ gallery[x] = new Object(); gallery[x].name = menu[x].getAttribute("Name"); var listArrow = new Element('div').addClass('listArrow'); var listItem = new Element('li'); listArrow.injectInside(listItem); listItem.addClass("num"+x)
.appendText(gallery[x].name)
.addEvent('click', function(){ paging = false; displayArrow(this); displayThumbnails(this.className.replace(/\D/g,""),0);})
menuList.adopt(listItem); var photos = menu[x].getElementsByTagName("Photo"); gallery[x].total = photos.length; for(var p=0,pl=photos.length;p<pl;p++){ gallery[x]["photo"+p] = photos[p].getAttribute("Url"); gallery[x]["desc"+p] = photos[p].getAttribute("Description");}
}
var firstItem = menuList.getElementsByTagName("li")[1]; preview = $$("#gallery .preview")[0]; listItem.addClass("active"); displayArrow(firstItem); displayThumbnails(0,0);}
function displayThumbnails(num,page){ var paginate = new pagination(num,page,18,gallery[num].total); paginate.write("thumbPagination"); var menuList = $$(".menuList li"); menuList.each(function(li){ li.removeClass("active") }); menuList[parseInt(num)+1].addClass("active"); var thumbnails = $$("#gallery .thumbnails")[0]; thumbnails.getChildren().remove(); for(var x=paginate.range.min,xl=paginate.range.max;x<=xl;x++){ var photo = gallery[num]["photo"+x]; var desc = gallery[num]["desc"+x]; if(photo){ thumbnails.adopt( new Element("div").addClass("thumb")
.adopt(new Element("img")
.setProperties({"src":photo,"width":62,"height":47,"title":desc})
)
.addEvent("click",function(){ displayPhoto(this.getFirst().getProperty('src'),this.getFirst().getProperty('title'));}) );} else { thumbnails.adopt( new Element("div").addClass("empty") );}
}
if(paginate.display.min > paginate.itemsPerPage) paging = true; if(!paging) displayPhoto(gallery[num].photo0,gallery[num].desc0); $$('#gallery .previewImage')[0].setStyle('background-image','none');}
function displayArrow(el){ $$('#gallery li .listArrow').each(function(element){ element.setStyle('background-position','-35px');}); var arrow = el.getElementsBySelector('.listArrow')[0]; var bkgdPos = new Fx.Style(arrow, 'background-position', {duration:750,transition:Fx.Transitions.sineOut,fps:1000}).custom(-35,0);}
function displayPhoto(photo,caption){ preview.getChildren().remove(); var img = $(new Image()); preview.adopt(img); img.onload = function() { img.onload = null; var scale = scaleRatio(img.width,img.height); img.width = scale.width; img.height = scale.height; preview.setStyle("top",Math.floor((maxH-img.height)/2)+"px"); opacityfx.custom(0,1);}; var opacityfx = new Fx.Style(img, 'opacity', {duration:250,transition:Fx.Transitions.sineOut,fps:1000}).set(0); img.src = photo.replace("/small/","/large/"); $E('.previewImage .captionBkgd').setOpacity((caption!=undefined && caption!='')?.65:0); $E('.previewImage .captionText').setHTML((caption!=undefined)?caption:'');}
function scaleRatio(imgW,imgH){ var width,height; var dx = (maxW / imgW); var dy = (maxH / imgH); ratio = dx < dy ? dx : dy; width = Math.floor(imgW * ratio); height = Math.floor(imgH * ratio); return {width:width,height:height}
}
var pagination = function(gallery,page,itemsPerPage,total){ this.gallery = gallery; this.total = total; this.itemsPerPage = itemsPerPage; this.prev = Math.max(0,page-1); this.next = Math.min(Math.floor(this.total/itemsPerPage),page+1); this.range = { min : (page*itemsPerPage), max : (((page+1)*itemsPerPage)-1)
}; this.display = { min : (this.range.min+1), max : (((this.range.max+1)>this.total)? this.total : this.range.max+1)
}; this.write = function(id){ var links = "" + "<a href='#' onclick='displayThumbnails("+this.gallery+","+this.prev+");return false;'>&laquo;</a>" + "displaying "+this.display.min+" to "+this.display.max + " of "+this.total+" Photos" + "<a href='#' onclick='displayThumbnails("+this.gallery+","+this.next+");return false;'>&raquo;</a>"; $(id).setHTML( (total > itemsPerPage)? links : "" );}
}
function showSelectBoxes(){ selects = document.getElementsByTagName("select"); for (i = 0; i != selects.length; i++) { selects[i].style.visibility = "visible";}
}
function hideSelectBoxes(){ selects = document.getElementsByTagName("select"); for (i = 0; i != selects.length; i++) { selects[i].style.visibility = "hidden";}
}