/*myslide - Tehmina Beg
 *my version of wideslide - though i pretty much rewrote it from scratch
 *this one does not to create a new div strucutre and replace your unordered list based on preconfigured options
 *here the options are globals and myslide width/height should be in your css
 *this one centers the image to the container 
 *so unless your image is wider than your container, they won't get cut off and become inaccessible to click events
 *this also provides callbacks for previous, next and beginning buttons
 *code is cleaner so hopefully it's easier to customize
*/

$(document).ready(function() {

	$(".ms_image").click(centerImage);
	$(".next").click(nextImage);
	$(".prev").click(prevImage);
	$(".beginning").click(gotoBeginning);

	var speed = 300;
	var container_width = 886;
	var container_center = container_width / 2;
	var container = $(".gallery_container");
	var container_offset = container.offset().left;
	var myslide = $(".myslide");
	var images = $(".myslide").find('img');
	var image;
	var next;
	var prev;
	var beginning = 0;
	

	/*centerImage
	 *centers an image based on container and image width
	 *if $(this) is undefined, then this function was called programmatically and should use the passed in _image
	 *else, use $(this) because it was invoked by image click event
	 *calculate target position and offset
	 *subtract offset from current myslide margin (slides the actual image set left/right)
	*/	
	function centerImage(_image){

		if ($(this).attr('src') == undefined) {
			image = _image;
		} else {
			image = $(this);
		}
		
		next = image.next(".ms_image");
		prev = image.prev(".ms_image");
		
		var image_width = image.width();
		
		var target_position = (container_width/2) - (image_width/2);
		var current_position = image.offset().left;
		var actual_offset = (current_position - target_position) - container_offset;
		
		var myslide = image.parent();
		var curr_margin = myslide.offset().left - container_offset; 
		if (prev.attr('src') == undefined){
			var new_margin = 0;
		} 
		else {
			var new_margin = curr_margin - actual_offset;
		}
		
		myslide.animate({ marginLeft: new_margin + 'px'}, speed);
		return false;
						
	}
	
	/*nextImage
	 *find which image lies on container center point and dub it "current"
	 *the image after it is "next", 
	 *if this is the last image, assign next=this
	 *call centerImage(next)
	*/
	function nextImage(){			
		
		images.each(function() {
			
			var img_left = $(this).offset().left;
			var img_width = $(this).width();
			
			if ((img_left < container_center) && ((img_left + img_width) > container_center)){				
				if($(this).next().attr('src') == undefined) {
					next = $(this);
				} else {
					next = $(this).next(); 
				}				
			}
			
		});
		
		centerImage(next);
		return false;
	}
	
	/*prevImage
	 *find which image lies on container center point and dub it "current"
	 *the image after it is "prev", call centerImage(next)
	*/
	function prevImage(){			
		
		images.each(function() {
			
			var img_left = $(this).offset().left;
			var img_width = $(this).width();
			
			if ((img_left < container_center) && ((img_left + img_width) > container_center)){
				prev = $(this).prev(); 
			}
			
		});
		
		centerImage(prev);
		return false;
	}
	
	function gotoBeginning() {
		myslide.animate({ marginLeft: beginning + 'px'}, speed);
		return false;
	}
	
});