/* 
* Last updated: November 18th, 2009. This notice must stay intact for usage 
* Author: Mark Welch (allevia GmbH)
* based on  Ultimate Fade-in slideshow  from dynamicdrive
*/

//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize

var fadeSlideShow_descpanel={
	controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and canvasdimensions of close, restore, and loading images
	 //font style for text descriptions
	slidespeed: 1000 //speed of description panel animation (in millisec)
}

//No need to edit beyond here...

jQuery.noConflict()

function fadeSlideShow(settingarg){
	this.setting=settingarg
	settingarg=null
	var setting=this.setting
	setting.rheight = (setting.ratiodimensions)? setting.ratiodimensions[1] : 1
	setting.rwidth = (setting.ratiodimensions)? setting.ratiodimensions[0] : 1
	setting.fadelength=setting.displaymode.fadelength? parseInt(setting.displaymode.fadelength) : 2000
	setting.curimage=(setting.persist)? fadeSlideShow.routines.getCookie("gallery-"+setting.canvasid) : 0
	setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
	setting.currentstep=0 //keep track of # of slides slideshow has gone through (applicable in displaymode='auto' only)
	setting.totalsteps=setting.imagearray.length*(setting.displaymode.cycles>0? setting.displaymode.cycles : Infinity) //Total steps limit (applicable in displaymode='auto' only w/ cycles>0)
	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(){}
	if (setting.displaymode.random) //randomly shuffle order of images?
		setting.imagearray.sort(function() {return 0.5 - Math.random()})
	var preloadimages=[] //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++){ //preload images
		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 img = new Image();
	/* ( Imageloader falls die Bilddimensionen noch nicht vor gegeben ist) 
	img.onload = function() { setting.rheight = this.height
									setting.rwidth = this.width
								}
	img.src = ( setting.imagearray[0][0] ) */
	var closebutt=fadeSlideShow_descpanel.controls[0] //add close button to "desc" panel if descreveal="always"
	setting.closebutton=(setting.descreveal=="always")? '<img class="close" src="'+closebutt[0]+'" style="float:right;cursor:hand;cursor:pointer;width:'+closebutt[1]+'px;height:'+closebutt[2]+'px;margin-left:2px" title="Hide Description" />' : ''
	var slideshow=this
	jQuery(document).ready(function($){ //fire on DOM ready
	if(navigator.appVersion.indexOf("MSIE 6")== "-1"){
	var setting=slideshow.setting
	if (setting.displaymode.resize){
			jQuery(document).find('body').css({background: 'white'})
						
		slideshow.resize($)
		}
		var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow
		setting.$canvasdiv=$('#'+setting.canvasid).css({visibility:'visible', overflow:'hidden', width:setting.canvasdimensions[0], height:setting.canvasdimensions[1], zIndex: setting.canvasindex}).empty() //main slideshow DIV
		if (setting.displaymode.resize){
			jQuery(document).find('body').css({background: 'white'})	
		}
		
		if (setting.$canvasdiv.length==0){ //if no wrapper DIV found
			//alert("Error: DIV with ID \""+setting.canvasid+"\" 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, width:'100%', height:'100%'})
			//.appendTo(setting.$canvasdiv)
			var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+';height:'+fadeSlideShow_descpanel.controls[2][2]+'" />')
			.css({left:0, top:0}) //center loading gif
		
		var $curimage=setting.$gallerylayers.html(fullhtml).find('img').hide().eq(setting.curimage) //prefill both layers with entire slideshow content, hide all images, and return current image
		if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled)
			if (setting.descreveal=="solid") { fadeSlideShow.routines.adddescpanell($, setting)} 
			else if (setting.descreveal=="extra") { fadeSlideShow.routines.controlldiv($, setting) }
			else { fadeSlideShow.routines.adddescpanel($, setting) }
			if (setting.descreveal=="always"){ //position desc panel so it's visible to begin with
				setting.$descpanel.css({top:setting.canvasdimensions[1]-setting.panelheight})
				setting.$descinner.click(function(e){ //asign click behavior to "close" icon
					if (e.target.className=="close"){
						slideshow.showhidedescpanel('hide') 
					}
				})
				setting.$restorebutton.click(function(e){ //asign click behavior to "restore" icon
					slideshow.showhidedescpanel('show')
					$(this).css({visibility:'hidden'}) 
				})
			}
			else if (setting.descreveal =="on demand"){ //display desc panel on demand (mouseover)
				 setting.$canvasdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')})
				 setting.$canvasdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')})
			}
		}
		if (!setting.displaymode.hoveroff){
				setting.$canvasdiv.bind('mouseenter', function(){setting.ismouseover=true}) 		//pause slideshow mouseover
				setting.$canvasdiv.bind('mouseleave', function(){setting.ismouseover=false})
		}
		if (setting.displaymode.resize){
				$(window).bind('resize', function(){ 
					slideshow.resize($)
					setting.$canvasdiv.css( { top:0, left: 0, height: setting.canvasdimensions[1] ,width: setting.canvasdimensions[0] })
		
				})
		}
		if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
			$loadingimg.hide()
			setting.$gallerylayers.appendTo(setting.$canvasdiv)
			slideshow.paginateinit($)
			slideshow.showslide(setting.curimage)
		}
		else{ //initialize slideshow when first image has fully loaded
			$loadingimg.hide()
			setting.$gallerylayers.appendTo(setting.$canvasdiv)
			slideshow.paginateinit($)
			$curimage.bind('load', function(){slideshow.showslide(setting.curimage)})
		}
		setting.oninit.call(slideshow) //trigger oninit() event
		$(window).bind('unload', function(){ //clean up and persist
			if (slideshow.setting.persist) //remember last shown image's index
				fadeSlideShow.routines.setCookie("gallery-"+setting.canvasid, 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
					}
				}
			})
			slideshow=slideshow.setting=null
		})
	}})
}

fadeSlideShow.prototype={

	navigate:function(keyword){
		var setting=this.setting
		clearTimeout(setting.playtimer)
		if (setting.displaymode.type=="auto"){ //in auto mode
			//setting.displaymode.type="manual" //switch to "manual" mode when nav buttons are clicked on
			setting.displaymode.wraparound=true //set wraparound option to true
		}
		else if (/(prev)|(next)/i.test(keyword)){ //go back or forth inside slide?
			this.showslide(keyword.toLowerCase())
		}
	},
	
	jumpslide:function(index){

		var slideshow=this
		var setting=slideshow.setting
		if (!setting.cblock){
			setting.cblock = true
			setting.cb = setTimeout( function () {  setting.cblock = false }, setting.fadetime, function() { 
			clearTimeout(setting.cb)})
		
			setting.jcheck = true
			setting.firstrun='on'
			clearTimeout(setting.playtimer)
			slideshow.showslide((index))}
	},
	
	showslide:function(keyword){
		var slideshow=this
		var setting=slideshow.setting
		if (setting.displaymode.type=="auto" && setting.ismouseover && setting.currentstep<=setting.totalsteps){ //if slideshow in autoplay mode and mouse is over it, pause it
			setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, (setting.imagearray[setting.curimage][4])? (setting.imagearray[setting.curimage][4]): setting.displaymode.showlength )
			setting.jcheck = 0
			return
		}
		var totalimages=setting.imagearray.length
		var imgindex;
		if(keyword=="next") {imgindex = (setting.curimage<totalimages-1? setting.curimage+1 : 0) ;}
		else if (keyword=="prev") {  imgindex = (setting.curimage>0? setting.curimage-1 : totalimages-1) ; }
		else{ imgindex = (Math.min(keyword, totalimages-1)); }
		var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one
		setting.fadetime = (!setting.firstrun)? 1 : setting.fadelength
		var imgcanvasdimensions=[$slideimage.width(), $slideimage.height()] //center align image
		//$slideimage.css({marginLeft: (imgcanvasdimensions[0]>0 && imgcanvasdimensions[0]<setting.canvasdimensions[0])? setting.canvasdimensions[0]/2-imgcanvasdimensions[0]/2 : 0})
		//$slideimage.css({marginTop: (imgcanvasdimensions[1]>0 && imgcanvasdimensions[1]<setting.canvasdimensions[1])? setting.canvasdimensions[1]/2-imgcanvasdimensions[1]/2 : 0})
		setting.$gallerylayers.eq(setting.bglayer).css({zIndex:(setting.canvasindex+1), opacity:0}) //background layer becomes foreground
			.stop().css({opacity:0}).animate({opacity:1},setting.fadetime, function(){ //Callback function after fade animation is complete:
				clearTimeout(setting.playtimer)
				try{
					setting.onslide.call(slideshow, setting.$gallerylayers.eq(setting.fglayer).get(0), setting.curimage)
				}catch(e){
					//alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
				}
				setting.currentstep+=1
				if (setting.displaymode.type=="auto"){
					if (setting.currentstep<=setting.totalsteps || setting.displaymode.cycles==0)
						//tk: duration of display first item
						setting.jumpdur = 15000 
						setting.playtimer=setTimeout(function(){
							setting.firstrun='on'
							slideshow.showslide('next')
							}, ((setting.imagearray[setting.curimage][4])?(!(setting.jcheck)? setting.imagearray[setting.curimage][4] :  setting.jumpdur): setting.displaymode.showlength))
						setting.jcheck = false
				}
			}) //end callback function
		if ( setting.descreveal=="solid"){ slideshow.animatetext(setting.descfx, imgindex) }
		else if ( setting.descreveal=="extra") { slideshow.animatediv(imgindex, totalimages)}
		
		setting.$gallerylayers.eq(setting.fglayer).css({zIndex:setting.canvasindex-1})		//foreground layer becomes background
		setting.fglayer=setting.bglayer
		setting.bglayer=(setting.bglayer==0)? 1 : 0
		
		if(setting.navifloater && setting.$navidiv){ slideshow.actslider(imgindex,totalimages) } 
		else if(setting.$navidiv){ slideshow.changecurrent(imgindex,totalimages) }
		else { setting.curimage=imgindex }	
		
		if (!((setting.descreveal == 'solid') || (setting.descreveal == 'extra'))){
		
		if(setting.$descpanel)
			setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
		if (setting.imagearray[imgindex][3] && (setting.$descinner)) 
			setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3]) 
		}	
		if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){
			this.paginatecontrol()
		}
		if (setting.$status) //if status container defined
			setting.$status.html(setting.curimage+1 + "/" + totalimages)
		
	},
	animatetext:function(effekt, imgindex) {
	var setting=this.setting

	if (effekt== "fade"){
					setting.$descpanel.css({visibility:'visible'})
					setting.$descinner.eq(setting.bglayer).hide().empty().html(setting.closebutton + setting.imagearray[imgindex][3])	
					setting.$descinner.eq(setting.bglayer).css({zIndex: (setting.descindex+2)})
					setting.$descinner.eq(setting.fglayer).fadeOut(setting.fadetime*(1/2), function(){
					setting.$descinner.eq(setting.fglayer).css({zIndex: (setting.descindex+1)})
					setting.$descinner.eq(setting.fglayer).fadeIn(setting.fadetime*(1/2)) })
					
				/*setting.$descpanel.css({visibility:'visible'})
				setting.$descinner.eq(setting.fglayer).stop().css({opacity: 1}).animate({ opacity: 0 }, setting.fadetime)
				setting.$descinner.eq(setting.bglayer).empty().html(setting.closebutton + setting.imagearray[imgindex][3])				
				setting.$descinner.eq(setting.bglayer).stop().css({opacity: 0}).animate({ opacity: 1 }, setting.fadetime)*/
				
				}
				if (effekt == "drop"){
					setting.$descinner.eq(0).css({visibility:'hidden'}).end()
					setting.$descinner.eq(1).css({visibility:'hidden'}).end()
					setting.$descpanel.css({top: setting.descposition[1]-setting.panelheight})
					setting.$descinner.eq(0).css({visibility:'visible'})
					setting.$descpanel.css({visibility:'visible'})
					setting.$descpanel.css({top: setting.descposition[1] }).animate({top: setting.descposition[1]-setting.panelheight}, (setting.fadetime*(2/3)), function () {
					setting.$descinner.eq(0).empty().html(setting.closebutton + setting.imagearray[imgindex][3])				
					setting.$descpanel.css({top: setting.descposition[1]-setting.panelheight}).animate({top: setting.descposition[1] }, (setting.fadetime*(2/3)))
				
					})
				}
				if (effekt == "slide"){
					setting.$descinner.eq(1).css({visibility:'hidden'}).end()
					setting.$descinner.eq(0).css({visibility:'visible'}).end()
					setting.$descpanel.css({visibility:'visible'})
					setting.$descpanel.css({height: setting.panelheight }).animate({height: 0}, (setting.fadetime*(1/2)), function () {
					setting.$descinner.eq(0).empty().html(setting.closebutton + setting.imagearray[imgindex][3])			
					setting.$descpanel.css({height: 0}).animate({height: setting.panelheight }, (setting.fadetime*(1/2)))
					
					})				
				}
	
	},
	animatediv:function(imgind, totalimages){
		var setting = this.setting
		var panel1 = setting.$descpanel.find("#text_"+(setting.curimage<=totalimages-1? setting.curimage : 0)).show()
		var panel2 = setting.$descpanel.find("#text_"+(imgind<=totalimages-1? imgind : 0)).hide()
		var panel1_h2 = panel1.find('h2')
		var panel2_h2 = panel2.find('h2')
		var panel1_a = panel1.find('a')
		var panel2_a = panel2.find('a')
		var panel1_copy = panel1.find('p')
		var panel2_copy = panel2.find('p')
		panel1_a.css({ color: setting.$descpanel.css("color") }).animate({ color: setting.$descpanel.css("background-color")  }, setting.fadetime/2)
		panel2_a.css({ color: setting.$descpanel.css("background-color") })
		panel2_h2.css({ color: setting.$descpanel.css("background-color") })
		panel2_copy.css({ color: setting.$descpanel.css("background-color") })
		panel1_h2.css({ color: setting.$descpanel.css("color") }).animate({ color: setting.$descpanel.css("background-color")  }, setting.fadetime/2)
		panel1_copy.css({ color: setting.$descpanel.css("color") }).animate({ color: setting.$descpanel.css("background-color")  }, setting.fadetime/2, function(){
			panel2_h2.css({ color: setting.$descpanel.css("background-color") })
			panel2_copy.css({ color: setting.$descpanel.css("background-color") })
			panel1.css({zIndex: (setting.descindex-1)}).hide()
			panel2.css({zIndex: (setting.descindex+2)}).show()
			panel2_h2.animate({color: setting.$descpanel.css("color")}, setting.fadetime/2)
			panel2_copy.animate({color: setting.$descpanel.css("color")},setting.fadetime/2)
			panel2_a.animate({color: setting.$descpanel.css("color")},setting.fadetime/2)
		})
	}, 
	
	actslider:function(imgind, totalimages) {
		var setting = this.setting
		setting.$floater = setting.$navidiv.find('.floater')
	
		setting.$navidiv.find('#slide'+(setting.curimage<=totalimages-1? setting.curimage : 0)).addClass('navi_item').removeClass('current_item')	
		setting.curimage=imgind
		setting.$navidiv.find('#slide'+(setting.curimage<=totalimages-1? setting.curimage : 0)).addClass('current_item') 
		setting.$floater.stop().animate({left: setting.$navidiv.find('.current_item').position().left}, setting.fadetime/3, 'swing' ,function(){
		setting.$navidiv.find('#slide'+(setting.curimage<=totalimages-1? setting.curimage : 0)).removeClass('navi_item')
		})
		if(setting.navifloater=="hover"){
		setting.$navidiv.find('.navi_item').hover( function(){
		setting.$floater.stop().animate({left: setting.$navidiv.find('#'+this.id).position().left},150)
		},function(){
		setting.$floater.stop().animate({left: setting.$navidiv.find('.current_item').position().left},150, function(){
		setting.$navidiv.find('#slide'+(setting.curimage<=totalimages-1? setting.curimage : 0)).removeClass('navi_item') }) })
		}
		if(setting.navifloater!='hover'){
		setting.$navidiv.find('.navi_item').hover( function(){ setting.$navidiv.find('#'+this.id.replace('slide','naba')).removeClass('naviback_item').addClass('naviback_item_hover')}, function(){ setting.$navidiv.find('.naviback_item_hover').removeClass('naviback_item_hover').addClass('naviback_item')})
		}
	},
	
	changecurrent:function(imgind, totalimages) {
		var setting = this.setting
		setting.$navidiv.find('#slide'+(setting.curimage<=totalimages-1? setting.curimage : 0)).addClass('navi_item').removeClass('current_item')	
		setting.curimage=imgind
		setting.$navidiv.find('#slide'+(setting.curimage<=totalimages-1? setting.curimage : 0)).addClass('current_item').removeClass('navi_item')
	},
	
	showhidedescpanel:function(state, showcontrol){
	if (setting.descreveal!="solid") {
		var setting=this.setting
		var endpoint = (state=="show")? setting.canvasdimensions[1]-setting.panelheight : this.setting.canvasdimensions[1]
		setting.$descpanel.stop().animate({top:endpoint}, fadeSlideShow_descpanel.slidespeed, function(){
			if (setting.descreveal=="always" && state=="hide")
				setting.$restorebutton.css({visibility:'visible'}) //show restore button
		}) }
	},

	paginateinit:function($){
		var slideshow=this
		var setting=this.setting
		
		if (setting.naviid){ //if navi div defined
			navi_HTML = fadeSlideShow.routines.getNavigation(setting.imagearray, setting.navifloater, setting.naviindex)	
			setting.$navidiv=$("#"+setting.naviid)
			setting.$navidiv.empty().html(navi_HTML).end()
			
			setting.$prev=setting.$navidiv.find('.prev').data('action', 'prev')
			setting.$next=setting.$navidiv.find('.next').data('action', 'next')
			setting.$navidiv.find('.navi_item').add().click( function(e){ //assign click behavior to prev and next controls
				var $target=this.id.replace("slide","")				
				slideshow.jumpslide(parseInt($target))
				
			})
			
			setting.$prev.add(setting.$next).click(function(e){ //assign click behavior to prev and next controls
				var $target=$(this)
				slideshow.navigate($target.data('action'))
				e.preventDefault()
				
			})
			setting.$status=setting.$navidiv.find('.status')
		}

	},

	paginatecontrol:function(){
		var setting=this.setting
			setting.$prev.css({opacity:(setting.curimage==0)? 0.4 : 1}).data('action', (setting.curimage==0)? 'none' : 'prev')
			setting.$next.css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1}).data('action', (setting.curimage==setting.imagearray.length-1)? 'none' : 'next')
			if (document.documentMode==8){ //in IE8 standards mode, apply opacity to inner image of link
				setting.$prev.find('img:eq(0)').css({opacity:(setting.curimage==0)? 0.4 : 1})
				setting.$next.find('img:eq(0)').css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1})
			}
	},
	resize: function($) {
		var setting = this.setting
		var ratio = (setting.rheight/setting.rwidth)
		var maxh = $(window).height()
		var maxw = $(window).width()
		if ( (maxh/maxw) > ratio){
			setting.canvasdimensions[0]	= Math.round(setting.rwidth*(maxh/setting.rheight))
			setting.canvasdimensions[1]	 = maxh
		} 
		else if ( ( maxh/maxw) < ratio){
		setting.canvasdimensions[1] = Math.round(setting.rheight*(maxw/setting.rwidth))
		setting.canvasdimensions[0] = maxw
	}
	
	}
	
}

fadeSlideShow.routines={

	getSlideHTML:function(imgelement){
		var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
		layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0; width: 100%; height:100%;" />\n'
		layerHTML+=(imgelement[1])? '</a>\n' : ''
		return layerHTML //return HTML for this layer
	},

	getFullHTML:function(imagearray){
		var preloadhtml=''
		for (var i=0; i<imagearray.length; i++)
			preloadhtml+=this.getSlideHTML(imagearray[i])
		return preloadhtml
	},
	
	getNaviPoint:function(imgelement, index, tzind){
		var layerHTML='<div id="slide'+index+'" class ="navi_item" style=" position:relative;float: left; top:0 ; left:0px; zIndex:'+(tzind+3)+';">'  //hyperlink slide?
		layerHTML+= (imgelement[3]!='')? imgelement[3]:'Picture'+(index+1)
		layerHTML+='</div>\n'
		return layerHTML //return HTML for this layer  preloadhtml+=this.getSlideHTML(imagearray[i])
	},
	
	getNavigation:function(imagearray, navifloater, tzind){
		var navihtml='<div class="naviback" style="position:absolute; left:0px; top:0px; zIndex:'+tzind+';">\n'
		for (var i=0; i<imagearray.length; i++)
			navihtml+='<div class="naviback_item" id="naba'+i+'" style=" position: relative; float: left; top:0 , left:0px; zIndex:'+(tzind+1)+';"></div>\n'
		navihtml+='</div>\n'
		navihtml+= (navifloater)? '<div class="floater_back" style="position:absolute; zIndex:'+tzind+';"><div class="floater" style="position:relative; left:0px; top:0px; zIndex:'+(tzind+2)+';"> </div></div>\n' : ''
		navihtml+= '<div class="navibar" style="position:absolute; top:0px; left:0px;">\n'
		for (var i=0; i<imagearray.length; i++)
			navihtml+=this.getNaviPoint(imagearray[i], i, tzind)
		navihtml+='</div>\n'
		return navihtml	
	},

	adddescpanel:function($, setting){
		setting.$descpanel=$('<div class="fadeslidedescdiv"></div>')
			.css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:setting.canvasdimensions[1],  zIndex: setting.descindex})
			.appendTo(setting.$canvasdiv)
		$('<div class="descpanelbg"></div><div class="descpanelfg"></div>') //create inner nav panel DIVs
			.css({position:'absolute', left:0, top:0, width:setting.$descpanel.width()-8, padding:'4px'})
			.eq(0).css({background:'black', opacity:0.7}).end() 
			.eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div
			.appendTo(setting.$descpanel)
		setting.$descinner=setting.$descpanel.find('div.descpanelfg')
		setting.panelheight=setting.$descinner.outerHeight()
		setting.$descpanel.css({height:setting.panelheight}).find('div').css({height:'100%'})
		if (setting.descreveal=="always"){ //create restore button
			setting.$restorebutton=$('<img class="restore" title="Restore Description" src="' + fadeSlideShow_descpanel.controls[1][0] +'" style="position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:'+fadeSlideShow_descpanel.controls[1][1]+'px;height:'+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />')
				.appendTo(setting.$canvasdiv)


		}
	},
	
	controlldiv:function($, setting){
		setting.$descpanel=$("#"+setting.descid)
		setting.$descpanel.find('.extralayer').hide()
	
	},
	
		adddescpanell:function($, setting){
		setting.$descpanel=$("#"+setting.descid).empty()
		.css({position:'relative', visibility:'hidden', overflow: 'hidden', left: setting.descposition[0], top: setting.descposition[1], zIndex: setting.descindex})
		setting.$descinner = $('<div class="descpanelfg"></div><div class="descpanelfg"></div>') //create inner nav panel DIVs
			.css({position:'relative', left:0, top:0, width: setting.$descpanel.width() , padding: '4px' })
			.eq(0).css({position:'relative', color: setting.$descpanel.css("color"), zIndex: setting.descindex+2}).empty().html(setting.closebutton + "").end()
			.eq(1).css({position:'relative', color: setting.$descpanel.css("color"), zIndex: setting.descindex+1}).empty().html(setting.closebutton + setting.longestdesc).end()
			.appendTo(setting.$descpanel)
			setting.panelheight = ( setting.$descinner.eq(1).outerHeight()+8 )
		setting.$descinner.eq(0).css({height: setting.panelheight})
		setting.$descinner.eq(1).css({height: setting.panelheight})		
	},

	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=/"
	}
}