/* Ultimate Fade-in slideshow (v2.4)
* Last updated: May 24th, 2010. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
//May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added.

var fadeSlideShow_descpanel={
	controls: [['images/fs_close.png',7,7], ['images/fs_restore.png',10,11], ['images/fs_loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
	fontStyle: 'normal 11px Verdana', //font style for text descriptions
	slidespeed: 200 //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.fadeduration=setting.fadeduration? parseInt(setting.fadeduration) : 500
	setting.curimage=(setting.persist)? fadeSlideShow.routines.getCookie("gallery-"+setting.wrapperid) : 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.randomize) //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 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
		var setting=slideshow.setting
		var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow
		setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main slideshow 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, width:'100%', height:'100%', background:'black'})
			.appendTo(setting.$wrapperdiv)
		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:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif
			.appendTo(setting.$wrapperdiv)
		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!="" && setting.descreveal!="none"){ //if at least one slide contains a description (versus feature is enabled but no descriptions defined) and descreveal not explicitly disabled
			fadeSlideShow.routines.adddescpanel($, setting)
			if (setting.descreveal=="always"){ //position desc panel so it's visible to begin with
				setting.$descpanel.css({top:setting.dimensions[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=="ondemand"){ //display desc panel on demand (mouseover)
				setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')})
				setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')})
			}
		}
		setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover
		setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false})
		if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
			$loadingimg.hide()
			slideshow.paginateinit($)
			slideshow.showslide(setting.curimage)
		}
		else{ //initialize slideshow when first image has fully loaded
			$loadingimg.hide()
			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.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
					}
				}
			})
			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
		}
		if (!isNaN(parseInt(keyword))){ //go to specific slide?
			this.showslide(parseInt(keyword))
		}
		else if (/(prev)|(next)/i.test(keyword)){ //go back or forth inside slide?
			this.showslide(keyword.toLowerCase())
		}
	},

	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.displaymode.pause)
			return
		}
		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)
		var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one
		var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
		$slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0})
		$slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0})
		if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown
			clearTimeout(setting.hidedesctimer) //clear hide desc panel timer
			slideshow.showhidedescpanel('hide', 0) //and hide it immediately
		}
		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)
				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)
				}
				if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){
					slideshow.showhidedescpanel('show')
					setting.hidedesctimer=setTimeout(function(){slideshow.showhidedescpanel('hide')}, setting.displaymode.pause-fadeSlideShow_descpanel.slidespeed)
				}	
				setting.currentstep+=1
				if (setting.displaymode.type=="auto"){
					if (setting.currentstep<=setting.totalsteps || setting.displaymode.cycles==0)
						setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
				}
			}) //end callback function
		setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background
		setting.fglayer=setting.bglayer
		setting.bglayer=(setting.bglayer==0)? 1 : 0
		setting.curimage=imgindex
		if (setting.$descpanel){
			setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
			if (setting.imagearray[imgindex][3]) //if this slide contains a description
				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)
	},

	showhidedescpanel:function(state, animateduration){
		var setting=this.setting
		var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]
		setting.$descpanel.stop().animate({top:endpoint}, (typeof animateduration!="undefined"? animateduration : 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.togglerid){ //if toggler div defined
			setting.$togglerdiv=$("#"+setting.togglerid)
			setting.$prev=setting.$togglerdiv.find('.prev').data('action', 'prev')
			setting.$next=setting.$togglerdiv.find('.next').data('action', 'next')
			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.$togglerdiv.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})
			}
	}

	
}

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;" />\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
	},

	adddescpanel:function($, setting){
		setting.$descpanel=$('<div class="fadeslidedescdiv"></div>')
			.css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:setting.dimensions[1], font:fadeSlideShow_descpanel.fontStyle, zIndex:'1001'})
			.appendTo(setting.$wrapperdiv)
		$('<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() //"descpanelbg" div
			.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.$wrapperdiv)


		}
	},


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

// *** SLIDESHOWS SETTINGS ***
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow_home", //ID of blank DIV on page to house Slideshow
	dimensions: [450, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [ // ["image_file", "link", "target", "description"]
		["http://www.bereniceelectrolysis.com/images/bebc_1.jpg", "", "", ""],
		["http://www.bereniceelectrolysis.com/images/bebc_2.jpg", "", "", ""],
		//["http://www.bereniceelectrolysis.com/images/bebc_3.jpg", "", "", ""],
		["http://www.bereniceelectrolysis.com/images/bebc_4.jpg", "", "", ""],
		["http://www.bereniceelectrolysis.com/images/bebc_5.jpg", "", "", ""],
		//["http://www.bereniceelectrolysis.com/images/bebc_6.jpg", "", "", ""],
		//["http://www.bereniceelectrolysis.com/images/bebc_7.jpg", "", "", ""],
		["http://www.bereniceelectrolysis.com/images/bebc_8.jpg", "", "", ""],
		//["http://www.bereniceelectrolysis.com/images/bebc_9.jpg", "", "", ""],
		["http://www.bereniceelectrolysis.com/images/bebc_10.jpg", "", "", ""],
		//["http://www.bereniceelectrolysis.com/images/bebc_11.jpg", "", "", ""],
		["http://www.bereniceelectrolysis.com/images/bebc_12.jpg", "", "", ""] //<--no trailing comma after very last image element!
		//["http://www.bereniceelectrolysis.com/images/bebc_13.jpg", "", "", ""],
		//["http://www.bereniceelectrolysis.com/images/bebc_14.jpg", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:6000, cycles:0, wraparound:false, randomize:true},
	//persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 4000, //transition duration (milliseconds) 3000 Regular days & 4000 in December
	descreveal: "peekaboo",
	togglerid: ""
})

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow_comp_hist", //ID of blank DIV on page to house Slideshow
	dimensions: [380, 285], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [ // ["image_file", "link", "target", "description"]
		["http://www.bereniceelectrolysis.com/images/company_1.jpg", "", "", "...Where an elegant body begins!"],
		["http://www.bereniceelectrolysis.com/images/company_2.jpg", "", "", "Our experienced team meets all your beauty needs"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false, randomize:false},
	//persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 4000, //transition duration (milliseconds)
	descreveal: "peekaboo",
	togglerid: ""
})

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow_services", //ID of blank DIV on page to house Slideshow
	dimensions: [380, 285], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [ // ["image_file", "link", "target", "description"]
		["http://www.bereniceelectrolysis.com/images/services_1.jpg", "", "", "Our experienced team meets all your beauty needs"],
		["http://www.bereniceelectrolysis.com/images/services_2.jpg", "", "", "You receive our full attention"],
		["http://www.bereniceelectrolysis.com/images/services_3.jpg", "http://www.bereniceelectrolysis.com/services_pg4.php#CelluliteTreatments", "_self", "Dermosonic Cellulite Treatment on Thighs"],
		["http://www.bereniceelectrolysis.com/images/services_4.jpg", "http://www.bereniceelectrolysis.com/services_pg3.php#HydraFacial", "_self", "HydraFacial Treatment"],
		["http://www.bereniceelectrolysis.com/images/services_5.jpg", "", "", "Wash &amp; Cranial Massage"],
		["http://www.bereniceelectrolysis.com/images/services_6.jpg", "http://www.bereniceelectrolysis.com/services_pg4.php#CelluliteTreatments", "_self", "Stomach Dermosonic Cellulite Treatment"],
		["http://www.bereniceelectrolysis.com/images/services_7.jpg", "http://www.bereniceelectrolysis.com/services_pg3.php#LED", "_self", "Yellow LED Light Therapy"],
		["http://www.bereniceelectrolysis.com/images/services_8.jpg", "", "", "Men's Haircuts"],
		["http://www.bereniceelectrolysis.com/images/services_9.jpg", "http://www.bereniceelectrolysis.com/services_pg3.php#LED", "_self", "Blue LED Light Therapy"],
		//["http://www.bereniceelectrolysis.com/images/services_10.jpg", "http://www.bereniceelectrolysis.com/services_pg4.php#CelluliteTreatments", "_self", "Skintonic Cellulite Treatment on Legs"],
		["http://www.bereniceelectrolysis.com/images/services_11.jpg", "http://www.bereniceelectrolysis.com/services_pg3.php#LED", "_self", "Red LED Light Therapy"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:6000, cycles:0, wraparound:false, randomize:false},
	//persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 3000, //transition duration (milliseconds)
	descreveal: "peekaboo",
	togglerid: ""
})

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow_laser", //ID of blank DIV on page to house Slideshow
	dimensions: [400, 267], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [ // ["image_file", "link", "target", "description"]
		["http://www.bereniceelectrolysis.com/images/laser_1.jpg", "", "", "The Skin, Hair and Follicle close-up"],
		["http://www.bereniceelectrolysis.com/images/laser_2.jpg", "", "", "Enjoy a comfortable atmosphere"],
		["http://www.bereniceelectrolysis.com/images/laser_3.jpg", "", "", "Laser Hair Removal Lip Treatment"],
		["http://www.bereniceelectrolysis.com/images/laser_4.jpg", "", "", "Laser Treatments for Sun Spots"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:6000, cycles:0, wraparound:false, randomize:true},
	//persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 3000, //transition duration (milliseconds)
	descreveal: "peekaboo",
	togglerid: ""
})

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow_hair_salon", //ID of blank DIV on page to house Slideshow
	dimensions: [300, 375], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [ // ["image_file", "link", "target", "description"]
		["http://www.bereniceelectrolysis.com/images/hair_salon_1.jpg", "", "", "Men's Haircuts for All Occassions"],
		["http://www.bereniceelectrolysis.com/images/hair_salon_2.jpg", "", "", "Manicure &amp; Reflexology"],
		["http://www.bereniceelectrolysis.com/images/hair_salon_3.jpg", "", "", "Pedicure, Reflexology &amp; Paraffin Treatments"],
		["http://www.bereniceelectrolysis.com/images/hair_salon_4.jpg", "", "", "LED Light Hand Treatments"],
//		["http://www.bereniceelectrolysis.com/images/hair_salon_5.jpg", "", "", "Blow Dry &amp; Hair Treatments"],
//		["http://www.bereniceelectrolysis.com/images/hair_salon_6.jpg", "", "", "Head Massage &amp; Wash"],
//		["http://www.bereniceelectrolysis.com/images/hair_salon_7.jpg", "", "", "Haircuts for Women"],
		["http://www.bereniceelectrolysis.com/images/hair_salon_8.jpg", "", "", "Haircuts for Men in a Private Room"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:6000, cycles:0, wraparound:false, randomize:true},
	//persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 3000, //transition duration (milliseconds)
	descreveal: "peekaboo",
	togglerid: ""
})

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow_contact", //ID of blank DIV on page to house Slideshow
	dimensions: [300, 225], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [ // ["image_file", "link", "target", "description"]
		["http://www.bereniceelectrolysis.com/images/brochures.jpg", "", "", "Contact Us For a Brochure"],
		["http://www.bereniceelectrolysis.com/images/street_view.jpg", "http://www.mapquest.com/maps?1c=New+York&1s=NY&1z=10065&1qn=Berenice+Electrolysis&1y=US&1l=40.7645&1g=-73.9633&1v=ZIP&2c=New+York&2s=NY&2a=29+E+61st+St&2z=10065-8009&2y=US&2l=40.76462&2g=-73.96999&2v=ADDRESS", "_blank", "Click Here For Directions"],
		["http://www.bereniceelectrolysis.com/images/consult_rm.jpg", "", "", "Call 212-355-7055 for a Complimentary Consultation"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:6000, cycles:0, wraparound:false, randomize:false},
	//persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 3000, //transition duration (milliseconds)
	descreveal: "peekaboo",
	togglerid: ""
})

// IG - 10/26/2011 - After Oct 31 change the fadeshow_contact2 to fadeshow_contact and remove previous code for fadeshow_cotact right above
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow_contact2", //ID of blank DIV on page to house Slideshow
	dimensions: [300, 225], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [ // ["image_file", "link", "target", "description"]
		["http://www.bereniceelectrolysis.com/images/brochures.jpg", "", "", "Contact Us For a Brochure"],
		["http://www.bereniceelectrolysis.com/images/building_view.jpg", "http://maps.google.com/maps?rls=en&q=14+e+60th+st+new+york+ny&oe=UTF-8&um=1&ie=UTF-8&hq=&hnear=0x89c258f01ecddebd:0xbda67b2d7c0b059b,14+E+60th+St,+New+York,+NY+10022&gl=us&ei=nkaoTpz_IOHv0gHJmvCsDg&sa=X&oi=geocode_result&ct=title&resnum=1&ved=0CBsQ8gEwAA", "_blank", "Click Here For Directions"],
		["http://www.bereniceelectrolysis.com/images/consult_rm.jpg", "", "", "Call 212-355-7055 for a Complimentary Consultation"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:6000, cycles:0, wraparound:false, randomize:false},
	//persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 3000, //transition duration (milliseconds)
	descreveal: "peekaboo",
	togglerid: ""
})

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow_electrolysis", //ID of blank DIV on page to house Slideshow
	dimensions: [375, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [ // ["image_file", "link", "target", "description"]
		["http://www.bereniceelectrolysis.com/images/electrolysis_1.jpg", "", "", "Private Electrolysis Room"],
		["http://www.bereniceelectrolysis.com/images/electrolysis_2.jpg", "", "", "Shaping Eyebrows with Electrolysis"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:6000, cycles:0, wraparound:false, randomize:true},
	fadeduration: 3000, //transition duration (milliseconds)
	descreveal: "peekaboo",
	togglerid: ""
})

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow_gentle_peel", //ID of blank DIV on page to house Slideshow
	dimensions: [330, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [ // ["image_file", "link", "target", "description"]
		["http://www.bereniceelectrolysis.com/images/gentle_peel_1.jpg", "", "", ""],
		["http://www.bereniceelectrolysis.com/images/gentle_peel_2.jpg", "", "", ""],
		["http://www.bereniceelectrolysis.com/images/gentle_peel_3.jpg", "", "", ""],
		["http://www.bereniceelectrolysis.com/images/gentle_peel_4.jpg", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false, randomize:false},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 4000, //transition duration (milliseconds)
	descreveal: "none",
	togglerid: ""
})

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow_myotonology", //ID of blank DIV on page to house Slideshow
	dimensions: [330, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [ // ["image_file", "link", "target", "description"]
		["http://www.bereniceelectrolysis.com/images/myotonology_1.jpg", "", "", ""],
		["http://www.bereniceelectrolysis.com/images/myotonology_2.jpg", "", "", ""],
		["http://www.bereniceelectrolysis.com/images/myotonology_3.jpg", "", "", ""],
		["http://www.bereniceelectrolysis.com/images/myotonology_4.jpg", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false, randomize:false},
	persist: true, //remember last viewed slide and recall within same session?
	fadeduration: 4000, //transition duration (milliseconds)
	descreveal: "none",
	togglerid: ""
})

/*  EXPLAINATION IN HOW TO USE MULTIPLE OPTIONS ON SLIDESHOWS

Mark up wise each Slideshow should just be an empty DIV on the page with a unique ID:
<div id="fadeshow1"></div>
The DIV's ID value should match up with the value set in the option wrapperid in the code of webpage that calls function above.
When the page loads, the script will load the gallery into this DIV.

Here are all the available options when initializing each instance of Fade In Slideshow on the page.
AVAILABLE OPTIONS FOR NEW fadeSlideShow()
Each instance of a Fade In Slideshow is created by calling new fadeSlideShow() in the HEAD section of your page or at the end of this page:

var uniquevariable=new fadeSlideShow(options)

Where "uniquevariable" should be an arbitrary but unique variable (for each instance of Fade In Slideshow), and options is an object 
literal containing the desired options. Here's an explanation of each option:

1. wrapperid (Required): The ID of an empty DIV container on your page that will show the Fade In Slideshow.
Such a DIV on the page may look like this: <div id="fadeshow1"></div>
 
2. dimensions (Required): The dimensions of the slideshow in the format [width_int, height_int] with pixels being the assumed unit. 
These two values should be set to the dimensions of the largest image. Any image within the slideshow with width or height that exceeds 
the specified values will be clipped partially. 

3. imagearray (Required): An array containing the images you wish to show. Each array element contains 4 parts:
["path_to_image", "optional_url", "optional_linktarget", "optional_description"]
Enter a blank string ("") for the optional parts you do not wish to define. Here's a complete example:

imagearray: [
 ["pool.jpg"],
 ["http://mysite.com/cave.jpg", "http://cnn.com"],
 ["fruits.jpg", "http://cnn.com", "_new"],
 ["dog.jpg", "", "", "This image has a description but no hyperlink"] //<--no trailing comma after very last image element!
],
Notice how there should be no comma trailing the very last element!
 
4. displaymode (Required): Sets the primary attributes of your slideshow, from whether this is an automatic or manual slideshow, 
the pause between slides, to the number of cycles before the slideshow stops in automatic mode. The syntax is:
displaymode: {type:'auto|manual', pause:milliseconds, cycles:0|integer, wraparound:true|false, randomize:true|false},

The "cycles" option when set to 0 will cause the slideshow to rotate perpetually in automatic mode, while any number larger 
than 0 means it will stop after x cycles.

The "warparound" option when set to false will disable the user's ability in manual mode to go past the very first and last slide 
when clicking on the navigation links to manually view the slides.

The "randomize" option when set to true will shuffle the display order of the images, so they appear in a different order each time 
the page is loaded.

In the following, the slideshow will auto run and stop after 3 complete cycles. Each time the page is reloaded, the order of the images 
randomly changes:
displaymode: {type:'auto', pause:3000, cycles:3, wraparound:true, randomize:true},

In the following, the slideshow will be put in manual mode, with the ability to loop back to the beginning of the slideshow disabled:
displaymode: {type:'manual', pause:2000, cycles:0, wraparound:false},

In manual mode, you must define your own "prev" and "next" controls to let the user control the slideshow. See "togglerid" option 
below for more info.
 
5. persist - Defaults to false - Boolean variable that decides whether the slideshow should remember and recall the last viewed slide 
within a browser session when the page is reloaded. 

6. fadeduration - Defaults to 500 - The duration of the fade effect when transitioning from one image to the next, in milliseconds. 

7. descreveal - Defaults to "ondemand" - For a slideshow in which at least one image has a description associated with it, this option 
dictates the style of the Description Panel. The four possible values are:
- 1."ondemand": Reveals the description when the user mouses over the slideshow, then hides it again when the mouse moves out.
- 2."always": Shows a persistent description panel at the foot of the slideshow that can be dismissed by clicking on the "x" icon.
- 3."peekaboo": (v2.4 feature). Reveals the description for each image automatically by sliding it in view each time, then hiding it 
again before the next image is shown. This setting is similar to "always" above, except the description isn't always visible, allowing 
viewers to see each image in its entirety momentarily.
- 4."none": Explicitly disables the descriptions from showing. While not defining a description for any of your images inside the 
initialization code has a similar effect, this option is useful when you wish to define descriptions, but just not show them using 
one of the methods above, but rather, in combo with the onslide() event handler for example.
 
8. togglerid - Defaults to "" - Use this option if you wish to create navigational controls that allow the user to explicitly move back 
and forth between slides, whether the slideshow is in "auto" or "manual" mode. Set "togglerid" to the ID of another DIV on your page that 
will house the navigation controls for the slideshow, ie:
togglerid: "slideshowtoggler"
The DIV on the page with the corresponding ID attribute will be parsed by the script for links carrying a certain CSS class.
 
CREATING THE NAVIGATION LINKS FOR A MANUAL SLIDESHOW
If you wish to create navigational controls that allow the user to explicitly move back and forth between slides, you need to manually 
define a DIV and create links inside it to act as "Prev" and "Next" buttons. Such a DIV looks like this:

<div id="slideshowtoggler">
<a href="#" class="prev"><img src="left.png" style="border-width:0" /></a> <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="right.png" style="border-width:0" /></a>
</div>

The ID attribute of this DIV (ie: "slideshowtoggler") should correspond to the value set inside the togglerid option of fadeSlideShow(options). 
Then, inside this DIV, simply create the desired links with one of the following two CSS class names to give it special meaning:

• prev: A link with this CSS class moves back the shown content by 1.
• next: A link with this CSS class moves forward the shown content by 1.

You can also display a status control anywhere inside this DIV showing the current slide being shown relative to the others (ie: 3/5) 
using a SPAN with the CSS class:
• status: A SPAN with this CSS class will be emptied and used by the script to display the current slide's order.

With that in mind, which links to show, how they are arranged, and how they are styled are all up to you.

NOTICE ABOUT doctype & IE
Note that the CSS used to style this script assumes that your page contains a valid doctype at the very top in order to display properly. 
This is especially true in IE. HTML 5 advocates the use of the very simple valid doctype:
<!DOCTYPE HTML>
at the top of your page's source.

*/