var modalBox = new CtComponent_ModalBox('ctViewModalBox');
CtPage.addComponent(modalBox);
var CtViewBtn = Class.create({

	attr: null,
	element: null,
	modalBox: null,
	viewer: null,

	initialize: function(htmlElement, modalBox) {
		this.element = $(htmlElement);

		if (!Prototype.Browser.MobileSafari) {
			this.element.writeAttribute('href', 'javascript:void(0)');
			this.element.observe('click', function(event){
				Event.stop(event);
				this.initModalBox();
				this.modalBox.show(0.1);
			}.bindAsEventListener(this));
			try {
				this.attr = this.element.readAttribute('rel');
			} catch(ex) {
				return;
			}
		}
		this.element.writeAttribute('rel', null);
	},

	initModalBox: function () {

		this.modalBox = CtPage.getComponent('ctViewModalBox');

		this.modalBox.container.setStyle({position: 'fixed'});
		this.modalBox.container.setAttribute('id', 'modalBox');

		this.modalBox.closeButton.setStyle({top: '-16px', right: '-16px', width: '28px', height: '28px'});
		this.modalBox.closeButton.writeAttribute('href', '#');
		this.viewer = this.modalBox.container.firstDescendant();
		this.modalBox.afterShowCallBack = this.fillContent.bind(this);
	},

	fillContent: function() {
		new Ajax.Request(this.attr, {
			method: 'get',
			onSuccess: function(transport) {
				this.viewer.update(transport.responseText );
			}.bind(this),
			onFailure: function() {
				this.modalBox.hide();
			}.bind(this)
		});
	}
});

var CtViewBtn_Factory = new (Class.create({

	initialize: function() {
		Event.observe(window, 'load', function() { this.refresh() }.bind(this));
	},

	refresh: function(htmlElement) {
		var elements = [];
		if (htmlElement) {
			elements = $(htmlElement).select('.ctViewBtn');
		} else {
			elements = $$('.ctViewBtn');
		}
		for (var i = 0; i < elements.length; i++) {
			elements[i].removeClassName('ctViewBtn');
			new CtViewBtn(elements[i]);
		}
	}
}));

CtPage.registerScript("CtViewBtn");