var SqueezeBox = { presets: { size: {x: 600, y: 450}, sizeLoading: {x: 200, y: 150}, marginInner: {x: 20, y: 20}, marginImage: {x: 150, y: 200}, handler: false, adopt: null, closeWithOverlay: true, zIndex: 65555, overlayOpacity: 0.7, classWindow: '', classOverlay: '', disableFx: false, onOpen: Class.empty, onClose: Class.empty, onUpdate: Class.empty, onResize: Class.empty, onMove: Class.empty, onShow: Class.empty, onHide: Class.empty, fxOverlayDuration: 250, fxResizeDuration: 750, fxContentDuration: 250, ajaxOptions: {}
}, initialize: function(options) { if (this.options) return this; this.presets = $merge(this.presets, options)
this.setOptions(this.presets); this.build(); this.listeners = { window: this.reposition.bind(this, [null]), close: this.close.bind(this), key: this.onkeypress.bind(this)}; this.isOpen = this.isLoading = false; this.window.close = this.listeners.close; return this;}, build: function() { this.overlay = new Element('div', { id: 'sbox-overlay', styles: { display: 'none', zIndex: this.options.zIndex
}
}); this.content = new Element('div', { id: 'sbox-content'
}); this.btnClose = new Element('a', { id: 'sbox-btn-close', href: '#'
}); this.window = new Element('div', { id: 'sbox-window', styles: { display: 'none', zIndex: this.options.zIndex + 2
}
}).adopt(this.btnClose, this.content); if (!window.ie6) { this.overlay.setStyles({ position: 'fixed', top: 0, left: 0
}); this.window.setStyles({ position: 'fixed', top: '50%', left: '50%'
});} else { this.overlay.style.setExpression('marginTop', 'document.documentElement.scrollTop + "px"'); this.window.style.setExpression('marginTop', '0 - parseInt(this.offsetHeight / 2) + document.documentElement.scrollTop + "px"'); this.overlay.setStyles({ position: 'absolute', top: '0%', left: '0%'
}); this.window.setStyles({ position: 'absolute', top: '0%', left: '0%'
});}
$(document.body).adopt(this.overlay, this.window); this.fx = { overlay: this.overlay.effect('opacity', { duration: this.options.fxOverlayDuration, wait: false}).set(0), window: this.window.effects({ duration: this.options.fxResizeDuration, wait: false}), content: this.content.effect('opacity', { duration: this.options.fxContentDuration, wait: false}).set(0)
};}, addClick: function(el) { return el.addEvent('click', function() { if (this.fromElement(el)) return false;}.bind(this));}, fromElement: function(el, options) { this.initialize(); this.element = $(el); if (this.element && this.element.rel) options = $merge(options || {}, Json.evaluate(this.element.rel)); this.setOptions(this.presets, options); this.assignOptions(); this.url = (this.element ? (this.options.url || this.element.href) : el) || ''; if (this.options.handler) { var handler = this.options.handler; return this.setContent(handler, this.parsers[handler].call(this, true));}
var res = false; for (var key in this.parsers) { if ((res = this.parsers[key].call(this))) return this.setContent(key, res);}
return this;}, assignOptions: function() { this.overlay.setProperty('class', this.options.classOverlay); this.window.setProperty('class', this.options.classWindow);}, close: function(e) { if (e) new Event(e).stop(); if (!this.isOpen) return this; this.fx.overlay.start(0).chain(this.toggleOverlay.bind(this)); this.window.setStyle('display', 'none'); this.trashImage(); this.toggleListeners(); this.isOpen = null; this.fireEvent('onClose', [this.content]).removeEvents(); this.options = {}; this.setOptions(this.presets).callChain(); return this;}, onError: function() { if (this.image) this.trashImage(); this.setContent('Error during loading');}, trashImage: function() { if (this.image) this.image = this.image.onload = this.image.onerror = this.image.onabort = null;}, setContent: function(handler, content) { this.content.setProperty('class', 'sbox-content-' + handler); this.applyTimer = this.applyContent.delay(this.fx.overlay.options.duration, this, [this.handlers[handler].call(this, content)]); if (this.overlay.opacity) return this; this.toggleOverlay(true); this.fx.overlay.start(this.options.overlayOpacity); this.reposition(); return this;}, applyContent: function(content, size) { this.applyTimer = $clear(this.applyTimer); this.hideContent(); if (!content) this.toggleLoading(true); else { if (this.isLoading) this.toggleLoading(false); this.fireEvent('onUpdate', [this.content], 20);}
this.content.empty()[['string', 'array', false].contains($type(content)) ? 'setHTML' : 'adopt'](content || ''); this.callChain(); if (!this.isOpen) { this.toggleListeners(true); this.resize(size, true); this.isOpen = true; this.fireEvent('onOpen', [this.content]);} else this.resize(size);}, resize: function(size, instantly) { var sizes = window.getSize(); this.size = $merge(this.isLoading ? this.options.sizeLoading : this.options.size, size); var to = { width: this.size.x, height: this.size.y, marginLeft: - this.size.x / 2, marginTop: - this.size.y / 2
}; $clear(this.showTimer || null); this.hideContent(); if (!instantly) this.fx.window.start(to).chain(this.showContent.bind(this)); else { this.window.setStyles(to).setStyle('display', ''); this.showTimer = this.showContent.delay(50, this);}
this.reposition(sizes);}, toggleListeners: function(state) { var task = state ? 'addEvent' : 'removeEvent'; this.btnClose[task]('click', this.listeners.close); if (this.options.closeWithOverlay) this.overlay[task]('click', this.listeners.close); document[task]('keydown', this.listeners.key); window[task]('resize', this.listeners.window); window[task]('scroll', this.listeners.window);}, toggleLoading: function(state) { this.isLoading = state; this.window[state ? 'addClass' : 'removeClass']('sbox-loading'); if (state) this.fireEvent('onLoading', [this.window]);}, toggleOverlay: function(state) { this.overlay.setStyle('display', state ? '' : 'none'); $(document.body)[state ? 'addClass' : 'removeClass']('body-overlayed');}, showContent: function() { if (this.content.opacity) this.fireEvent('onShow', [this.window]); this.fx.content.start(1);}, hideContent: function() { if (!this.content.opacity) this.fireEvent('onHide', [this.window]); this.fx.content.stop().set(0);}, onkeypress: function(e) { switch (e.key) { case 'esc':
case 'x':
this.close(); break;}
}, reposition: function(sizes) { sizes = sizes || window.getSize(); this.overlay.setStyles({ width: sizes.size.x, height: sizes.size.y
}); this.fireEvent('onMove', [this.overlay, this.window, sizes]);}, removeEvents: function(type){ if (!this.$events) return this; if (!type) this.$events = null; else if (this.$events[type]) this.$events[type] = null; return this;}, parsers: { 'image': function(preset) { return (preset || this.url.test(/\.(jpg|jpeg|png|gif|bmp)$/i)) ? this.url : false;}, 'adopt': function(preset) { if ($(this.options.adopt)) return $(this.options.adopt); if (preset || ($(this.element) && !this.element.parentNode)) return $(this.element); var bits = this.url.match(/#([\w-]+)$/); return bits ? $(bits[1]) : false;}, 'url': function(preset) { return (preset || (this.url && !this.url.test(/^javascript:/i))) ? this.url: false;}, 'iframe': function(preset) { return (preset || this.url) ? this.url: false;}, 'string': function(preset) { return true;}
}, handlers: { 'image': function(url) { this.image = new Image(); var events = { loaded: function() { var win = {x: window.getWidth() - this.options.marginImage.x, y: window.getHeight() - this.options.marginImage.y}; var size = {x: this.image.width, y: this.image.height}; for (var i = 0; i < 2; i++)
if (size.x > win.x) { size.y *= win.x / size.x; size.x = win.x;} else if (size.y > win.y) { size.x *= win.y / size.y; size.y = win.y;}
size = {x: parseInt(size.x), y: parseInt(size.y)}; if (window.webkit419) this.image = new Element('img', {'src': this.image.src}); else $(this.image); this.image.setProperties({ 'width': size.x, 'height': size.y}); this.applyContent(this.image, size);}.bind(this), failed: this.onError.bind(this)
}; (function() { this.src = url;}).delay(10, this.image); this.image.onload = events.loaded; this.image.onerror = this.image.onabort = events.failed;}, 'adopt': function(el) { return el.clone();}, 'url': function(url) { this.ajax = new Ajax(url, this.options.ajaxOptions); this.ajax.addEvent('onSuccess', function(resp) { this.applyContent(resp); this.ajax = null;}.bind(this)); this.ajax.addEvent('onFailure', this.onError.bind(this)); this.ajax.request.delay(10, this.ajax);}, 'iframe': function(url) { return new Element('iframe', { 'src': url, 'frameBorder': 0, 'width': this.options.size.x, 'height': this.options.size.y
});}, 'string': function(str) { return str;}
}, extend: $extend
}; SqueezeBox.extend(Events.prototype); SqueezeBox.extend(Options.prototype); SqueezeBox.extend(Chain.prototype);