// PLUGIN

jQuery.fn.jCarouselBigBox = function(supplied) {
	
	// default settings
	var settings = {
		thumb_w : "125",
		thumb_h : "90",
		large_w : "600",
		large_h : "400",
		transition : "scroll",
		large_container_id : "jCarBox-large-images",
		overlay_arrows : true,
		thumbs_overlay : false,
		thumbs_overlay_opacity : 80,
		thumbs_border_width: 0,
		thumbs_border_color: "#000",
		thumbs_prev : "jcbb-thumb-prev",
		thumbs_next : "jcbb-thumb-next",
		thumbs_hover_over : function() {},
		thumbs_hover_off : function() {},
		captions_on : false,
		captions_container : "jcbb-captions-container",
		captions_position : "overlay", // this tells me where the caption exists (overlay) the big image or (static) bar somewhere else
		current_image: 1
	};
	
	// Start by over-riding the defaults with the supplied object
	// ----------------------------------------------------------------
	$.each(supplied, function(k, v) {settings[k] = v;});
	
	// some shortcut variables
	// ----------------------------------------------------------------
	var bbox = $("#"+settings.large_container_id);	
	var tbox = $(this);
	var thumb_count = tbox.children("li").size();
	
		
	// Then we hide the big box images except for "active"
	// ----------------------------------------------------------------	
	bbox.addClass("jcbb-pic-container");
	bbox.css({height:settings.large_h+"px",width:settings.large_w+"px",position:"relative",overflow:"hidden"});
	$("#"+settings.large_container_id+" img").css({position:"absolute",top:"0px",left:"0px"});
	$("#"+settings.large_container_id+" img:not(.jcbb-active)").css("display","none");

	// JS in enabled so we can take advantage of that
	// ----------------------------------------------------------------
	$(".jcbb-thumbs-container").css("overflow","hidden");

	// make the thumbs ul large enough for all the floats
	var tmpw = thumb_count * settings.thumb_w;
	tbox.css("width",tmpw+"px");
	
	// Check to see if the overlay arrows on the big pics is enabled and if so add the markup
	if(settings.overlay_arrows) { add_overlay_arrows_to_big_pic(); }
	
	// check to see if there should be a transparent overlay on the thumbs
	// this option was moved to the thumbs handlers loop as we are already going through the links. No need to add another loop.
	//if(settigns.thumbs_overlay) { add_overlay_color_to_thumbs(); }
	
	// Check the transition to see if any setup is needed for the big image transitions
	// ----------------------------------------------------------------
	switch(settings.transition){
		default: setup_scroll_transition();
	}
	
	// check to see if captions are enabled
	
	if(settings.captions_on) { enable_captions(); }
	

	// Now we key the large and thumb images by the order they appear in the markup
	// ------------------------------------------------------------------------------
	var i = 1;
	bbox.children("img").each(function() {
		$(this).addClass("jcbb-pic-"+i); $(this).attr("rel",i); 	
		i++;
	});
	var i = 1;
	$(this).children("li").each(function() {
		var tmp = $(this).find("a"); tmp.addClass("jcbb-thumb-"+i); tmp.attr("rel",i);
		i++;
	})
	

	// Next we go through the thumbs and make/add the handlers
	// ----------------------------------------------------------------
	$(this).children("li").find("a").each(function() {
	
		// click handler
		$(this).click(function() {
			//var nxt = bbox.find("img[rel="+$(this).attr("rel")+"]");
			var nxt = parseInt($(this).attr("rel"));
			transition_to_pic(nxt);
			return false;
		});
		
		// hover handler
		$(this).hover(function(){
			settings.thumbs_hover_over($(this));
		}, function() {
			settings.thumbs_hover_off($(this));
		});
		
		// check to see if we need to add an overlay to this
		if(settings.thumbs_overlay) { add_overlay_color_to_thumb($(this)); }
		
	});
	
	// Next we set up the prev / next carousel buttons
	// ----------------------------------------------------------------
	
	$("."+settings.thumbs_prev).click(function(){ move_carousel(1); return false;});
	$("."+settings.thumbs_next).click(function(){ move_carousel(-1); return false; });
	
	
	
	

	
	
	////////////////////////////////////////////////////////////////////
	// FUNCTIONS ///////////////////////////////////////////////////////
	////////////////////////////////////////////////////////////////////
	
	function move_carousel(dir) {
		var x_amount = settings.thumb_w * Math.round(dir);
		var cur_x = tbox.css("margin-left").replace("px","");
		var new_x = Math.round(cur_x) + Math.round(x_amount);
		
		var cur_w_p = tbox.parent().width();
		var cur_w = tbox.width();
		
		if(new_x >= 1) { new_x = 0; }
		if((cur_w + new_x) < cur_w_p) { new_x = ((cur_w - cur_w_p) * -1) }
							
		tbox.animate({marginLeft:new_x+"px"},{duration:400,easing:"easeOutQuad",queue:true});
		
	}
	
	// Overlay arrows on big pic
	// ----------------------------------------------------------------
	
	function add_overlay_arrows_to_big_pic() {
		var markup = "";
			markup += "<a href=\"#\" class=\"jcbb-overlay-prev\">PREV</a>\r\n";
			markup += "<a href=\"#\" class=\"jcbb-overlay-next\">NEXT</a>\r\n";
		
		bbox.prepend(markup);
		
		$(".jcbb-overlay-prev").click(function() { 
			var nxt = settings.current_image - 1;
			if(nxt <= 0) { return false; }
			transition_to_pic(nxt);
			return false;
		});
		
		$(".jcbb-overlay-next").click(function() { 
			var nxt = settings.current_image + 1;
			if(nxt > thumb_count) { return false; }
			transition_to_pic(nxt);
			return false;
		});
		
	}
	
	// Thumbs update switchboard
	// this function updates the active class and tries to center the currently visable image thumb
	// ----------------------------------------------------------------
	
	function update_thumbs_active(cur,nxt) {
		tbox.find("a").removeClass("jcbb-active");
		$(".jcbb-thumb-"+nxt).addClass("jcbb-active");
		
		// try and center the thumbnail box on the active image.
		var cur_w_p = tbox.parent().width(); var cur_w = tbox.width();
		var min = ((cur_w - cur_w_p) * -1); var max = 0;

		var leftmar = (settings.thumb_w * nxt) - settings.thumb_w; // as if the thumb was sent to the left of the visiable carousel
		var half_container_width = Math.round(cur_w_p / 2); 
		var half_thumb_width = Math.round(settings.thumb_w / 2);
		
		var new_x = leftmar - half_container_width + half_thumb_width;
		new_x *= -1;
				
		if(new_x > max) { new_x = max; } else if( new_x < min) { new_x = min; }
		
		tbox.animate({marginLeft:new_x+"px"},{duration:400,easing:"easeOutQuad",queue:true});
	}
	
	
	// Pic transition switchboard
	// ----------------------------------------------------------------
	function transition_to_pic(nxt) {
		//var cur = bbox.find(".jcbb-active");
		  var cur = settings.current_image;
		
		// the big box transitions	
		switch(settings.transition){
			default: transition_scroll(cur,nxt);
		}
		
		// the thumbs box visual updates
		update_thumbs_active(cur,nxt);
		
		// update caption if enabled
		if(settings.captions_on) { update_caption(cur,nxt); }
		
		// update the global current
		settings.current_image = Math.round(nxt);
	}
	
	
	//  PIC Transitions setup
	// ----------------------------------------------------------------
	function setup_scroll_transition() {
		var i = 0;
		bbox.children("img").each(function() {
			var tmp = i * settings.large_w;
			$(this).css({left:tmp+"px",display:"inline"});
			i++;
		});
	}
	
	// The Pic transitions
	// ----------------------------------------------------------------
	function transition_scroll(cur,nxt) {
		//var diff = (settings.large_w * nxt.attr("rel")) - settings.large_w;
		var diff =  (settings.large_w * nxt) - settings.large_w;
		diff *= -1;

		var dur = 500;
	//	var extraTime = Math.round(cur.attr("rel")) - Math.round(nxt.attr("rel"));
		var extraTime = cur - nxt;
		if(extraTime < 0) { extraTime *= -1; } 
		extraTime -= 1; extraTime = extraTime * 250;

		dur += extraTime; // add a little extra time to transition between items that are further apart.

		bbox.children("img").animate({marginLeft:diff+"px"},{duration:dur,easing:"easeOutQuad"});
		bbox.find(".jcbb-active").removeClass("jcbb-active");
		bbox.find(".jcbb-pic-"+nxt).addClass("jcbb-active");
	}
	
	
	// Overlay colors on the thumbnails
	// ----------------------------------------------------------------
	
	function add_overlay_color_to_thumb(elem) {
		var markup = "<span class=\"jcbb-thumb-overlay\">&nbsp;</span>";
			elem.prepend(markup);
	}
	
	
	// Enable captioning
	// ----------------------------------------------------------------
	
	function enable_captions() {
		if(settings.captions_position == "overlay") { // if it is an overlay type hide the caption initially and then add text and animate up
			var cc = $("."+settings.captions_container);
			var b = cc.height() * -1;
				b += "px";
			cc.css({bottom:b});			
			if(tbox.find("a.jcbb-active").attr("title").length >= 1) {
				$("."+settings.captions_container).html('<p>'+tbox.find("a.jcbb-active").attr("title")+'</p>');
				animate_caption("up");
			}
		}
	}
	
	// animate the caption
	// ----------------------------------------------------------------
	
	function animate_caption(dir) {
		var cc = $("."+settings.captions_container);
		var h = cc.height();
		if(dir == "down") { h *= -1; } else { h = 0; }
		
		cc.animate({bottom:h+"px"},250);
	}
	
	// update caption
	// ----------------------------------------------------------------
	
	function update_caption(cur,nxt) {
		if(settings.captions_position == "overlay") { hijack_caption_update(cur,nxt); return;  }
		var tt = $(".jcbb-thumb-"+nxt).attr("title");
		if(tt.length <= 0) { tt = ""; } // no title property
		$("."+settings.captions_container).html('<p>'+tt+'</p>');
	}
	
	// because of the animation we need an order of operations
	// ----------------------------------------------------------------
	
	function hijack_caption_update(cur,nxt) {
		
		animate_caption("down");
		$("."+settings.captions_container).animate({marginLeft:"0px"},300,function() {
				var tt = $(".jcbb-thumb-"+nxt).attr("title");
				if(tt.length <= 0) { return; } // no title property
				$("."+settings.captions_container).html('<p>'+tt+'</p>');
				animate_caption("up");
		})
		
	}
	
	
}

// ----------------------------------------------------------------
// ----------------------------------------------------------------
// ----------------------------------------------------------------

$(document).ready(function () {
	
	var vars =  {
		thumb_w : "122",
		thumb_h : "64",
		large_w : "638",
		large_h : "341",
		large_container_id : "page-image",
		thumbs_next : "jcbb-thumb-next-1",
		thumbs_prev : "jcbb-thumb-prev-1",
		thumbs_overlay : true,
		captions_on: true,
		captions_container : "jcbb-captions-1"
	}
	
	$('#thumbs-list-1').jCarouselBigBox(vars);
	

	
});
// ----------------------------------------------------------------