$(document).ready(function() {
 	
	$('#SlideshowControls img')
		.css('opacity','.65')
		.bind('mouseover', function(){
			$(this).css('opacity', '1');
		})
		.bind('mouseout', function(){
			$(this).css('opacity', '.65');
		});
		
 }); // jquery ends //
 
  	// slideshow
	var DRSlideshow=new simpleGallery({
	 wrapperid: "Slideshow", //ID of main gallery container,
	 dimensions: [960, 500], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
	 imagearray: [ 			
	  ["../_img/homepage/slides/slide01.jpg", "", "", ""],
	  ["../_img/homepage/slides/slide02.jpg", "", "", ""],
	  ["../_img/homepage/slides/slide03.jpg", "", "", ""],
	  ["../_img/homepage/slides/slide04.jpg", "", "", ""],
	  ["../_img/homepage/slides/slide05.jpg", "", "", ""],
	  ["../_img/homepage/slides/slide06.jpg", "", "", ""],
	  ["../_img/homepage/slides/slide07.jpg", "", "", ""],
	  ["../_img/homepage/slides/slide08.jpg", "", "", ""],
	  ["../_img/homepage/slides/slide09.jpg", "", "", ""]
	 ],
	 autoplay: [true, 2500, 100], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
	 persist: false,
	 fadeduration: 500, //transition duration (milliseconds)
	 oninit:function(){ //event that fires when gallery has initialized/ ready to run
	  //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause")
	 },
	 onslide:function(curslide, i){ //event that fires after each slide is shown
	   //Keyword "this": references current gallery instance
	   //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
	   //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
	 }
	}); // ends slideshow instance