//Chompy's Scroll and Fade Slideshow Plugin!

/*
How to initalize...

$(document).ready(function() {
	$(".slideshow").chompSlide({'duration' : 8000});
});

How to setup slides...

<div class="slideshow">
	<div>
		<img src="myimage.png" to="0px 0px" from="100px 100px" />
		<span>Caption goes here!</>
	</div>
	<div>
		<img src="myimage2.png" to="0px 0px" from="100px 100px" />
		<span>Another caption</span>
	</div>
</div>


*/

(function($){
	$.fn.chompSlide = function(options) {
		
	//Slideshow Arrays[None of these values should be changed.]
	var slide_images = new Array();	//Array of image URL
	var slideto = new Array();		//Array of image starting positions
	var slidefrom = new Array();	//Array of image ending positions
	var slide_count = 0;			//Total number of slides.
	var slide_current = 0;			//Current slide number.
	
	
	var defaults = {duration: 8000, bgcolor: '#FFFFFF',  corners: 'slideshow_roundcorner.png', throbber: 'js/slideshow-loader.gif'};	//Default Values.
  
	var options = $.extend(defaults, options);
	
	//Prepare Throbber
	this.css({'background-image' : 'url('+options['throbber']+')', 'background-position' : 'center center', 'background-repeat' : 'no-repeat'});
	this.children("div").css({'visibility' : 'hidden'});
	
	//Wait till window load.
  return this.each(function() {
	  var container = this;
	  
		$(container).children("div").children("img").css({"display" : "none"});
		tpos = $(container).position();
		$(container).css({'overflow' : 'hidden', 'z-index' : '9'});
		$(container).children("div").each(function() {	//Scan each DIV within the slideshow DIV.
		  slide_images[slide_count] = $(this).children("img").attr("src");	//Scan each IMG tag and grab it's SRC.
			slideto[slide_count] = $(this).children("img").attr("to");			//Scan the TO property to grab the starting position.
		  	slidefrom[slide_count] = $(this).children("img").attr("from");		//Scan the FROM property to grab the ending position.
			$(this).attr("id",'s_'+slide_count);	//Add an ID to the slide DIV.
			$(this).children("span").css({'display' : 'block', 'position' : 'absolute', width: $(this).children("span").innerWidth() });	//Add CSS properties to the caption SPAN.
			$(this).children("span").attr({"class" : "caption"});
			$(this).css({'background-image' : 'url('+slide_images[slide_count]+')','background-color' : options['bgcolor'] ,'background-repeat' : 'no-repeat' ,'position' : 'absolute', 'overflow' : 'hidden', 'width' : $(container).width(), 'height' : $(container).height(), 'left' : tpos.left, 'top' : tpos.top, 'visibility' : 'hidden'}); 	//Add CSS properties to slide DIV.
			slide_count++;
	  });
	  //Rounded Corners
	  cright = $(container).width() + tpos.left - 25;
	  cbottom = $(container).height() + tpos.top - 16;
	  ctop = tpos.top;
	  if(options['corners']) {
	    //$(container).append('<div class="cs_corner" style="position:absolute; width:16px; height:16px; background-image: url(js/'+options['corners']+'); background-position: left top; z-index:10; left: '+tpos.left+'px; top:'+ctop+'px; margin-top:0px; "></div>');						//Top Left
	    $(container).append('<div class="cs_corner" style="position:absolute; width:16px; height:16px; background-image: url(js/'+options['corners']+'); background-position: right top; z-index:10; left:'+cright+'px; top:'+ctop+'px; margin-top:0px; "></div>');							//Top Right
	    //$(container).append('<div class="cs_corner" style="position:absolute; width:16px; height:16px; background-image: url(js/'+options['corners']+'); background-position: left bottom; z-index:10; left: '+tpos.left+'px; top: '+cbottom+'px; margin-top:0px; "></div>');	//Bottom Left
	    $(container).append('<div class="cs_corner" style="position:absolute; width:16px; height:16px; background-image: url(js/'+options['corners']+'); background-position: right bottom; z-index:10; left: '+cright+'px; top: '+cbottom+'px; margin-top:0px; "></div>');	//Bottom Right
	  }

    $(window).load(function() {
      $("#s_0").css({'visibility' : 'visible', 'opacity' : 0,'backgroundPosition' : slidefrom[0]});	//Make the first slide visible for load fading
      $(".cs_corner").css({'visibility' : 'visible'});							//Make corners visible.
      $("#s_0").animate({ 'opacity' : 1 },1200,'linear',function() {					//Animated fade.
		$(container).children("div").css({'visibility' : 'visible'});				//Make everything visible once fade is done.
		$(container).css({'background' : 'none transparent'});					//Remove Throbber.
      });	 
      initSlide();											//Init Slide
    });	
		
  });
 	
 		function initSlide() {	//Initalize a Slide.
			slide_next = slide_current + 1;
			if(slide_next == slide_count) slide_next = 0;
			$("#s_"+slide_current).css({'z-index' : 2, 'backgroundPosition' : slidefrom[slide_current]});
			$("#s_"+slide_next).css({'z-index' : 1});
			setTimeout(goOpaque, options['duration'] - 1600);
			goAnimate();
		}
		function goAnimate() {	//Do all the animation.
			$("#s_"+slide_current).animate({
				backgroundPosition: slideto[slide_current]
			},{ duration: options['duration'], queue: false, easing: 'linear' });
			
			$("#s_"+slide_current).children("span").each(function() {
        from_pos = $(this).attr("from");
        if(from_pos) {
          from_pos = from_pos.split(" ");
          duration = $(this).attr("duration");
          start_time = parseInt($(this).attr("start"));

          if(!duration) duration = 3000;
                    
          if(from_pos[0] == "left") pos_x = $(this).width() * -1;
          else if(from_pos[0] == "right") pos_x = $(this).width() * 2
          else pos_x = from_pos[0];
          
          if(from_pos[1] == "top") pos_y = $(this).height() * -1;
          else if(from_pos[1] == "bottom") pos_y = $(this).height() * 2
          else pos_y = from_pos[1];
          
          if(from_pos[2] && from_pos[2] < 100) opac = from_pos[2];
          else opac = 100;
          
          opac = opac / 100;
          
          oleft = $(this).css("left");
          otop = $(this).css("top");
          gthis = $(this);
          
          $(this).css({ 'left' : pos_x+'px', 'top' : pos_y+'px', 'opacity' : opac });
          
          if(start_time) setTimeout(function() { captionAnim(gthis,duration,oleft,otop); },start_time);
          else captionAnim($(this),duration,oleft,otop);
          

        }
      });
			
		}
		function goOpaque() {	//Make the slide fade.
			slide_current++;
			if(slide_current == slide_count) slide_current = 0;
			initSlide();
			slide_previous = slide_current - 1;
			if(slide_previous < 0) slide_previous = slide_count - 1;
			$("#s_"+slide_previous).css({'z-index' : 3});
			$("#s_"+slide_previous).animate({
				opacity : 0
			},{duration: 1400, queue: false, easing: 'linear', complete: function() {
				$("#s_"+slide_previous).css({'z-index' : 0, 'opacity' : 1, 'backgroundPosition' : slidefrom[slide_previous]});
			} });	
		}
	   
    function captionAnim(gthis,duration,oleft,otop) {
     gthis.animate({
	     left: oleft,
	     top: otop,
	     opacity: '1'
	   },{ duration: parseInt(duration), queue: false });
    }

};
})(jQuery);