/* ---------------------------------
  @ Image Loader
----------------------------------- */
function imageLoader() { this.init() }

imageLoader.prototype = {

	init : function()
	{
		// set root element
		this.elem = $('#content div.product');
		
		if (this.elem != undefined) {
			
			// set overlay
			this.overlay = this.elem.find("div.overlay");
			
			// set image refs
			this.image = this.elem.find("div.image p.product img");
			
			// store image details upon page load
			this.image.productid = this.image.parent().attr('productid');
			this.image.src = this.image.attr('src');
			this.image.path = this.image.src.substr( 0, (this.image.src.lastIndexOf('/')+1) );
			
			// set the image to the current <img> element
			this.setImage(this.image);
			
			// colourway label
			this.colourwaylabel = this.elem.find("div.image p.colourway");
			this.colourwaylabel.span = this.colourwaylabel.children('span');
			this.colourwaylabel.strong = this.colourwaylabel.children('strong');
			
		} else {
			console.log("ERROR - imageLoader cannot proceed");
		};
	},
	
	
	buildPath : function( elem )
	{
		// if a colourway, reform the img, else replace the image
		var colourway = elem.attr('colourwayid');
		
		// temporarily the new path to the original one
		var path = this.image.path;
		
		if (colourway != undefined) {
			path += this.image.productid + "-" + colourway + "-lg.jpg";
		} else {
			path += "additional/" + elem.attr('name') + "-lg.jpg";
		}
		
		return path;
	},
	
	
	/* -------------------------------
	  @ Load functions
	------------------------------- */
	showOverlay : function()
	{
		var theHeight = this.getImageHeight();
		if ( ! theHeight ) {
			theHeight = 0;
		}
		this.overlay.children('div').height( theHeight + 20 );
		this.overlay.show();
	},
	hideOverlay : function() { this.overlay.fadeOut('slow') },
	
	load : function( elem )
	{
		// store the activated link
		this.activated = elem;
		
		// build the url based on the incoming element
		var url = this.buildPath( this.activated );
		
		// show or hide the colourway label
		if (this.activated.attr('colourwayid') == undefined) {
			this.colourwaylabel.fadeOut('fast');
		};
		
		// clear interval
		clearInterval(this._loadinterval);
		
		// verify url and startLoad
		if (url != undefined) {
			this.startLoad(url);
		} else {
			console.log("ERROR - imageLoader cannot initialize load, url is undefined.");
		};
	},
	startLoad : function( url )
	{
		// set loading flag to true
		this._loading = true;
		
		// show the overlay
		this.showOverlay();
		
		// set reference image path (this will clear the previous ref)
		this.setRef();
		this.setRefSrc(url);
		
		// start monitoring interval
		var self = this;
		this._loadinterval = setInterval( function() { self.monitorLoad(); }, 500);
	},
	monitorLoad : function()
	{
		if (this.getRefWidth() > 0 && this.getRefHeight() > 0) {
			
			// clear interval
			clearInterval(this._loadinterval);
			
			// reset the colourway label
			if (this.activated.attr('colourwayid') != undefined) {
				this.colourwaylabel.find('strong').html( this.activated.attr('name') );
				this.colourwaylabel.fadeIn('normal');
			};
			
			// set the primary image source
			this.setImageSrc( this.getRefSrc() );
			
			// set width and height
			this.setImageWidth( this.getRefWidth() );
			this.setImageHeight( this.getRefHeight() );
		
			// hide overlay
			this.hideOverlay();
		
			// reset loading flag to false
			this._loading = false;
			
		}
	},
	
	
	
	/* -------------------------------
	  @ Zoom functions
	------------------------------- */
	zoom : function()
	{
		// replace "lg" with "xlg"
		var xlg = this.getImageSrc().replace('lg', 'xlg');
		
		// show the zoom
		overlayMgr.zoomImage({
			'path' : xlg,
			'width' : 700,
			'height' : 800
		});
	},
	
	
	/* -------------------------------
	  * Primary Image
	-------------------------------  */
	setImage : function( ref ) { this._image = ref },
	getImage : function() { return this._image; },
	
	// get/set zoom image
	setImageSrc : function( image ) { this.getImage().attr('src', image) },
	getImageSrc : function() { return this.getImage().attr('src') },
	
	// get set zoom width/height
	setImageWidth : function( width ) { this.getImage().attr('width', width) },
	getImageWidth : function() { return this.getImage().attr('width') },
	
	setImageHeight : function( height ) { this.getImage().attr('height', height) },
	getImageHeight : function() { return this.getImage().attr('height') },
	
	
	
	/* -------------------------------
	  @ Reference Image
	------------------------------- */
	setRef : function() 
	{ 
		this.clearRef();
		this._ref = new Image();
	},
	
	getRef : function() { return this._ref; },
	clearRef : function() { delete this._ref },
	
	// get/set zoom image src
	setRefSrc : function( image ) { this.getRef().src = image;},
	getRefSrc : function() { return this.getRef().src; },
	
	// get zoom image values
	getRefWidth : function() { return this.getRef().width; },
	getRefHeight : function() { return this.getRef().height; }
	
};