/**
 * Panoram Images Loader
 * loads big image in 3 steps:
 *   1) load low quality image (small file size);
 *   2) load medium quality image;
 *   3) load high quality image;
 *
 * example of usage:
 *	Tau_PanoramImagesLoader.init(
 *		[
 *			{low:'img1_low.jpg', medium:'img1_medium.jpg', high:'img1_high.jpg'},
 *			{low:'img2_low.jpg', medium:'img2_high.jpg'},
 *			{low:'img3_high.jpg'}
 *		],
 *		'/template/home/images/',
 *		'ImagePanel'
 *	);
 *	window.onload = function() {
 *		Tau_PanoramImagesLoader.updateImage();
 *	}
 */
var Tau_PanoramImagesLoader = {

	elId: 'Panoram',
	panImagesPath: '/template/home/images/',
	panImages: null,
	loadStep: 0,
	PanImgCache: new Image(),
	asBackground: true,
	currentImg: 0,

	/**
	 * Initilize properties
	 * @param array list of images name as [{low:'img1_low.jpg', medium:'img1_medium.jpg', high:'img1_high.jpg'}, ...]
	 * @param string path to images
	 * @param string id of DOM element where to load images
	 * @param boolean true if images should set as background-image else element must be a <IMG />
	 *		  if element not a <IMG /> this param set to true automaticaly
	 */
	init: function(pan_images, pan_images_path, element_id, as_background) {
		this.panImages = pan_images;
		if(arguments.length > 1) {
			this.panImagesPath = pan_images_path;
			if(arguments.length > 2) {
				this.elId = element_id;
			}
		}
		this.currentImg = Math.floor(Math.random() * pan_images.length);
		var ths = this;
		this.PanImgCache.src = this.panImagesPath + this.panImages[this.currentImg].low;
		this.PanImgCache.onload = function() {
			if(ths.loadStep > 0 && ths.loadStep < 3) {
				ths.updateImage();
			}
		}
	},

	updateImage: function() {
		var el = document.getElementById(this.elId);
		if(!el) {
			setTimeout(this.updateImage(), 200);
			return;
		}
		if(!this.asBackground && el.src) {
			el.src = this.PanImgCache.src;
		}else {
			el.style.backgroundImage = 'url(' + this.PanImgCache.src + ')';
		}
		if(this.loadStep < 3) {
			this.loadStep++;
			if(this.loadStep == 1 && this.panImages[this.currentImg].medium) {
				this.PanImgCache.src = this.panImagesPath + this.panImages[this.currentImg].medium;
			}else if(this.loadStep == 2 && this.panImages[this.currentImg].high) {
				this.PanImgCache.src = this.panImagesPath + this.panImages[this.currentImg].high;
			}
		}
	}

}