var ZoomEffect = function( draggingAreaId, draggingViewId ) {
	
	var target = new Object();
	var draggingArea = new Object();
	var draggingView = new Object();
	var smallImageLoaded = false;
	var largeImageLoaded = false;
	var largeWidth2smallWidthRatio = 0;

	this.initDrag = function() {
		var a = this;
		document.onmousedown = function( event ) {
			a.onMouseDown( event );
		}
		document.onmouseup   = function( event ) {
			a.onMouseUp( event );
		}
	}
	
	this.reset = function() {
		var zeDragging = this.get( 'zeDragging' );
		//zeDragging.style.top  = '0px';
		//zeDragging.style.left = '0px';

		var dv = ze.get( draggingViewId );
		dv.style.backgroundPosition = "0 0";
	}

	this.setSmallImage = function( smallImageSrc ) {
		var smallImage = new Image();
		var a = this;
		smallImage.onload = function() {
			a.smallImageLoaded = true;
			a.smallImageWidth = this.width;
			a.smallImageHeight = this.height;
			a.draggingArea.style.backgroundImage = 'url( ' + this.src + ' )';
			a.draggingArea.style.width = this.width + 'px';
			a.draggingArea.style.height = this.height + 'px';
		}
		smallImage.src = smallImageSrc;
	}

	this.setLargeImage = function( largeImageSrc ) {
		var largeImage = new Image();
		var a = this;
		largeImage.onload = function() {
			a.largeImageLoaded = true;
			a.largeImageWidth = this.width;
			a.largeImageHeight = this.height;

			a.draggingView.style.backgroundImage = 'url( ' + this.src + ' )';

			// After big image loaded init the zoom effect
			if( a.smallImageLoaded ) {
				a.largeWidth2smallWidthRatio = a.largeImageWidth / a.smallImageWidth;
				a.initDrag();
			}
		}
		largeImage.src = largeImageSrc;
	}

	this.findPos = function( obj ) {
		curleft = curtop = 0;
		if (obj.offsetParent) {
			do {
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;
			} while (obj = obj.offsetParent);

		}
		return { top : curtop, left : curleft }
	}

	this.onMouseDown = function( event ) {
		
		// Internet Explorer has a diffrent approach
		var event = event != null?event:window.event;
		
		// Target element
		this.target = event.target != null?event.target:event.srcElement;

		// Check if target element is the one we want
		if( ( ( event.button == 1 && window.event != null ) || event.button == 0 ) && ( this.target.id == 'zeDragging' ||  this.target.id == draggingAreaId ) ) {
			
			// Get mouse pointer X and Y position
			var startX = event.clientX;
			var startY = event.clientY + ( window.scrollY?window.scrollY:document.documentElement.scrollTop );

			// Make dragging element to appear
			var de = this.get( 'zeDragging' );
			try
			{
				var offsets = this.findPos( de.parentNode );
				var offsetLeft = offsets.left;
				var offsetTop  = offsets.top;
				de.style.display = 'block';
				de.style.top  = ( startY - offsetTop -  de.offsetHeight / 2 ) + 'px';
				de.style.left = ( startX - offsetLeft - de.offsetWidth / 2 ) + 'px';
			}
			catch (ex)
			{
			}
			
			var ze = this;

			document.onmousemove = function( event ) {
				var de = ze.get( 'zeDragging' );
				
				// Change cursor :)
				de.style.cursor = 'move';

				var event = event != null?event:window.event;

				var startX = event.clientX;
				var startY = event.clientY + ( window.scrollY?window.scrollY:document.documentElement.scrollTop );

				var deOffsetTop  = ( startY - offsetTop -  de.offsetHeight / 2 );
				var deOffsetLeft = ( startX - offsetLeft - de.offsetWidth / 2 );

				// Moving the zoomer only in the area
				if( deOffsetTop >= 0 && deOffsetLeft >= 0 && ( deOffsetTop <= ( de.parentNode.offsetHeight - de.offsetHeight ) ) && ( deOffsetLeft <= ( de.parentNode.offsetWidth - de.offsetWidth ) ) ) {
					
					de.style.top  = deOffsetTop + 'px';
					de.style.left = deOffsetLeft + 'px';

					var dv = ze.get( draggingViewId );
					dv.style.backgroundPosition = "-" + ( ( startX - ( de.offsetWidth / 2 ) - offsetLeft ) * ze.largeWidth2smallWidthRatio ) + "px -" + ( ( startY - ( de.offsetHeight / 2 ) - offsetTop ) * ze.largeWidth2smallWidthRatio ) + 'px' ;
				}

			}

			// Cancel text selection
			document.body.focus();
			// In IE
			document.onselectstart = function() { return false; }
			
			// Diffrent thant IE
			return false;
		}
	}

	this.onMouseUp = function() {
		document.onmousemove = null;
		document.onselectstart = null;
	}
	
	// Create an additional div element which will use it to drag
	this.createDraggingElement = function() {
		var div = document.createElement( 'div' );
		div.setAttribute( 'id', 'zeDragging' );
		return div;
	}
	
	// Add dragging element to draggable area
	this.addDraggingElement = function( div ) {
		this.get( draggingAreaId ).appendChild( div );
	}
	
	this.get = function( elementId ) {
		return document.getElementById( elementId );
	}
	
	// Constructor
	this.addDraggingElement(this.createDraggingElement());
	this.draggingArea = this.get( draggingAreaId );
	this.draggingView = this.get( draggingViewId );
}

var ze_switch_images = function( a ) {
	var img = a.getElementsByTagName( 'img' )[0];
	// Init zoom effect object
	var ze = new ZoomEffect( 'zoom_effect_draggin_area', 'zoom_effect_view' );
	ze.reset();
	var src = img.src;
	src = src.replace( /thumb.php\?src\=\//, '' );
	src = src.replace( /\&w=([0-9]+)\&h=([0-9]+)/, '' );
	ze.setSmallImage( src  );
	ze.setLargeImage( src.replace( /thumb_/g, '' ) );
}

window.onload = function() {
	
	try
	{
		var img = $$( '#tabs_content_gallery .footer a' )[0];
	ze_switch_images( img );
	}
	catch (ex)
	{
	}

}