var Milkbox = new Class({ Implements: [Options, Events], options: { overlayOpacity: 0.7, topPosition: 50, initialWidth: 250, initialHeight: 250, canvasBorderWidth: "0px", canvasBorderColor: "#000000", canvasPadding: "0px", resizeDuration: 500, resizeTransition: "sine:in:out", autoPlay: false, autoPlayDelay: 7, removeTitle: false, autoSize: true, maxHeight: 0, imageOfText: "of", onXmlGalleries: $empty, onClosed: $empty, onFileReady: $empty }, initialize: function(a) { this.setOptions(a); this.autoPlayBkup = { autoPlayDelay: this.options.autoPlayDelay, autoPlay: this.options.autoPlay }; this.fullOptionsBkup = {}; this.galleries = []; this.families = []; this.xmlFiles = []; this.loadedImages = []; this.currentFile = null; this.currentIndex = null; this.currentGallery = null; this.currentRequest = null; this.currentResponse = null; this.mode = null; this.closed = true; this.busy = true; this.paused = true; this.fileReady = false; this.eventsok = false; this.first = true; this.activated = false; this.intObj = null; this.formtags = null; this.prepareGalleries(); if (this.options.overlayOpacity == 0) { this.options.overlayOpacity = 0.0001 } this.saveOptions(); if (this.galleries.length == 0) { return } this.initMilkbox(true) }, initMilkbox: function(a) { if (a) { this.formtags = $$("select", "textarea") } this.prepareHTML(); this.prepareEffects(); this.prepareEvents(); this.activated = true }, openMilkbox: function(b, d) { this.closed = false; if (this.formtags.length != 0) { this.formtags.setStyle("display", "none") } this.overlay.setStyles({ top: -$(window).getScroll().y, height: $(window).getScrollSize().y + $(window).getScroll().y }); this.center.setStyle("top", $(window).getScroll().y + this.options.topPosition); this.currentGallery = b; this.currentIndex = d; this.overlay.tween("opacity", this.options.overlayOpacity); if (b.length == 1) { this.mode = "singleFile"; this.loadFile(b[d], d) } else { this.mode = "fileGallery"; var a = 0; $$(this.prev, this.next, this.count).setStyle("display", "block"); if (this.options.autoPlay) { this.playpause.setStyle("display", "block"); a = this.playpause.getSize().x } var c = this.center.getStyle("border-right-width").toInt(); var h = this.prev.getSize().x + this.next.getSize().x + this.close.getSize().x + a + c; this.navigation.setStyle("width", h); this.description.setStyle("margin-right", h); var f = (d != b.length - 1) ? b[d + 1] : b[0]; var g = (d != 0) ? b[d - 1] : b[b.length - 1]; var e = (g == f) ? [g] : [g, f]; this.loadFile(b[d], e) } }, loadFile: function(c, b) { this.fileReady = false; var a = this.checkFileType(c, "swf"); if (!a) { if (!this.loadedImages.contains(c.retrieve("href"))) { this.center.addClass("mbLoading") } this.loadImage(c.retrieve("href")) } else { this.loadSwf(c) } if (b) { this.preloadFiles(b) } }, preloadFiles: function(a) { a.each(function(d, b) { var c = this.checkFileType(d.retrieve("href"), "swf"); if (!c) { this.preloadImage(d.retrieve("href")) } }, this) }, loadImage: function(b) { var a = new Asset.image(b, { onload: function(c) { if (!this.loadedImages.contains(b)) { this.loadedImages.push(b) } this.currentFile = c; this.loadAux(this.currentFile) } .bindWithEvent(this) }) }, preloadImage: function(b) { if (!this.loadedImages.contains(b)) { var a = new Asset.image(b, { onload: function(c) { this.loadedImages.push(b) } .bindWithEvent(this) }) } }, loadSwf: function(b) { var a = new Swiff(b.retrieve("href"), { width: b.retrieve("width").toInt(), height: b.retrieve("height").toInt(), params: { wMode: "opaque", swLiveConnect: "false"} }); this.currentFile = a; this.loadAux(b) }, loadAux: function(a) { this.fileReady = true; this.fireEvent("fileReady"); $$(this.description, this.navigation).setStyle("visibility", "hidden"); this.navigation.setStyle("height", ""); $$(this.next, this.prev, this.close).setStyle("backgroundPosition", "0 0"); this.showFile(a) }, showFile: function(c) { if (this.closed) { return } var f = new Hash(); var k = new Hash(); var g, l; var e, j, i, a, h; g = l = {}; e = j = i = a = h = 0; if (this.options.canvasBorderWidth.toInt() != 0 && this.canvas.getStyle("borderWidth").toInt() == 0) { i = this.options.canvasBorderWidth + " solid " + this.options.canvasBorderColor; this.canvas.setStyle("border", i) } if (this.options.canvasPadding.toInt() != 0 && this.canvas.getStyle("padding").toInt() == 0) { a = this.options.canvasPadding; this.canvas.setStyle("padding", a) } l = this.canvas.getSize(); e = this.canvas.getStyle("borderWidth").toInt() * 2 + this.canvas.getStyle("padding").toInt() * 2; this.canvas.setStyles({ opacity: 0, width: "", height: "" }); if (!c.retrieve("width")) { f = f.extend(c.getProperties("width", "height")).map(function(b) { return b.toInt() }); if (this.options.autoSize) { f = this.computeSize(f); c.setProperties({ width: f.width, height: f.height }) } } else { f.extend({ height: c.retrieve("height").toInt(), width: c.retrieve("width").toInt() }) } k = k.extend(this.center.getStyles("width", "height")).map(function(b) { return b.toInt() }); if (f.width != k.width) { g.width = f.width + e; g.marginLeft = -(g.width / 2).round() } j = (l.y - e > 0) ? k.height - l.y : 0; g.height = f.height + e + j; this.canvas.setStyles({ width: f.width, height: f.height }); this.center.removeClass("mbLoading"); if (this.first) { h = 500; this.first = false } (function() { this.center.morph(g) }).delay(h, this) }, computeSize: function(g) { var d = g; var b = window.getSize(); var f = { width: b.x - 60, height: b.y - 68 - this.options.topPosition * 2 }; var e; var c; var a = Math.max(f.height, f.width); if (a == f.width) { e = a / d.width; c = "height" } else { e = a / d.height; c = "width" } e = (e <= 1) ? e : 1; d = d.map(function(h) { return Math.floor(h * e) }); e = (f[c] / d[c] <= 1) ? f[c] / d[c] : 1; d = d.map(function(h) { return Math.floor(h * e) }); if (this.options.maxHeight > 0) { e = (this.options.maxHeight / d.height < 1) ? this.options.maxHeight / d.height : 1; d = d.map(function(h) { return Math.floor(h * e) }) } return d }, showGallery: function(a) { if (!a || !a.gallery) { return } var c = ($chk(a.index)) ? a.index : 0; var b = this.getGallery(a.gallery); var f = false; var e; if (a.autoplay || (b.options && b.options.autoplay)) { f = true } if (b != -1 && !this.opened) { if (f) { e = (a && a.delay) ? a.delay : (b.options && b.options.delay) ? b.options.delay : this.autoPlayDelay; this.startAutoPlay({ gallery: b, index: c, delay: e }) } else { this.openMilkbox(b, c) } } }, addGalleries: function(a) { this.currentRequest = new Request({ method: "get", autoCancel: true, url: a, onRequest: function() { } .bindWithEvent(this), onSuccess: function(d, b) { var c = d.replace(/(<a.+)\/>/gi, "$1></a>"); this.setGalleries(new Element("div", { html: c }), a) } .bindWithEvent(this), onFailure: function(b) { alert("Milkbox :: addGalleries: XML file path error or local Ajax test: please test addGalleries() on-line") } }); this.currentRequest.send() }, setGalleries: function(d, f) { if (!this.xmlFiles.contains(f)) { this.xmlFiles.push(f) } var g = d; var b = g.getElements(".gallery"); var e = []; var a = []; b.each(function(h, j) { var m = { gallery: h.getProperty("name"), autoplay: Boolean(h.getProperty("autoplay")), delay: Number(h.getProperty("delay")) }; var c = h.getChildren("a"); var k = c.map(function(i) { return i.setProperty("rel", "milkbox[" + m.gallery + "]") }); e.push(k); if (m.autoplay) { a.push(m) } }); this.prepareGalleries(e.flatten()); this.setAutoPlay(a); if (!this.activated) { this.initMilkbox() } this.fireEvent("xmlGalleries") }, checkFileType: function(b, c) { var a = null; if ($type(b) != "string") { a = b.retrieve("href") } else { a = b } var d = new RegExp(".(" + c + ")$", "i"); return a.split("?")[0].test(d) }, getGallery: function(a) { var d = null; if (a.test(/^milkbox/i)) { d = this.families } else { d = this.families.map(function(g) { var h = g.trim(); var e = h.slice(0, h.length).substr(8); var f = e.replace(/(.+)]$/, "$1"); return f }) } var b = d.indexOf(a); var c = (b != -1) ? this.galleries[b] : b; return c }, setFileProps: function(c, a) { var b = a.split(","); b.each(function(f, e) { var d = f.trim().split(":"); c.store(d[0].trim(), d[1].trim()) }, this) }, changeOptions: function(a) { if (!a) { return } this.setOptions(a); this.center.get("morph").setOptions({ transition: this.options.resizeTransition, duration: this.options.resizeDuration }) }, saveOptions: function(a) { if ($chk(a)) { this.fullOptionsBkup = a } else { this.fullOptionsBkup = this.options } }, restoreOptions: function() { this.setOptions(this.fullOptionsBkup); var a = this.options.canvasBorderWidth + " solid " + this.options.canvasBorderColor; this.canvas.setStyles({ border: a, padding: this.options.canvasPadding }); this.center.get("morph").setOptions({ transition: this.options.resizeTransition, duration: this.options.resizeDuration }) }, reloadGalleries: function() { this.galleries = []; this.families = []; this.formtags = $$("select", "textarea"); if (!this.activated) { this.initMilkbox(false) } this.prepareGalleries(); this.removeGalleriesEvents(); this.setGalleriesEvents(); if (this.xmlFiles.length == 0) { return } this.xmlFiles.each(function(b, a) { this.addGalleries(b) } .bind(this)) }, setAutoPlay: function(b) { var a = ($type(b) == "object") ? [b] : b; a.each(function(f) { var e = this.getGallery(f.gallery); if (e == -1) { return } var c = (f.autoplay == true) ? f.autoplay : false; var h = ($chk(f.delay) && c) ? f.delay : this.options.autoPlayDelay; e.options = { autoplay: c, delay: h} }, this) }, startAutoPlay: function(b) { var c = -1; var a, e; if (b && b.gallery) { if ($type(b.gallery) == "array") { c = b.gallery } else { if ($type(b.gallery) == "string") { c = this.getGallery(b.gallery) } } } if (c == -1) { c = this.galleries[0] } e = (b && b.delay && ($type(b.delay) == "number")) ? b.delay * 1000 : (c.options && c.options.delay) ? c.options.delay * 1000 : this.options.autoPlayDelay * 1000; a = (b && b.index && ($type(b.index) == "number")) ? b.index : 0; if (e < this.options.resizeDuration * 2) { e = this.options.resizeDuration * 2 } this.options.autoPlayDelay = e / 1000; if (!this.options.autoPlay) { this.setOptions({ autoPlay: true, autoPlayDelay: this.options.autoPlayDelay }) } if (this.closed) { this.openMilkbox(c, a); if (this.mode != "fileGallery") { return } this.addEvent("fileReady", function() { this.intObj = this.next_prev_aux.periodical(e, this, [null, "next"]); this.removeEvents("fileReady") } .bindWithEvent(this)) } else { if (!this.closed) { this.next_prev_aux(null, "next") } this.intObj = this.next_prev_aux.periodical(e, this, [null, "next"]) } this.paused = false }, stopAutoPlay: function() { if (this.intObj) { $clear(this.intObj); this.intObj = null } this.playpause.setStyle("backgroundPosition", "0 -44px"); this.paused = true }, removeGalleriesEvents: function() { this.galleries.each(function(a) { $$(a).removeEvents("click") }, this) }, setGalleriesEvents: function() { this.galleries.each(function(a) { $$(a).addEvent("click", function(d) {var b = ($(d.target).match("a")) ? $(d.target) : $(d.target).getParent("a"); d.preventDefault(); var c = this.getGallery(b.rel); if (c.options && c.options.autoplay) { this.setOptions({ autoPlay: c.options.autoplay, autoPlayDelay: c.options.delay }) } if (this.options.autoPlay) { this.startAutoPlay({ gallery: a, index: a.indexOf(b) }) } else { this.openMilkbox(a, a.indexOf(b)) } } .bindWithEvent(this)) }, this) }, prepareEvents: function(a) { this.setGalleriesEvents(); this.next.addEvent("click", this.next_prev_aux.bindWithEvent(this, "next")); this.prev.addEvent("click", this.next_prev_aux.bindWithEvent(this, "prev")); $$(this.next, this.prev, this.close).addEvents({ mouseover: function() { this.setStyle("backgroundPosition", "0 -22px") }, mouseout: function() { this.setStyle("backgroundPosition", "0 0") } }); $(window.document).addEvent("keydown", function(b) { if (this.mode != "fileGallery" || this.busy == true) { return } if (b.key == "right" || b.key == "space") { this.next_prev_aux(b, "next") } else { if (b.key == "left") { this.next_prev_aux(b, "prev") } else { if (b.key == "esc") { this.closeMilkbox() } } } } .bindWithEvent(this)); this.playpause.addEvents({ mouseover: function(b) { if (this.paused == false) { this.playpause.setStyle("backgroundPosition", "0 -22px") } else { this.playpause.setStyle("backgroundPosition", "0 -66px") } } .bindWithEvent(this), mouseout: function() { if (this.paused == false) { this.playpause.setStyle("backgroundPosition", "0 0") } else { this.playpause.setStyle("backgroundPosition", "0 -44px") } } .bindWithEvent(this), click: function() { if (this.paused == false) { this.stopAutoPlay(); this.paused = true; this.playpause.setStyle("backgroundPosition", "0 -66px") } else { var b = (this.currentGallery.options && this.currentGallery.options.delay) ? this.currentGallery.options.delay : this.options.autoPlayDelay; this.startAutoPlay({ gallery: this.currentGallery, index: this.currentIndex + 1, delay: b }); this.paused = false; this.playpause.setStyle("backgroundPosition", "0 0") } } .bindWithEvent(this) }); this.overlay.get("tween").addEvent("onComplete", function() { if (this.overlay.getStyle("opacity") == this.options.overlayOpacity) { this.center.tween("opacity", 1) } else { if (this.overlay.getStyle("opacity") == 0) { this.overlay.setStyles({ height: 0, top: "" }) } } } .bindWithEvent(this)); this.center.get("morph").addEvent("onComplete", function() { if ($type(this.currentFile) == "element") { this.canvas.grab(this.currentFile) } else { (function() { this.canvas.grab(this.currentFile) }).delay(500, this) } this.canvas.tween("opacity", 1); var e = (!(this.mode == "showThisImage")) ? this.currentGallery[this.currentIndex].retrieve("title") : this.specialDescription; if ($chk(e)) { this.description.innerHTML = e } if (this.mode == "fileGallery") { this.count.appendText((this.currentIndex + 1) + " " + this.options.imageOfText + " " + this.currentGallery.length) } var b = this.center.getStyle("height").toInt(); this.navigation.setStyle("height", this.bottom.getStyle("height").toInt()); var f = this.bottom.getSize().y; var c = (b > this.canvas.getSize().y) ? (this.bottom.getSize().y + this.canvas.getSize().y) - b : f; this.bottom.setStyle("display", "none"); this.center.retrieve("setFinalHeight").start(b, b + c) } .bindWithEvent(this)); this.center.retrieve("setFinalHeight").addEvent("onComplete", function() { this.bottom.setStyles({ visibility: "visible", display: "block" }); $$(this.description, this.navigation).setStyle("visibility", "visible"); var b = $(window).getScrollSize().y; var c = $(window).getScroll().y; this.overlay.setStyles({ height: b + c, top: -c }); this.busy = false } .bindWithEvent(this)); window.addEvent("resize", function() { if (this.overlay.getStyle("opacity") == 0) { return } var b = $(window).getScrollSize().y; var c = $(window).getScroll().y; this.overlay.setStyles({ height: b + c, top: -c }) } .bindWithEvent(this)); $$(this.overlay, this.close).addEvent("click", this.closeMilkbox.bindWithEvent(this)); this.eventsok = true }, next_prev_aux: function(d, c) { if (d) { d.preventDefault(); this.stopAutoPlay() } else { if (this.busy || !this.fileReady) { return } } this.busy = true; var a, b; if (c == "next") { a = (this.currentIndex != this.currentGallery.length - 1) ? this.currentIndex += 1 : this.currentIndex = 0; b = (this.currentIndex != this.currentGallery.length - 1) ? this.currentIndex + 1 : 0 } else { a = (this.currentIndex != 0) ? this.currentIndex -= 1 : this.currentIndex = this.currentGallery.length - 1; b = (this.currentIndex != 0) ? this.currentIndex - 1 : this.currentGallery.length - 1 } this.canvas.empty(); this.description.empty(); this.count.empty(); this.loadFile(this.currentGallery[a], [this.currentGallery[b]]) }, prepareEffects: function() { this.overlay.set("tween", { duration: "short", link: "cancel" }); this.center.set("tween", { duration: "short", link: "chain" }); this.center.set("morph", { duration: this.options.resizeDuration, link: "chain", transition: this.options.resizeTransition }); this.center.store("setFinalHeight", new Fx.Tween(this.center, { property: "height", duration: "short" })); this.canvas.set("tween", { link: "chain" }) }, prepareGalleries: function(a) { var c = []; var b = (a) ? a : $$("a"); b.each(function(d) { if (d.rel && d.rel.test(/^milkbox/i) && d.href.split("?")[0].test(/\.(gif|jpg|jpeg|png|swf)$/i)) { if (d.rel.length > 7 && !this.families.contains(d.rel)) { this.families.push(d.rel) } c.push(d) } }, this); c.each(function(d) { $(d).store("href", d.href); $(d).store("rel", d.rel); if (d.hasClass('HtmlToTitle')) { $(d).store("title", $(d.title).innerHTML); } else { $(d).store("title", d.title); } if (this.checkFileType(d.href, "swf")) { this.setFileProps($(d), d.rev) } if (this.options.removeTitle) { $(d).removeProperty("title") } if (d.rel.length > 7) { this.families.each(function(j, h) { if (d.rel == j) { var e = false; var g; this.galleries.each(function(i, f) { if (i[0].rel == j) { e = true; g = f; return } }); if (e == true) { this.galleries[g].push($(d)) } else { this.galleries.push([$(d)]) } } }, this) } else { this.galleries.push([$(d)]) } }, this) }, prepareHTML: function() { this.overlay = new Element("div", { id: "mbOverlay", styles: { opacity: 0, visibility: "visible", height: 0, overflow: "hidden"} }).inject($(document.body)); this.center = new Element("div", { id: "mbCenter", styles: { width: this.options.initialWidth, height: this.options.initialHeight, marginLeft: -(this.options.initialWidth / 2), opacity: 0} }).inject($(document.body)); this.canvas = new Element("div", { id: "mbCanvas" }).inject(this.center); this.bottom = new Element("div", { id: "mbBottom" }).inject(this.center).setStyle("visibility", "hidden"); this.navigation = new Element("div", { id: "mbNavigation" }).setStyle("visibility", "hidden"); this.description = new Element("div", { id: "mbDescription" }).setStyle("visibility", "hidden"); this.bottom.adopt(this.navigation, this.description, new Element("div", { "class": "mbClear" })); this.close = new Element("a", { id: "mbCloseLink" }); this.next = new Element("a", { id: "mbNextLink" }); this.prev = new Element("a", { id: "mbPrevLink" }); this.playpause = new Element("a", { id: "mbPlayPause" }); this.count = new Element("span", { id: "mbCount" }); $$(this.next, this.prev, this.count, this.playpause).setStyle("display", "none"); this.navigation.adopt(this.close, this.next, this.prev, this.playpause, new Element("div", { "class": "mbClear" }), this.count) }, closeMilkbox: function() { this.cancelAllEffects(); this.stopAutoPlay(); this.setOptions(this.autoPlayBkup); this.currentFile = null; this.currentIndex = null; this.currentGallery = null; this.currentRequest = null; this.currentResponse = null; $$(this.prev, this.next, this.playpause, this.count).setStyle("display", "none"); this.playpause.setStyle("backgroundPosition", "0 0"); var a = this.center.getStyle("border-right-width").toInt(); var b = this.close.getSize().x + a; this.navigation.setStyles({ width: b, height: "", visibility: "hidden" }); this.description.setStyle("margin-right", b); this.description.empty(); this.bottom.setStyles({ visibility: "hidden", display: "" }); this.canvas.setStyles({ opacity: 0, width: "", height: "" }); this.canvas.empty(); this.count.empty(); this.center.setStyles({ opacity: 0, width: this.options.initialWidth, height: this.options.initialHeight, marginLeft: -(this.options.initialWidth / 2) }); this.overlay.tween("opacity", 0); if (this.formtags.length != 0) { this.formtags.setStyle("display", "") } this.mode = null; this.closed = true; this.first = true; this.fileReady = false; this.fireEvent("closed") }, cancelAllEffects: function() { this.overlay.get("tween").cancel(); this.center.get("morph").cancel(); this.center.get("tween").cancel(); this.center.retrieve("setFinalHeight").cancel(); this.canvas.get("tween").cancel() } });

window.addEvent('domready', function(){
    milkbox = new Milkbox();
});