var mssImgMagnify = new Class({
	
	initialize: function(element, options) {
	  
		this.options = Object.extend({
			footercolor:		'#000',
			captioncolor:		'#fff',
			caption:			'',
			width:				300,
			thumbWidth:			250
		}, options || {});
		this.el = $(element);
		this.elid = element;
		this.el.setStyle('width', this.options.width + 'px');
		this.el.setStyle('z-index', '1500');
		this.skipInit = false;
		this.frameRatio = this.options.frameRatio;
		
		this.loading = new Element('div', {'id': this.elid + '_footer'});
		this.loading.set('html', 'Loading Magnified Image...');

		this.loading.inject(this.el);
		//this.loading.injectInside(this.el);
		if(this.options.caption == ''){	this.options.caption = this.picturename;}
		
		this.image = $('mssMagImg');
		this.image.setStyles({'left': '-10000px', 'position': 'relative', 'display':'block'});
		this.picturename = this.image.getProperty('src');

		this.continueInit();
		
	},
		
	continueInit: function()
	{ 
		if(! this.skipInit){
			this.imageWidth = this.image.getSize().x;
			this.imageHeight = this.image.getSize().y;
			this.frameRatio = this.imageWidth / this.options.width;
			this.ratio = this.imageWidth / this.options.thumbWidth;
			this.whratio = this.imageWidth / this.imageHeight;
			this.thumbWidth = this.options.thumbWidth;
			this.thumbHeight = this.imageHeight / this.ratio;
			this.orientation=(this.imageWidth > this.imageHeight)?'landscape':((this.imageWidth < this.imageHeight)?'portrait':'square');
			this.longside = (this.orientation=='landscape') ? this.imageWidth / this.ratio / this.frameRatio : this.imageHeight / this.ratio / this.frameRatio ;
			this.shortside = (this.orientation=='landscape') ? this.longside / this.whratio : this.longside * this.whratio;
			this.frameHeight = (this.orientation=='landscape') ? this.shortside: this.longside;
			this.frameWidth = (this.orientation=='landscape') ? this.longside: this.shortside;
			this.image.dispose();
			this.loading.dispose();
			
			if(Browser.Engine.trident && Browser.Engine.version < 5) {
            this.marginTop = 5;
            this.marginRight = 4;
         } else {
            this.marginTop = 10;
            this.marginRight = 8;
         }
         if(Browser.Engine.trident){
				this.ieheightadjust = 0;
				this.ietopadjust = 2;
			} else {
				this.ieheightadjust = 0;
				this.ietopadjust = 2;
			}
			//document.getElementById('mss-zoomin').style.top = (this.thumbHeight + this.ietopadjust) + 'px';
			
			this.outter = new Element('div', {
				'id': this.elid + '_outter',
				'styles': {
					'width' : this.options.width + 'px',
					'height': this.options.width / this.whratio  + 'px',
					'overflow': 'hidden',
					'z-index': '2500',
					'border': '3px solid #666666',
					'display': 'none'
				}
			});
			
			
			this.inner = new Element('div', {
				'id': this.elid + '_inner',
				'styles' : {
					'width': this.imageWidth + 'px',
					'height': this.imageHeight + 'px',
					'background': 'transparent url(' + this.picturename + ') no-repeat top left',
					'display': 'none',
					//'border': '1px solid #0f0',
               'z-index': '5000'
					
				}
			});
			
			
			this.footer = ($('mssImgMagnify_footer'))?$('mssImgMagnify_footer'):new Element('div', {
				'id': this.elid + '_footer',
				'styles': {
					'width' : this.options.width + 'px',
					'height': this.thumbHeight + 20 + 'px',
					'position': 'absolute',
					'right':0,
					//'border': '1px solid #f00',
					'background-color': this.options.footercolor
					
				}
			});
			
			this.caption = new Element('div', {
				'id': this.elid + '_caption',
				'styles': {
					'float': 'right',
					'padding-left': '5px',
					'color' : this.options.captioncolor,
					'font-family': "Trebuchet MS",
					'font-size': '13px'
				}
			});
			this.caption.set('html',this.options.caption);
			
			
			this.thumb = new Element('div', {
				'id': this.elid + '_thumb',
				'styles': {
					'float': 'left',
					'margin-right': this.marginRight + 'px',
					'margin-top': this.marginTop + 'px',
					'height': this.thumbHeight +'px',
					'width': this.thumbWidth + 'px',
					'text-align': 'left',
					//'border': '1px solid #000',
					'cursor': 'pointer',
					'position': 'relative',
					'overflow': 'hidden'
				},
				'title': 'Click to move the frame!',
				'events': {
               'mouseover': function() {
                  var elid = this.id.replace('_thumb','');
                  document.getElementById(elid+'_inner').style.display='block';
                  document.getElementById(elid+'_frame').style.display='block';
                  document.getElementById(elid+'_outter').style.display='block';
                  },
				   'mouseout': function() {
				      var elid = this.id.replace('_thumb','');
                  document.getElementById(elid+'_inner').style.display='none';
                  document.getElementById(elid+'_frame').style.display='none';
                  document.getElementById(elid+'_outter').style.display='none';
                  }
				  }
			});
			
			this.frame = new Element('div', {
				'id': this.elid + '_frame',
				'styles': {
					'height': this.frameHeight +'px',
					'width': this.frameWidth + 'px',
					'position': 'relative',
					'top': '-' + (this.imageHeight / this.ratio - this.ieheightadjust) +'px',
					'left' : '0px',
					'border': '1px solid #AAAAAA',
					'background-color': '#fff',
					'cursor': 'move',
					'z-index': '1000',
					'opacity': 0.6,
					'display': 'none'
				},
				'title': 'Drag me to change the view.'
			});
			
			this.image.setProperty('width',this.thumbWidth );
			this.image.setProperty('height', this.thumbHeight);
			this.image.setStyle('left', '0px');
			//this.image.setStyle('border','1px solid #00f');
			this.image.setStyle('position', 'relative');
			
			//Inject everything
			this.inner.inject(this.outter);
         this.outter.inject(this.el);
			if (!$('mssImgMagnify_footer'))this.footer.inject(this.el);
			this.caption.inject(this.footer);
			
			this.thumb.inject(this.footer);
			this.image.inject(this.thumb);
			this.frame.inject(this.thumb);
			
			/* this.outter.injectInside(this.el);
			this.inner.injectInside(this.outter);
			if (!$('mssImgMagnify_footer'))this.footer.injectInside(this.el);
			this.caption.injectInside(this.footer);
			
			this.thumb.injectInside(this.footer);
			this.image.injectInside(this.thumb);
			this.frame.injectInside(this.thumb);
			*/
			
			// reset the scroll
			this.outter.scrollTo(0, 0);
			this.createDraggable();			
			this.skipInit = true;

		}
	},
	
	createDraggable: function() {
		this.dragHandle = this.frame.makeDraggable({
				modifiers: {x : 'left', y : 'top'}, 
				limit: {x : [0, this.options.thumbWidth - this.frameWidth - this.ietopadjust], y:[- this.thumbHeight - this.ieheightadjust, -this.frameHeight - this.ietopadjust]},
				onDrag: function() {
					frameleft = this.frame.getStyle('left').toInt();
					frametop = this.frame.getStyle('top').toInt();
					topComp = this.imageHeight / this.ratio + this.ieheightadjust;
					newscrollleft = frameleft * this.ratio;
					newscrolltop = (frametop+topComp) * this.ratio;
					this.outter.scrollTo(newscrollleft, newscrolltop);
				}.bind(this)
		});
	}
	
});