;jQuery.ui.ImageSlideGallery || (function($) {



$.widget("ui.ImageSlideGallery", {



// options: provided by framework

// element: provided by framework



oldContent:null,



_init: function() 

{



	//alert('ImageSlideGallery');

	var self = this;

	//alert(this.oldContent)

	if (this.oldContent!=null) return;

	this.oldContent = this.element.html();

	

	//debugger;

	this.contentEditable = document.body.contentEditable=="true"//self.element[0].contentEditable=="true";

	//alert(this.contentEditable)

	

	

	this.isShowNavPanel = false;

	this.isShowDescript = false;

	this.alwaysShowDescription=true;



	this.iCurrentSlide = -1;

	this.fglayer=0;

	this.bglayer=1;

	this.bContinue = true;

	this.ispaused = false;

	

	this.images=this.element.find("div.template_WebTextEditorDesign div.gallerylayer");

	if (this.images.length==0)

		this.images=this.element.find("div.gallerylayer");

	this.totalimages = this.images.length;

	if (this.totalimages<2)

	{

		if (this.totalimages==1)

		{

			var description = this.element.find("div.gallerylayerdesc").html();

			if (description!="" && description!=null)

			{

				sHTML = '<DIV class="gallerydesc">';

				sHTML += '	<DIV class="gallerydescbg"></DIV>';

				sHTML += '	<DIV class="gallerydescfg">';

				sHTML += '		<DIV class="gallerydesctext">'+description+'</DIV>';

				sHTML += '	</DIV>';

				sHTML += '</DIV>';

				if (this.contentEditable)	

				{

					this.element.attr('contentEditable','false').attr('unselectable','off').attr('template_webtexteditorobject','yes');

					this.element.html('<DIV class="template_WebTextEditorConfig" contentEditable="false" unselectable="on">'+this.oldContent+'</DIV><DIV class="template_WebTextEditorDesign" unselectable="on">'+this.oldContent+'</DIV>');

				}

				this.element.append(sHTML)

				this.gallerydesc=this.element.find("div.gallerydesc");

				//this.gallerydesc.css('top',this.element.height()-this.gallerydesc.height());

				this.gallerydesc.css('top',0);

				//$(sHTML).prependTo(this.element);

			}

		}

	

		return;

	}

	this.autoplay=(this.element.attr('autoplay'))?this.element.attr('autoplay'):$.ui.ImageSlideGallery.defaults.autoplay;

	this.fadeduration=(this.element.attr('fadeduration'))?this.element.attr('fadeduration'):$.ui.ImageSlideGallery.defaults.fadeduration;



	var sHTML  = ''

		sHTML += '<DIV class="navpanellayer">'

		sHTML += '  <DIV class="navpanelbg"></DIV>';

		sHTML += '	<DIV class="navpanelfg">';

		sHTML += '		<IMG id="prev" class="navimages" title="Prev" style="MARGIN-RIGHT: 10px; TOP: -4px" src="'+$.ui.ImageSlideGallery.getUIPath()+'images/left.gif"/> ';

		sHTML += '		<IMG id="play" class="navimages" title="Play" style="MARGIN-RIGHT: 10px; TOP:  0px" src="'+$.ui.ImageSlideGallery.getUIPath()+'images/pause.gif"/> ';

		sHTML += '		<IMG id="next" class="navimages" title="Next" style="MARGIN-RIGHT: 0px;  TOP: -4px" src="'+$.ui.ImageSlideGallery.getUIPath()+'images/right.gif"/>';

		sHTML += '		<DIV class="gallerystatus">-/-</DIV>';

		sHTML += '	</DIV>';

		sHTML += '</DIV>';

		sHTML += '<DIV class="gallerydesc">';

		sHTML += '	<DIV class="gallerydescbg"></DIV>';

		sHTML += '	<DIV class="gallerydescfg">';

		sHTML += '		<DIV class="gallerydesctext">TEXT</DIV>';

		sHTML += '	</DIV>';

		sHTML += '</DIV>';



		

	if (this.contentEditable)	

	{

		this.element.attr('contentEditable','false').attr('unselectable','off').attr('template_webtexteditorobject','yes');

		

		this.element.html('<DIV class="template_WebTextEditorConfig" contentEditable="false" unselectable="on">'+this.oldContent+'</DIV><DIV class="template_WebTextEditorDesign" unselectable="on">'+this.oldContent+'</DIV>');

		//this.element.find('.template_WebTextEditorDesign *').attr('unselectable','on');

		

		this.images=this.element.find("div.template_WebTextEditorDesign div.gallerylayer");

		if (this.images.length==0)

			this.images=this.element.find("div.gallerylayer");

		this.totalimages = this.images.length;

		

		

	}	

	

	

	//$(sHTML).prependTo(this.element);

	this.element.append(sHTML)

	//return;

	//alert(this.element.height());	

	this.navpanellayer=this.element.find("div.navpanellayer");

	this.navpanellayer.css('top',this.element.height());

	

	this.btnPlay=this.navpanellayer.find("img#play");

	

	this.gallerystatus=this.element.find("div.gallerystatus");

	this.gallerydesc=this.element.find("div.gallerydesc");

	this.gallerydescText=this.gallerydesc.find("div.gallerydesctext"); 

	 

	this.gallerydescbg=this.gallerydesc.find("div.gallerydescbg");

	this.gallerydescfg=this.gallerydesc.find("div.gallerydescfg");

	this.gallerydescText.bind('resize', function()

			{

			/*	var h = self.gallerydescText.height();

				if (h>0) h=h+3;

				if (h!=self.gallerydesc.height())

				{

					if (self.isShowNavPanel)

					{

						if (h>0)

						{

							self.gallerydesc.css('top', -h)

							self.gallerydesc.css('height', h)

							self.showhidedecript("show");				

						}

					}

					else

					{

						self.gallerydesc.css('top', 0)

						self.gallerydesc.css('height', h)

						self.showhidedecript("hide");				

					

					}

				}	*/	

				self.gallerydesc.css('height',self.gallerydescText.height());

			/*	var h = self.gallerydescText.height();

				if (h>0) h=h+3;

				if (h!=self.gallerydesc.height()) 

				{

					self.gallerydesc.css('height',h);

				}*/

				//self.gallerydesc.css('top',self.isShowNavPanel ? 0: -self.gallerydescText.height())

				

					//var h = this.gallerydescText.height();

					//if (h>0) h=h+3;

					//	descript.css('height',h);

					//	descript.css('top',this.isShowNavPanel ? 0: -h)

								

				

			});

	

	

	//debugger;

		

		

	

	if (this.contentEditable)	

	{

		this.navpanellayer.attr('contentEditable','false').attr('unselectable','on');

	/*	this.navpanellayer.each(function (i) 

		{

			$(this).attr('contentEditable','false').attr('unselectable','off');

			$(this).find('*').attr('unselectable','on');

		});

		*/

		this.gallerydesc.each(function (i) 

		{

			$(this).attr('contentEditable','false').attr('unselectable','on');

			$(this).find('*').attr('unselectable','on');

		});



		this.element.find("div.template_WebTextEditorDesign").attr('unselectable','on');

		this.element.find("div.template_WebTextEditorDesign *").attr('unselectable','on');

		this.images.find("div.gallerylayerdesc").attr('contenteditable','false');

		

	

	}

	

	



	



	this.gallerydescText.html(this.images.eq(0).find("div.gallerylayerdesc").html());

	this.navpanellayer.find("img.navimages").css({opacity:0.8})

			.bind('mouseover mouseout', function(e){

				$(this).css({opacity:(e.type=="mouseover")? 1 : 0.8})

			})

			.bind('click', function(e){

				var keyword=e.target.title.toLowerCase()

				self.navigate(keyword) //assign behavior to nav images

			})

	this.element.bind('mouseenter', function(){self.showhidenavpanel('show')});

	this.element.bind('mouseleave', function(){self.showhidenavpanel('hide')});

	this.showslide("next");

	



//	alert(this.element.find("div.template_WebTextEditorDesign").html());	





	//debugger;

	 //this.element.html();



},



showslide:function(keyword)

{

		var slideshow=this

		var oldImgIndex = this.curimage;

		var ImgIndex=(keyword=="next")? (this.curimage<this.totalimages-1? this.curimage+1 : 0)

			: (keyword=="prev")? (this.curimage>0? this.curimage-1 : this.totalimages-1)

			: Math.min(keyword, this.totalimages-1)

		

		this.images.eq(oldImgIndex).css({zIndex:999, opacity:1 });

		this.oldimage = oldImgIndex;

		this.images.eq(ImgIndex).css({zIndex:1000, opacity:0 })

			.stop().css({opacity:0}).animate({opacity:1},slideshow.fadeduration, function()

			{ //Callback function after fade animation is complete:

					clearTimeout(slideshow.playtimer)

					slideshow.iCurrentSlide+=1

					if (slideshow.bContinue && slideshow.iCurrentSlide==slideshow.totalimages) slideshow.iCurrentSlide=0;

					if (!slideshow.ispaused)

					{

					 	if (slideshow.iCurrentSlide<=slideshow.totalimages)

							slideshow.playtimer=setTimeout(function(){slideshow.showslide('next')}, slideshow.autoplay)

						else

							slideshow.navigate("play/pause")

					}

					slideshow.images.eq(slideshow.oldimage).css({zIndex:999, opacity:0 });

				}) //end callback function

		this.curimage=ImgIndex;	

		this.gallerystatus.html((this.curimage+1) + '/' + this.images.length);

	//	this.gallerydescText.html(this.images.eq(slideshow.curimage).find("div.gallerylayerdesc").html());

		if (this.alwaysShowDescription || this.isShowNavPanel)

		{

			 this.showhidedecript("show");

		}		



	if (this.contentEditable)	

	{

		//this.gallerydesc.css('height',this.gallerydescText.height());

	//this.gallerydescText.bind('resize', function(){self.gallerydesc.css('height',self.gallerydescText.height())});

//		$.log("gallerydescText="+this.gallerydescText.height()+"-"+this.gallerydescText.css('height')+"   gallerydesc="+this.gallerydesc.height()+"-"+this.gallerydesc.css('height')+"   "+"gallerydescfg="+this.gallerydescfg.height()+"-"+this.gallerydescfg.css('height')+"   "+"gallerydescbg="+this.gallerydescbg.height()+"-"+this.gallerydescbg.css('height')+"<br>")

	}

},



showhidenavpanel:function(state)

{

		

		var endpoint=this.element.height()

		if (state=="show") 	endpoint-=this.navpanellayer.height()

		this.navpanellayer.stop().animate({top:endpoint}, this.fadeduration)

		//this.gallerydesc.css('height',this.gallerydescText.height());

		

	

		this.isShowNavPanel = (state=="show");

		if (!this.alwaysShowDescription) this.showhidedecript(state);	

},



showhidedecript:function(state)

{

	//var h = this.gallerydescText.height();

	//if (h>0) h=h+3;

	

	

	var self=this;

	//$.log("showhidedecript "+state+"<br>");

	var descript=this.gallerydesc;

	if (descript)

	{

	//	descript.css('height',h);

	//	descript.css('top',this.isShowNavPanel ? 0: -h)

				

		if (state=="show")

		{

			if (this.alwaysShowDescription || this.isShowNavPanel)

			{

				if (this.isShowDescript)

				{

					

					this.isShowDescript = false;

					var endpoint=-descript.height();

					descript.stop().animate({top:endpoint}, this.fadeduration, null, function(){

								setTimeout(function(){self.showhidedecript('show')}, 1);

								} );

				}

				else

				{

					this.gallerydescText.html(this.images.eq(this.curimage).find("div.gallerylayerdesc").html());

					var h = this.gallerydescText.height();

					if (h>0) h=h+3;

					if (h!=descript.height())  descript.css('height',h);

					descript.css('top',-h);

					this.isShowDescript = true;

					descript.stop().animate({top:0}, this.fadeduration);

				}

			}

			

		}

		else

		{

		    if (this.isShowDescript)

			{

				this.isShowDescript = false;

				var endpoint=-descript.height();

				descript.stop().animate({top:endpoint}, this.fadeduration);//, null, function(){self.gallerydescText.html(self.images.eq(self.curimage).find("div.gallerylayerdesc").html());self.showhidedecript("show")} );

			}

		}		

		

	}

},





navigate:function(keyword){

		clearTimeout(this.playtimer)

		//this.totalsteps=100000 //if any of the nav buttons are clicked on, set totalsteps limit to an "unreachable" number 

		if (!isNaN(parseInt(keyword))){

			this.showslide(parseInt(keyword))

		}

		else if (/(prev)|(next)/i.test(keyword)){

			this.showslide(keyword.toLowerCase())

		}

		else{ //if play|pause button

			var slideshow=this

			if (!this.ispaused){ //if pause Gallery

			//	this.autoplay=false

				this.btnPlay.attr({title:'Play', src:$.ui.ImageSlideGallery.getUIPath()+'images/play.gif'})

			}

			else if (this.ispaused){ //if play Gallery

			//	this.autoplay=true

				this.playtimer=setTimeout(function(){slideshow.showslide('next')}, this.autoplay)

				this.btnPlay.attr({title:'Pause', src:$.ui.ImageSlideGallery.getUIPath()+'images/pause.gif'})

			}

			slideshow.ispaused=!slideshow.ispaused

		}

	},





log: function(msg) 

{

	if(!this.options.log) return;



	if(window.console && console.log) 

	{ // firebug logger

		console.log(msg);

	}

},



destroy: function() 

{

	this.element.html(this.oldContent);

	

	$.widget.prototype.apply(this, arguments); // default destroy

	

}



});



$.extend($.ui.ImageSlideGallery, 

{

	version: "0.1",

	getter: "length ", 

	urlPath:null,

	

	defaults:

	{

		autoplay:3500,

		fadeduration:1000

	},	

	

	getUIPath:function()

	{

		if (this.urlPath==null)

		{

			var oScripts=document.getElementsByTagName("script"); 

			var sUIPath="";

			for(var i=0;i<oScripts.length;i++)

			{

				var sSrc=oScripts[i].src;//.toLowerCase();

				if(sSrc.indexOf("ImageSlideGallery/ImageSlideGallery.js")!=-1)

				{

					sUIPath=oScripts[i].src.replace(/ImageSlideGallery.js/,"");

				}

			}

			this.urlPath = sUIPath ; //+ '/';

		}

		return this.urlPath ;

			

	}

}); 



})(jQuery);









/* END */

//debugger;

var ImageSlideGallery_navpanel={

	panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container

	images: [ $.ui.ImageSlideGallery.getUIPath()+'images/left.gif', $.ui.ImageSlideGallery.getUIPath()+'images/play.gif', $.ui.ImageSlideGallery.getUIPath()+'images/right.gif', $.ui.ImageSlideGallery.getUIPath()+'images/pause.gif'], //nav panel images (in that order)

	imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images

	slideduration: 500 //duration of slide up animation to reveal panel

}



function ImageSlideGallery(settingarg){

	this.setting=settingarg

	settingarg=null

	var setting=this.setting

	setting.panelheight=(parseInt(setting.navpanelheight)>5)? parseInt(setting.navpanelheight) : parseInt(ImageSlideGallery_navpanel.panel.height)

	setting.fadeduration=parseInt(setting.fadeduration)

	setting.resize=(setting.resize==null || setting.resize)?1:0;

	setting.curimage=(setting.persist)? ImageSlideGallery.routines.getCookie("gallery-"+setting.wrapperid) : 0

	setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty

	setting.ispaused=!setting.autoplay[0] //ispaused reflects current state of gallery, autoplay[0] indicates whether gallery is set to auto play

	setting.currentstep=0 //keep track of # of slides slideshow has gone through

	setting.totalsteps=setting.imagearray.length*setting.autoplay[2] //Total steps limit: # of images x # of user specified cycles

	setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)

	setting.oninit=setting.oninit || function(){}

	setting.onslide=setting.onslide || function(){}

	var preloadimages=[], longestdesc=null //preload images

	setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""

	for (var i=0; i<setting.imagearray.length; i++){

		preloadimages[i]=new Image()

		preloadimages[i].src=setting.imagearray[i][0]

		if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)

			setting.longestdesc=setting.imagearray[i][3]

	}

	var slideshow=this

	jQuery(document).ready(function($){

		var setting=slideshow.setting

		setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV

		if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found

			alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")

			return

		}

		setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide 

			.css({position:'absolute', left:0, top:0})

			.appendTo(setting.$wrapperdiv)

		setting.gallerylayers=setting.$gallerylayers.get() //cache stacked DIVs as DOM objects

		setting.navbuttons=ImageSlideGallery.routines.addnavpanel(setting) //get 4 nav buttons DIVs as DOM objects

		if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)

			setting.descdiv=ImageSlideGallery.routines.adddescpanel(setting)

		$(setting.navbuttons).filter('img.navimages').css({opacity:0.8})

			.bind('mouseover mouseout', function(e){

				$(this).css({opacity:(e.type=="mouseover")? 1 : 0.8})

			})

			.bind('click', function(e){

				var keyword=e.target.title.toLowerCase()

				slideshow.navigate(keyword) //assign behavior to nav images

			})

		setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidenavpanel('show')})

		setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidenavpanel('hide')})

		slideshow.showslide(setting.curimage) //show initial slide

		setting.oninit.call(slideshow) //trigger oninit() event

		$(window).bind('unload', function(){ //clean up and persist

			$(slideshow.setting.navbuttons).unbind()

			if (slideshow.setting.persist) //remember last shown image's index

				ImageSlideGallery.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)

			jQuery.each(slideshow.setting, function(k){

				if (slideshow.setting[k] instanceof Array){

					for (var i=0; i<slideshow.setting[k].length; i++){

						if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div

							slideshow.setting[k][i].innerHTML=null

						slideshow.setting[k][i]=null

					}

				}

				if (slideshow.setting[k].innerHTML) //catch gallerydesctext div

					slideshow.setting[k].innerHTML=null

				slideshow.setting[k]=null

			})

			slideshow=slideshow.setting=null

		})

	})

}



ImageSlideGallery.prototype={



	navigate:function(keyword){

		clearTimeout(this.setting.playtimer)

		this.setting.totalsteps=100000 //if any of the nav buttons are clicked on, set totalsteps limit to an "unreachable" number 

		if (!isNaN(parseInt(keyword))){

			this.showslide(parseInt(keyword))

		}

		else if (/(prev)|(next)/i.test(keyword)){

			this.showslide(keyword.toLowerCase())

		}

		else{ //if play|pause button

			var slideshow=this

			var $playbutton=$(this.setting.navbuttons).eq(1)

			if (!this.setting.ispaused){ //if pause Gallery

				this.setting.autoplay[0]=false

				$playbutton.attr({title:'Play', src:ImageSlideGallery_navpanel.images[1]})

			}

			else if (this.setting.ispaused){ //if play Gallery

				this.setting.autoplay[0]=true

				this.setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, this.setting.autoplay[1])

				$playbutton.attr({title:'Pause', src:ImageSlideGallery_navpanel.images[3]})

			}

			slideshow.setting.ispaused=!slideshow.setting.ispaused

		}

	},



	showslide:function(keyword){

		var slideshow=this

		var setting=slideshow.setting

		var totalimages=setting.imagearray.length

		var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)

			: (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)

			: Math.min(keyword, totalimages-1)

		setting.gallerylayers[setting.bglayer].innerHTML=ImageSlideGallery.routines.getSlideHTML(setting.imagearray[imgindex],setting)

		setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground

			.stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:

				clearTimeout(setting.playtimer)

				setting.gallerylayers[setting.bglayer].innerHTML=null  //empty bglayer (previously fglayer before setting.fglayer=setting.bglayer was set below)

				try{

					setting.onslide.call(slideshow, setting.gallerylayers[setting.fglayer], setting.curimage)

				}catch(e){

					alert("Simple Controls Gallery: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)

				}

				setting.currentstep+=1

				if (setting.autoplay[0]){

					if (setting.currentstep<=setting.totalsteps)

						setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.autoplay[1])

					else

						slideshow.navigate("play/pause")

				}

			}) //end callback function

		setting.gallerylayers[setting.fglayer].style.zIndex=999 //foreground layer becomes background

		setting.fglayer=setting.bglayer

		setting.bglayer=(setting.bglayer==0)? 1 : 0

		setting.curimage=imgindex

		setting.navbuttons[3].innerHTML=(setting.curimage+1) + '/' + setting.imagearray.length

		if (setting.imagearray[imgindex][3]||setting.link[2]){ //if this slide contains a description

			setting.$descpanel.css({visibility:'visible'})

			setting.descdiv.innerHTML=setting.imagearray[imgindex][3]?setting.imagearray[imgindex][3]:setting.link[2];

		}

		else if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled)

			setting.descdiv.innerHTML=null

			setting.$descpanel.css({visibility:'hidden'})



		}

	},



	showhidenavpanel:function(state){

		var setting=this.setting

		var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]

		setting.$navpanel.stop().animate({top:endpoint}, ImageSlideGallery_navpanel.slideduration)

		if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)

			this.showhidedescpanel(state)

	},



	showhidedescpanel:function(state){

		var setting=this.setting

		var endpoint=(state=="show")? 0 : -setting.descpanelheight

		setting.$descpanel.stop().animate({top:endpoint}, ImageSlideGallery_navpanel.slideduration)

	}

}



ImageSlideGallery.routines={



	getSlideHTML:function(imgelement,setting){

		var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : (setting.link[0])? '<a href="'+setting.link[0]+'" target="'+setting.link[1]+'">\n':'' //hyperlink slide?

		layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;'

		if (setting.resize)

		layerHTML+='width:'+setting.dimensions[0]+'px; height:'+setting.dimensions[1]+'px'

		layerHTML+='"/>'

		layerHTML+=(imgelement[1]||setting.link[0])? '</a>':''

		return layerHTML //return HTML for this layer

	},



	addnavpanel:function(setting){

		var interfaceHTML=''

		for (var i=0; i<3; i++){

			var imgstyle='position:relative; border:0; cursor:hand; cursor:pointer; top:'+ImageSlideGallery_navpanel.imageSpacing.offsetTop[i]+'px; margin-right:'+(i!=2? ImageSlideGallery_navpanel.imageSpacing.spacing+'px' : 0)

			var title=(i==0? 'Prev' : (i==1)? (setting.ispaused? 'Play' : 'Pause') : 'Next')

			var imagesrc=(i==1)? ImageSlideGallery_navpanel.images[(setting.ispaused)? 1 : 3] : ImageSlideGallery_navpanel.images[i]

			interfaceHTML+='<img class="navimages" title="' + title + '" src="'+ imagesrc +'" style="'+imgstyle+'" /> '

		}

		interfaceHTML+='<div class="gallerystatus" style="margin-top:1px">' + (setting.curimage+1) + '/' + setting.imagearray.length + '</div>'

		setting.$navpanel=$('<div class="navpanellayer"></div>')

			.css({position:'absolute', width:'100%', height:setting.panelheight, left:0, top:setting.dimensions[1], font:ImageSlideGallery_navpanel.panel.fontStyle, zIndex:'1001'})

			.appendTo(setting.$wrapperdiv)

		$('<div class="navpanelbg"></div><div class="navpanelfg"></div>') //create inner nav panel DIVs

			.css({position:'absolute', left:0, top:0, width:'100%', height:'100%'})

			.eq(0).css({background:'black', opacity:ImageSlideGallery_navpanel.panel.opacity}).end() //"navpanelbg" div

			.eq(1).css({paddingTop:ImageSlideGallery_navpanel.panel.paddingTop, textAlign:'center', color:'white'}).html(interfaceHTML).end() //"navpanelfg" div

			.appendTo(setting.$navpanel)

		return setting.$navpanel.find('img.navimages, div.gallerystatus').get() //return 4 nav related images and DIVs as DOM objects

	},



	adddescpanel:function(setting){

		setting.$descpanel=$('<div class="gallerydesc"><div class="gallerydescbg"></div><div class="gallerydescfg"><div class="gallerydesctext"></div></div></div>')

			.css({position:'absolute', width:'100%', left:0, top:-1000, zIndex:'1001'})

			.find('div').css({position:'absolute', left:0, top:0, width:'100%'})

			.eq(0).css({background:'black', opacity:ImageSlideGallery_navpanel.panel.opacity}).end() //"gallerydescbg" div

			.eq(1).css({color:'white'}).end() //"gallerydescfg" div

			.eq(2).html(setting.longestdesc).end().end()

			.appendTo(setting.$wrapperdiv)

		var $gallerydesctext=setting.$descpanel.find('div.gallerydesctext')

		setting.descpanelheight=$gallerydesctext.outerHeight()

		setting.$descpanel.css({top:-setting.descpanelheight, height:setting.descpanelheight}).find('div').css({height:'100%'})

		return setting.$descpanel.find('div.gallerydesctext').get(0) //return gallery description DIV as a DOM object

	},



	getCookie:function(Name){ 

		var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair

		if (document.cookie.match(re)) //if cookie found

			return document.cookie.match(re)[0].split("=")[1] //return its value

		return null

	},



	setCookie:function(name, value){

		document.cookie = name+"=" + value + ";path=/"

	}

}