OrangeShop.magnifier = Class.create({
	initialize: function (sourceElement, parentElement, imageUrl, options){
		this.sourceElement = $(sourceElement);
		this.imageUrl = imageUrl;
		this.options = Object.extend({
			// options go here
		}, options || {});
		this.magnifier = this.initMagnifier(parentElement);
		this.magnifier.makeClipping().setStyle({width: '280px', height: '240px'}); // this should be based on web-develeoper defined option
		pos  = this.sourceElement.cumulativeOffset();
		Event.observe(this.sourceElement, 'mouseover', function(event){
			if(pos.left == 0) pos  = this.sourceElement.cumulativeOffset();
			this.magnifier.show();
		}.bind(this));
		Event.observe(this.sourceElement, 'mouseout', function(event){
			this.magnifier.hide();
		}.bind(this));
		Event.observe(this.sourceElement, 'mousemove', function(event){
			this.magnifier.down('img').setStyle({
				left: -4.8 *((Event.pointerX(event)- 35) - pos.left) + 'px', // this should be based on web-develeoper defined option
				top: -4.8 * ((Event.pointerY(event)- 20) - pos.top) + 'px' // this should be based on web-develeoper defined option
			});
		}.bind(this));
	},
	initMagnifier: function(parentElement) {
		var e = new Element('div', { 
			'style': 'position: absolute; top:0; left: 0;', 'class' : this.options.className
		}).update(new Element('img', {
			'style': 'position: absolute;', 'src' : this.imageUrl 
		}));
		e.hide();
		$(parentElement).insert({ bottom: e});
		return e;
	},
	updateImage: function(src) {
		this.magnifier.down('img').src= src;
	}
});

OrangeShop.deviceGallery = Class.create({
	initialize: function (thumbImages, mainImage, options){
		this.thumbImages = thumbImages;
		this.mainImage = mainImage;
		this.images = [];
		this.options = Object.extend({
			afterFinish: Prototype.emptyFunction
		}, options || {});
		this.thumbImages.each(function(t,i){
			t.observe('click', function(event){
				this.toggleImage(i);
				Event.stop(event);
				return false
			}.bind(this));
		}.bind(this));
	},
	toggleImage: function(i) {
		this.current = this.images[i];
		// Checks if a style of "visibility:hidden" is set to img element - meaning it is IE6, if so, use alpha filter style to toggle image
		this.mainImage.src = this.images[i][0];
		this.fixAlphaTransparency(this.images[i][0]);
		this.notify('afterFinish')
	},
	fixAlphaTransparency: function(src){
		if (this.mainImage.getStyle('visibility') == "hidden") {
			this.mainImage.parentNode.setStyle({
				filter:'progid:dximagetransform.microsoft.alphaimageloader(src=' + src + ',sizingMethod=scale)'
			});
		}
	},
	notify: function(event_name){
		try{
			if(this.options[event_name])
				return [this.options[event_name].apply(this.options[event_name],$A(arguments).slice(1))];
		}catch(e){
			if(e != $break)
				throw e;
			else
				return false;
		}
	}
});