/**
 * @author abratfisch
 */
var magnifer = new Class({
	Implements: [Options, Events],
	
	options: {
		source: '', // this is the small HTML Container Element
		target: '',  // this is the big HTML Container Element
		image: ''
	},
	
	initialize: function(options) {
		this.setOptions(options);
		if( !$(this.options.source) ) return false;
		if( !$(this.options.target) ) return false;
		if( !$(this.options.image) ) return false;
		
		this.preloadImage();
	},
	
	preloadImage: function() {
		this.img = $(this.options.image);
		var that = this;
		var myImages = new Asset.images(new Array(this.img.src), {
		    onComplete: function(){
		        that.initMagnifer();
		    }
		});
	},
	
	initMagnifer: function() {
		this.sa = $(this.options.source); // small area
		this.ta = $(this.options.target); // big area
		var that = this; // make this object avaiable for subobjects
		
		// FOR DEBUG
		this.img.style.backgroundColor = "#000";
		
		this.magnifer = new Element("img");
		var sa_size = this.sa.getSize();
		var im_size = this.img.getSize();
		var ta_size = this.ta.getSize();
		
		var magnifer_width  = Math.round((ta_size.x * (sa_size.x / im_size.x)) -2);
		var magnifer_height = Math.round((ta_size.y * (sa_size.y / im_size.y)) -2);
		
		this.magnifer.src = "/media/images/tools/leer.gif";
		
		this.magnifer.setStyles({
			"width": magnifer_width,
			"height": magnifer_height,
			"border": "1px solid #780000",
			"position": "absolute",
			"left": 0,
			"top": 0,
			"z-index": 9999
		});
		
		this.sa.appendChild(this.magnifer);
		
		var doOpts = {
			container: this.sa,
			onDrag: function(e) {
				that.doMove(e);
			}
		}
		// pre-set the magnifer to the middle of image
		this.magnifer.addClass("drag").makeDraggable(doOpts);
		this.magnifer.setStyles({
			"left" : (sa_size.x / 2) - (magnifer_width / 2),
			"top": (sa_size.y / 2) - (magnifer_height / 2)
		});
		this.doMove(this.magnifer);
		// end pre-set
		
		// a little tweak:
		// IE will not handle drag & drop properly in mootools, 
		// so we do fix this
		if( Browser.Engine.trident ) {
			this.magnifer.ondragstart = function() { return false; }
		}
		
		this.magnifer.setStyles({
			"cursor": "move"
		});

	},
	
	doMove: function(e) {
		var xy = e.getPosition(this.sa);
		var im_size = this.img.getSize();
		var sa_size = this.sa.getSize();
		var sa_pos = this.sa.getPosition();
		
		var sW = (im_size.x / sa_size.x );
		var sH = (im_size.y / sa_size.y );
		
		var x = xy.x - 1;
		var y = xy.y - 1;
		
		xDrag = this.sa.getPosition().x;
		yDrag = this.sa.getPosition().y;
		
		xOffset = (xDrag - sa_pos.x);
		yOffset = (yDrag - sa_pos.y);
		
		left = Math.ceil(-sW * xy.x);
		topv  = Math.ceil(-sH * xy.y);
		
		this.img.setStyles({
			"position": "absolute",
			"left" : left,
			"top": topv
		});
	}
});