/**
 * Extend the Cropper.Img class to allow for presentation of a preview image of the resulting crop,
 * the option for displayOnInit is always overridden to true when displaying a preview image
 * 
 * @author Andy Stanberry andy@lijit.com
 * @version 0.1
 * Usage:
 * 	@param obj Image element to attach to
 * 	@param obj Optional options:
 * 		- see Cropper.Img for base options
 * 		
 * 		- previewWraps array
 * 			An array of HTML elements, as well as their height and width, to show previews in		
 */
Cropper.ImgWithManyPreviews = Class.create();

Object.extend( Object.extend( Cropper.ImgWithManyPreviews.prototype, Cropper.Img.prototype ), {
	
	/**
	 * Implements the abstract method from Cropper.Img to initialize preview image settings.
	 * Will only attach a preview image if an array of images is passed in.
	 * 
	 * @see Croper.Img.subInitialize
	 */
	subInitialize: function() {
		/**
		 * Whether or not we've attached a preview image
		 * @var boolean
		 */
		this.hasPreviews = false;
		if( typeof(this.options.previewWraps) != 'undefined') {
			this.previewWrapArray = $( this.options.previewWraps );
			// Store the preview images in an array for easy access while updating
			this.previewImg = new Array();
			this.hasPreviewImg = new Array();

			// Don't do anythign if nothing is passed in
			if(this.previewWrapArray.length > 0){
				this.hasPreviews = true;
				this.options.displayOnInit = true;
			}

			for(i = 0; i < this.previewWrapArray.length; i++){
				if( typeof(this.previewWrapArray[i].name) != 'undefined' &&
					this.previewWrapArray[i].height > 0 &&
					this.previewWrapArray[i].width > 0) {
					
					var previewWrap = $(this.previewWrapArray[i].name);
					this.hasPreviewImg[i] = true;
					this.previewImg[i] = this.img.cloneNode( false );	
	
					// hide extra space from the preview area
					previewWrap.addClassName( 'imgCrop_previewWrap' );
					
					previewWrap.setStyle(
					 { 
					 	width: this.previewWrapArray[i].width + 'px',
					 	height: this.previewWrapArray[i].height + 'px'
					 }
					);
					
					previewWrap.appendChild( this.previewImg[i] );
				}
			}
		}
	},
	
	/**
	 * Implements the abstract method from Cropper.Img to draw the preview image
	 * 
	 * @see Croper.Img.subDrawArea
	 */
	subDrawArea: function() {
		if( this.hasPreviews ) {
			this.previewWrapArray = $( this.options.previewWraps );
			for(i = 0; i < this.previewWrapArray.length; i++){				
				if(this.hasPreviewImg[i]){
					// get the ratio of the select area to the src image
					var calcWidth = this.calcW();
					var calcHeight = this.calcH();
					// ratios for the dimensions of the preview image
					var dimRatio = { 
						x: this.imgW / calcWidth, 
						y: this.imgH / calcHeight 
					}; 
					//ratios for the positions within the preview
					var posRatio = { 
						x: calcWidth / this.previewWrapArray[i].width, 
						y: calcHeight / this.previewWrapArray[i].height 
					};
					
					// setting the positions in an obj before apply styles for rendering speed increase
					var calcPos	= {
						w: Math.ceil( this.previewWrapArray[i].width * dimRatio.x ) + 'px',
						h: Math.ceil( this.previewWrapArray[i].height * dimRatio.y ) + 'px',
						x: '-' + Math.ceil( this.areaCoords.x1 / posRatio.x )  + 'px',
						y: '-' + Math.ceil( this.areaCoords.y1 / posRatio.y ) + 'px'
					}
					
					// resize and move the image in the preview area
					var previewStyle 	= this.previewImg[i].style;
					previewStyle.width 	= calcPos.w;
					previewStyle.height	= calcPos.h;
					previewStyle.left	= calcPos.x;
					previewStyle.top	= calcPos.y;
				}
			}
		}
	}
	
});