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

var Popup = new Class({
	
	target: null,
	content: null,
    state: { },
	
	initialize: function() {
	    this.state = {slideshow: '0'};
		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();
				}
			}
		});


		// 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': 400,
				'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);

		this.footer.injectInside(this.target);
		
		this.overlay.injectInside(document.body);
		this.target.injectInside(document.body);

	},
	
	placePopup: function() {
        this.target.setStyle('visibility', 'visible');
		var ts = this.target.getSize();
		var ws = window.getSize();
        var t = (ws.size.y - ts.size.y) / 2 + ws.scroll.y;
        if (t <= 180)
            t = 180;

		this.target.setStyles({
			'left': (ws.size.x - ts.size.x) / 2 + ws.scroll.x,
			'top': t,
			'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.product.addEvent('onGetAsyncDetails', this.handleGetAsyncDetails.bind(this));
		this.product.getAsyncDetails(this.state);
	},

	handleGetAsyncDetails: function(objResponse) {
		this.content.setHTML(objResponse.response);
		this.showHelpers();
        this.placePopup();
        this.initThumbs();
	},

    initThumbs: function() {
        var thumbs = $$('a.pthumb');
        popup.setState('thumbs', thumbs);
        for (var i = 0; i < thumbs.length; i++)
        {
            var prev = 0;
            if (i - 1 < 0)
                prev = thumbs.length - 1;
            else
                prev = i - 1;
    
            thumbs[i].previous = thumbs[prev];

            var next = 0;
            if (i + 1 >= thumbs.length)
                next = 0;
            else
                next = i + 1;

            thumbs[i].next = thumbs[next];

            if (i == 0)
            {
                thumbs[i].addClass('currentproductimage');
                this.setState('currentproductimage', thumbs[i]);
            }
            thumbs[i].addEvent('click', this.handleThumbClick.bind(thumbs[i]));
        }
    },

    handleThumbClick: function() {
        $E('div.productimagewrap').empty();
        var medium = $(this.getProperty('id') + '-medium');
        var large = $(this.getProperty('id') + '-large');
        var padding_top = $(this.getProperty('id') + '-padding-top');
        var width = $(this.getProperty('id') + '-width');
        var height = $(this.getProperty('id') + '-height');
        var mainimg = new Element('img', 
                {   'id': 'productmainimage', 
                    'width': width.getProperty('value'),
                    'height': height.getProperty('value'), 
                    'class': 'productimage', 
                    'styles': {
                        'cursor': 'pointer',
                        'position': 'relative', 
                        'display': 'block',
                        'width': width.getProperty('value') + 'px',
                        'height': height.getProperty('value') + 'px',
                        'padding-top' : padding_top.getProperty('value')
                        }, 
                    'src': medium.getProperty('value'),
                    'title': 'View Larger Image',
                    'alt': 'View Larger Image',
                    'events' : {
                        'click': function() {
                            window.open(large.getProperty('value'));
                        }
                    }
                    });
        mainimg.injectInside($E('div.productimagewrap'));

        var current = popup.getState('currentproductimage');
        current.removeClass('currentproductimage');
        popup.setState('currentproductimage', this);
        this.addClass('currentproductimage');
    },

    setState: function(prop, val) {
        this.state.prop = val;
    },

    getState: function(prop) {
        return this.state.prop;
    },
	
	localHide: function() {
		this.stopSlideshow();
		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(stopSlideshow) {
        if (stopSlideshow)
            this.stopSlideshow();
        var current = this.getState('currentproductimage');
        current.previous.fireEvent('click');
        return true;
	},

	// show the next product on the page
	showNext: function(stopSlideshow) {
        if (stopSlideshow)
            this.stopSlideshow();
        var current = this.getState('currentproductimage');
        current.next.fireEvent('click');
        return true;
	},

	// 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.state.slideshow == 0)
			this.startSlideshow();
		else
			this.stopSlideshow();

	},

	startSlideshow: function() {
        $clear(this.slideshowTimer);
        this.showNext();
		this.slideshowTimer = this.showNext.periodical(2000, this, false);
		this.state.slideshow = 1;
        if ($('slideshowbutton'))
        {
            $('slideshowbutton').setHTML('Stop Slideshow');
        }
	},

	stopSlideshow: function() {
		$clear(this.slideshowTimer);
		this.state.slideshow = 0;
        if ($('slideshowbutton'))
        {
            $('slideshowbutton').setHTML('Start Slideshow');
        }
	}
});
Popup.implement(new Events);