/***************************************************************************************************
* AGI Media - GUI Library
********************************
*
* purpose:
*    => define reusable GUI classes
*         > ImageSwitch:
*              created by function
*                 - AGIMedia_GlobNet_HTML_JS_createImageSwitch()
*
* depends on:
*    => jquery.js
*    => AGIMedia.js
*
***************************************************************************************************/

///////////////////////////////////////////////////////////////////////////////////////////////////
// CLASS: ImageSwitch
//-------------------------------------------------------------------------------------------------
AGIMedia_GUILib.createImageSwitch = function($container, urlArray, width, height)
{
	var THIS =  {
// DATA MEMBERS
//-------------------------------------------------------------------------------------------------
		$container: $container,
		urls: urlArray,
		width: width,
		height: height,
		currImg: 0,
		lastImg: -1,
		
// GUI MEMBERS
//-------------------------------------------------------------------------------------------------
		$imgs: null,

// INTERNAL METHODS
//-------------------------------------------------------------------------------------------------
		createImage: function(url, width, height, hidden)
		{
			var cssHiddenStr = hidden ? "none" : "block";
			var backgroundImageStr = "background-image: url(" + url + "); background-position: 0px 0px; ";
			var sourceStr = url;
			var $img = $("<img src=\"" + sourceStr + "\" />");
			$img.css({
				width: width,
				height: height,
				display: cssHiddenStr
			});
			$container.append($img);
		},
		
		positiveModulo: function(val, mod)
		{
			var ret = val % mod;
			while(ret < 0)
				ret += mod;
			return ret;
		},

// EXTERNAL METHODS
//-------------------------------------------------------------------------------------------------
		showImage: function(num)
		{
			this.currImg = num;
			if(this.currImg != this.lastImg) {
				$(this.$imgs[this.currImg]).css("display", "block");
				$(this.$imgs[this.lastImg]).css("display", "none");
			}
			this.lastImg = this.currImg;
		}
	};

// CONSTRUCTOR
//-------------------------------------------------------------------------------------------------
	for(idx in THIS.urls)
		THIS.createImage(THIS.urls[idx], THIS.width, THIS.height, true);
	THIS.$imgs = THIS.$container.find("img");
	THIS.showImage(0);
//-------------------------------------------------------------------------------------------------
	return THIS;
}

//-------------------------------------------------------------------------------------------------
///////////////////////////////////////////////////////////////////////////////////////////////////