/**
 * File: http://demo.facilitywarehouse.com/gallery/js/Popup.js
 */

var Popup = new Class({
	
	target: null,
	content: null,
	state: {'slideshow': '0'},
	
	initialize: function() {
		this.target = new Element('div', {
			'id': 'productviewer'
		});
		
		this.dragbar = new Element('div', {
			'class': 'dragbar'
		});

		this.messagebar = new Element('div', {
			'class': 'messagebar'
		});

		this.footer = new Element('div', {
			'class': 'popupfooter'
		});

		/* 
		 * Title bar items and buttons
		 */
		this.closeBtn = new Element('a', {
			'class': 'close popupfunction',
			'href': 'javascript:void(null);',
			'events': {
				'click': function() {
					popup.localHide();
				}
			}
		});
		this.saveBtn = new Element('a', {
			'class': 'popupfunction popupsave',
			'href': 'javascript:void(null);',
			'title': 'Save Image',
			'events': {
				'click': function() {
					popup.product.saveImage();
				}
			}
		});
		this.printBtn = new Element('a', {
			'class': 'popupfunction popupprint',
			'href': 'javascript:void(null);',
			'title': 'Print Product',
			'target': '_blank',
			'href': 'javascript:void(null);',
			'events': {
				'click': function() {
					this.href = '/gallery/print.php?pid=' + popup.product.ref_number;
				}
			}
		});
		this.emailBtn = new Element('a', {
			'class': 'popupfunction popupemail',
			'href': 'javascript:void(null);',
			'title': 'Email Product',
			'href': 'javascript:void(null);',
			'events': {
				'click': function() {
					popup.emailpopup.toggle();
				}
			}
		});

		/* 
		 * Slideshow stuff
		 */
		this.slideshowBtn = new Element('a', {
			'class': 'slideshowstartstop',
			'href': 'javascript: void(0);',
			'title': 'Start Slideshow',
			'events': {
				'click': function() {
					popup.toggleSlideshow();
				}
			}
		});
		this.slideshowBtn .setHTML('Start Slideshow');
		this.slideshowBackBtn = new Element('a', {
			'class': 'slideshowfunction slideshowback',
			'href': 'javascript: void(0);',
			'title': 'Back',
			'events': {
				'click': function() {
					popup.showPrevious();
				}
			}
		});
		this.slideshowNextBtn = new Element('a', {
			'class': 'slideshowfunction slideshownext',
			'href': 'javascript: void(0);',
			'title': 'Next',
			'events': {
				'click': function() {
					popup.showNext();
				}
			}
		});



		// DOM iframe to allow save of image without a popup
		this.saveIframe = new Element('iframe', {
			'id': 'productsaveimage',
			'src': '',
			'width': '0',
			'height': '0',
			'border': '0',
			'style': 'display: none;'
		});
		
		// IFRAME to hide select box overlay
		this.overlay = new Element('iframe', {
			'frameborder': 0,
			'border': 0,
			'scrollable': 'no',
			'styles': {
				'height': 584,
				'width': 400,
				'z-index': 98,
				'position': 'absolute',
				'display': 'none',
				'padding': 0
			}
		});
		
		this.closeBtn.setHTML('close');
		
		this.content = new Element('div', {
			'class': 'viewer'
		});
		
		// setup drag bar with close, save, print, email buttons
		this.closeBtn.injectInside(this.dragbar);
		this.printBtn.injectInside(this.dragbar);
		this.saveBtn.injectInside(this.dragbar);
		this.emailBtn.injectInside(this.dragbar);
		this.dragbar.injectInside(this.target);

		this.messagebar.injectInside(this.target);
		this.content.injectInside(this.target);
		this.saveIframe.injectInside(this.target);
		
		new Drag.Base(this.target, {
			handle: this.dragbar,
			onDrag: function(el) {
				this.overlay.setStyles({
					'top': el.getPosition().y,
					'left': el.getPosition().x
				});
			}.bind(this)
		});

		this.emailpopup = new EmailPopup(this.target);

		// add slideshow buttons - back start/stop next - to footer
		this.slideshowBackBtn.injectInside(this.footer);
		this.slideshowBtn.injectInside(this.footer);
		this.slideshowNextBtn.injectInside(this.footer);
		this.footer.injectInside(this.target);
		
		this.overlay.injectInside(document.body);
		this.target.injectInside(document.body);
	},
	
	placePopup: function() {
		var ts = this.target.getSize();
		var ws = window.getSize();
		this.target.setStyles({
			'left': (ws.size.x - ts.size.x) / 2 + ws.scroll.x,
			'top': (ws.size.y - ts.size.y) / 2 + ws.scroll.y,
			'visibility': 'visible'
		});
		this.overlay.setStyles({
			'left': this.target.getPosition().x,
			'top': this.target.getPosition().y,
			'visibility': 'visible'
		});
	},
	
	show: function(product) {
		products.each(function(obj) {
			obj.remoteHide();
		});
		
		this.emailpopup.hide();
		this.product = product;
		if (this.target.getStyle('display') == 'none')
		{
			this.overlay.setStyles({
				'display': 'block',
				'visibility': 'hidden'
			});
			this.target.setStyles({
				'display': 'block',
				'visibility': 'hidden'
			});
			this.placePopup();
		}

		this.product.addEvent('onGetAsyncDetails', this.handleGetAsyncDetails.bind(this));
		this.product.getAsyncDetails(this.state);
	},

	handleGetAsyncDetails: function(objResponse) {
		this.content.setHTML(objResponse.response);
		this.showHelpers();
	},
	
	localHide: function() {
		this.product.remoteHide();
		this.remoteHide();
		this.emailpopup.hide();
		this.messagebar.setStyles({
			'display': 'none',
			'visibility': 'hidden'
		});
	},
	
	remoteHide: function() {
		this.stopSlideshow();
		this.content.empty();
		this.emailpopup.hide();
		this.target.setStyles({
			'left': 0,
			'top': 0,
			'display': 'none'
		});
		this.overlay.setStyles({
			'left': 0,
			'top': 0,
			'display': 'none'
		});

		this.hideHelpers();
	},

	
	showById: function(id) {
		var product = products.get(id);
		this.show(product);
		product.remoteView();
	},

	// show the previous product on the page
	showPrevious: function() {
		var els = $$('input.id');
		for (var i = 0; i < els.length; i++)
		{
			if (i - 1 >= 0)
				var prev = els[i - 1];
			else
				var prev = els[els.length - 1];

			if (els[i].value == this.product.id)
			{
				if (prev)
					this.showById(prev.value);
				break;
			}
		}
	},

	// show the next product on the page
	showNext: function() {
		var els = $$('input.id');
		for (var i = 0; i < els.length; i++)
		{
			if (i + 1 < els.length)
				var next = els[i + 1];
			else
				var next = els[0];
				

			if (els[i].value == this.product.id)
			{
				if (next)
					this.showById(next.value);
				break;
			}
		}
	},

	// show the header/title bar and footer bar
	showHelpers: function() {
		this.dragbar.setStyles({ 'display': 'block', 'visibility': 'visible' });
		this.footer.setStyles({ 'display': 'block', 'visibility': 'visible' });
	},

	// hide the header/title bar and footer bar
	hideHelpers: function() {
		this.dragbar.setStyles({ 'display': 'none', 'visibility': 'hidden' });
		this.footer.setStyles({ 'display': 'none', 'visibility': 'hidden' });
	},

	toggleSlideshow: function() {
		if (!(this.slideshowTimer))
			this.startSlideshow();
		else
			this.stopSlideshow();

	},

	startSlideshow: function() {
		this.slideshowTimer = this.showNext.periodical(5000, this);
		this.state.slideshow = 1;
		this.slideshowBtn.setHTML('Stop Slideshow');
	},

	stopSlideshow: function() {
		$clear(this.slideshowTimer);
		this.slideshowBtn.setHTML('Start Slideshow');
	}
});
Popup.implement(new Events);