/*
Script: ImagePreview.js
	Contains <ImagePreview>

Author:
	Alan Roemen

Class: ImagePreview
	A javascript image viewer

Options:
	imgBase: If links wrap images set to true, else set to false. Default: true
	baseURL: Base directory for script. Default: false
	scriptName: Name of javascript file. Default: 'slidingtabs'
	className: CSS class name for script. Set to false for no CSS. Default: 'SlidingTabs'
	offsets: Container Offsets. Default: {x: 0, y: 0}
	containerPadding: Container animated padding. Default: 10
	draggable: Makes containers draggable if true. Default: true
	hideClickOff: Limits to 1 active container and closes container when clicking outside container. Default: true
	showEffect: options for effect used to animate the sliding, see Fx.Base in mootools docs. Default: duration: 300 // half a second
	hideEffect: options for effect used to animate the sliding, see Fx.Base in mootools docs. Default: duration: 300 // half a second
*/

/*
Script: ImagePreview.js
	Contains <ImagePreview>

Author:
	Alan Roemen

Class: ImagePreview
	A javascript image viewer

Options:
	imgBase: If links wrap images set to true, else set to false. Default: true
	baseURL: Base directory for script. Default: false
	scriptName: Name of javascript file. Default: 'slidingtabs'
	className: CSS class name for script. Set to false for no CSS. Default: 'SlidingTabs'
	offsets: Container Offsets. Default: {x: 0, y: 0}
	containerPadding: Container animated padding. Default: 10
	draggable: Makes containers draggable if true. Default: true
	hideClickOff: Limits to 1 active container and closes container when clicking outside container. Default: true
	showEffect: options for effect used to animate the sliding, see Fx.Base in mootools docs. Default: duration: 300 // half a second
	hideEffect: options for effect used to animate the sliding, see Fx.Base in mootools docs. Default: duration: 300 // half a second
*/

var ImagePreview = new Class({
	options: {
		imgBase: true,
		baseURL: false,
		scriptName: 'imagepreview',
		className: 'ImagePreview',
		offsets: {x: 0, y: 0},
		containerPadding: 10,
		draggable: true,
		hideClickOff: true,
		showEffect: {
			duration: 300
		},
		hideEffect: {
			duration: 300
		}
	},

	initialize: function(links, options) {
		this.links = document.getElements('a[rel='+links+']');
		this.setOptions(options);

		// Get script base path
		if(!this.options.baseURL) {
			var elements = document.getElementsByTagName('script');
			for (var i=0; i<elements.length; i++) {
				if (elements[i].src && (elements[i].src.indexOf(this.options.scriptName+'.js') != -1)) {
					var src = elements[i].src;
					this.options.baseURL = src.substring(0, src.lastIndexOf('/'));
					break;
				}
			}
			// Get document base path
			this.documentBasePath = document.location.href;
			if (this.documentBasePath.indexOf('?') != -1)
				this.documentBasePath = this.documentBasePath.substring(0, this.documentBasePath.indexOf('?'));
			this.documentBasePath = this.documentBasePath.substring(0, this.documentBasePath.lastIndexOf('/'));
			if (this.options.baseURL.indexOf('://') == -1 && this.options.baseURL.charAt(0) != '/')
				this.options.baseURL = this.documentBasePath + "/" + this.options.baseURL;
		}

		// Adds Stylesheet
		if(this.options.className!==false)
			new Asset.css(this.options.baseURL + '/' + this.options.scriptName + '.css', {id: 'style'});

		this.start.delay(300, this);
		this.mouseActive = false;
	},

	start: function(){
		// Setup Links & Link Images
		this.images = new Array();
		this.links.each(function(el, i){
			//Preload Img
			var tempImg = new Image();
			tempImg.src = el.href;
			
			//Add Event & Style to Link
			el.addClass(this.options.className);
			el.addEvent('click', function(e){
				e = new Event(e).stop();
				this.show(i);
			}.bindWithEvent(this));

			//Add to Images Obj
			var temp = {
				link: el,
				image: tempImg,
				container: false,
				coords: false
			};
			if(this.options.imgBase){
				temp.sImage = el.getElement('img');
				temp.origSize = el.getElement('img').getSize().size;
			}
			//var y=temp.origSize;var z='';for(var x in y)z+=x+': '+y[x]+'\n';alert(z);z='';
			this.images.push(temp);
		}.bind(this));

		// Div Container
		this.container = new Element('div', {
			'class': this.options.className,
			'styles': {
				'position': 'absolute',
				'overflow': 'hidden',
				'display': 'inline',
				'padding': '0',
				'margin': '0'
			}
		});
	},

	getTempSize: function(el){
		var size, temp = $(el).clone();

		temp.removeProperty('style');
		temp.setStyle('visibility', 'hidden');
		temp.inject(document.body);
		size = temp.getSize().size;
		temp.remove();
		return size;
	},

	drag: function(id){
		new Drag.Move(this.images[id].container, {
			onDrag: (function(){
				this.mouseActive=true;
			}.bind(this))
		});
	},

	show: function(id){
		this.active = id;
		var img = this.images[id];
		var newImg = this.images[id].image;
		var size = this.getTempSize(newImg);

		try {
			prodCode = img.image.src.split('/')[img.image.src.split('/').length-3];
			_gaq.push( [ '_trackEvent', 'product', 'click_image', prodCode ] );
			_gaq.push( [ 'glg._trackEvent', 'product', 'click_image', prodCode ] );
		} catch ( err ) {}

		img.container = this.container.clone();
		newImg.injectInside(img.container);
		newImg.setStyles({
			width: (this.options.imgBase?img.origSize.x:20),
			height: (this.options.imgBase?img.origSize.y:20)
		});
		var pos = (this.options.imgBase?img.sImage.getPosition():img.link.getPosition());
		if(this.options.imgBase) img.link.setStyle('visibility','hidden');
		img.container.setStyles({
			'left': pos.x + this.options.offsets.x,
			'top': pos.y + this.options.offsets.y
		});
		//img.container.injectBefore(img.link);
		img.container.inject($$('body')[0]);
		this.images[id].coords = img.container.getCoordinates();

		img.container.addEvent('click', function(e){
			e = new Event(e).stop();
			if(!this.mouseActive) this.hide(id);
			this.mouseActive = false;
		}.bindWithEvent(this));
		// Show Effect
		this.fx = new Fx.Styles(newImg, this.options.showEffect);
		this.fx.start({
			'padding': [0, this.options.containerPadding],
			'width': 400,//size.x,
			'height': 400//size.y
		});

		if(this.options.draggable) this.drag(id);
		if(this.options.hideClickOff) this.clickOff('show', id);
	},

	hide: function(id){
		if(this.options.hideClickOff) this.clickOff('hide');
		var img = this.images[id];
		var origImg = this.images[id].sImage;

		// Hide Effects
		this.fx = new Fx.Styles(img.container, this.options.hideEffect);
		this.fx2 = new Fx.Styles(img.container.getElement('img'), this.options.hideEffect);
		this.fx.start({
			'top': img.coords.top,
			'left': img.coords.left,
			'width': (this.options.imgBase?img.origSize.x:0),
			'height': (this.options.imgBase?img.origSize.y:0)
		}).chain(function(){this.remove(id);}.bind(this));
		this.fx2.start({
			'padding': 0,
			'width': (this.options.imgBase?img.origSize.x:0),
			'height': (this.options.imgBase?img.origSize.y:0)
		});
	},

	remove: function(id){
		if(this.options.imgBase) this.images[id].link.setStyle('visibility', 'visible');
		var remove = (function(){
			this.images[id].container.remove();
			this.images[id].container = false;
		}).bind(this);
		remove.delay(50, this);
	},

	clickOff: function(act, id){
		if(!this.clickOffDiv) {
			this.clickOffDiv = new Element('div', {
				'class': 'clickoff',
				'styles': {
					'display':'none'
				},
				'events': {
					'click': (function(e){
						e = new Event(e).stop();
						this.hide(this.active);
					}).bindWithEvent(this)
				}
			}).inject(document.body);
			if(window.ie6) this.clickoffDiv.setStyle('position','absolute');
		}

		if(act == 'show')	this.clickOffDiv.setStyle('display', 'block');
		else if(act == 'hide') this.clickOffDiv.setStyle('display', 'none');
	}
});

ImagePreview.implement(new Options, new Events);