// simple function for handling strings and variables better
var s = function( string, values )
	{
		if (values != null)
		{
			for ( key in values ){
				var regex = new RegExp("\\{"+key+"\\}",'g');
				string = string.replace( regex, values[key] );
			}
		}
	
		return string;
	}

// the Banner object!
var Banner = function (dictionary)
	{
		var me = this;
	
		// FAIRLY STATIC PROPERTIES
		this.image_url = dictionary.image_url; /* a string URL */
		this.link_url = dictionary.link_url; /* a string URL */
		this.html = dictionary.html || null; /* html containing content */
		this.cl = dictionary.cl || 'general';
	
		// A DYNAMIC PROPERTY
		var html = s('<a class="ban_banner {3}" href="{0}"><img src="{1}" /><span class="ban_text">{2}</span></a>',[ this.link_url, this.image_url, this.html, this.cl ]);
		this.el = $(html);
	}

// the BannerList object!
var BannerList = function ()
	{
		var me = this;
		var n = 0;
	
		this.currentbanner = 0;
		this.banners = new Array();
		this.stage = $('<div class="ban_stage"></div>');
		this.nav = $('<div class="ban_nav"></div>');
		this.nextbutton = $('<span class="ban_nextbutton">\u25C0</span>');
		this.prevbutton = $('<span class="ban_prevbutton">\u25B6</span>');

		this.add = function(banner) /* argument should be a Banner object */
			{
				me.banners.push(banner); /* add banner to the banners array */
				$(me.stage).append(banner.el); /* add banner to the stage */
				var navbutton = $('<span class="ban_navbutton">&bull;</span>'); /* create a navbutton */
				$(me.nav).append(navbutton); /* add the navbutton to the nav */
				var count = me.banners.length - 1; /* freeze the count */
				
				navbutton.click(function() /* add a click event to the navbutton */
					{
						me.goTo(count);
					}
				);
				$(this.nextbutton).click(this.goNext);
				$(this.prevbutton).click(this.goPrev);
				$(banner.el).hide();
				return me;
			};
		
		this.render_in_element = function(el) /* argument should be an element we want to render the banner within */
			{
				$(el).html(''); /* empty anything already in there. */
				$(el).append(me.nav);
				$(el).append(me.stage);
				$(me.banners[0].el).show();
				$(me.banners[0].el).addClass('active');
				$('.ban_nav span').eq(0).addClass('active');
				//$(me.nav).append(me.prevbutton);
				//$(me.nav).prepend(me.nextbutton);
								
				return me;
			};
		
		this.goNext = function()
			{
				if( me.currentbanner+1 == me.banners.length ){
					me.goTo(0);
				}else{
					me.goTo(me.currentbanner+1);
				}
			};
		
		this.goPrev = function()
			{
				if(me.currentbanner == 0){
					me.goTo(me.banners.length-1);
				}else{
					me.goTo(me.currentbanner-1);
				}
			};
	
		this.goTo = function(n) /* argument should be the banner index to go to */
			{
				
				/* change the nav button highlighted */
				$('.ban_nav span.active').removeClass('active');
				$('.ban_nav span').eq(n).addClass('active');
				
				$(me.banners[me.currentbanner].el).css('z-index','9000'); /* keep the current banner on top */
				$(me.banners[n].el).show(); /* show the new banner, but it will be hidden underneath */
				
				$(me.banners[me.currentbanner].el).fadeOut(1000,function(){ /* face out the current banner */
					$(this).css('z-index',0); /* when that's done, reset the z-indexes */
					$(this).removeClass('active'); /* remove the "active" from the banner we switched from */
					$(me.banners[n].el).addClass('active'); /* put it on the new banner */
					me.currentbanner = n; /* change the currentbanner property */
				});
			};
	}