(function($)
{
    $.fn.extend(
    {
        // plug-in entry  
        buildSlider: function(options)
        {
            //Settings list and the default values  
            var defaults = 
            {
                delay: 6000,
				loop: true
            };
            
            var options = $.extend(defaults, options);
            
            return this.each(function()
            {
            	$(this).css("overflow", "hidden");
				
                // add a scroller properties.
				this.scroller = $.extend(defaults, options);
                this.scroller.delay = options.delay;
                this.scroller.width = this.clientWidth;
                
                // get all of the slides in the scroller.
                this.scroller.slides = $(this).children(".slide-page").toArray();
                
                // animate all of the slides in the scroller.
                for (var i = 0; i < this.scroller.slides.length; i++) 
                {
                    var slide = this.scroller.slides[i];
                    
                    // add a reference to the scroller to each slide
                    slide.scroller = this.scroller;
                    
                    // line up the slide
                    $(slide).css("left", this.scroller.width);
					$(slide).css("position", "absolute");
                    
                    
                    // get the div that contains the description
                    var desc = $(slide).children(".slide-description")[0];
                    
                    slide.description = {}
                    
                    // set the element as a background container for the description of the slide
                    slide.description.background = desc;
                    
                    // clone the description element to create an overlay layer that 
                    // creates the same element but with a transparent background
                    var overlay = $(desc).clone()[0];
                    $(overlay).appendTo(slide).css("background", "");
                    slide.description.context = overlay;
                    
                    // add slide functionality to the slide
                    slide.slide = function(type)
                    {
                        // this = slide
                        if (type == "in") 
                        {
                            $(this).css("left", this.scroller.width);
                            $(this.description.background).fadeTo(1, 0);
                            $(this.description.context).fadeTo(1, 0);
                        }
                        else if (type == "out") 
                        {
                            $(this).css("left", "0px");
                        }
                        
                        
                        var fun = function()
                        {
                            $(this.description.background).fadeTo("slow", 0.45);
                            $(this.description.context).fadeTo("slow", 1);
                        }
                        
                        // animate the slide
                        $(this).animate({
                            "left": "-=" + this.scroller.width + "px"
                        }, 1000, fun);
                    }
                }
                
				/**
				 * functions used to slide from the slider
				 * @param {Object} index
				 */
				this.scroller.setSlide = function(index)
				{
					
					//clearTimeout(this.loopTimeout);
					
					for(var i = 0; i < this.slides.length; i++)
					{
						$(this.slides[i]).clearQueue();
						$(this.slides[i].description.background).clearQueue();
						$(this.slides[i].description.context).clearQueue();
					}
					
					// if selecting a slide that is already selected, keep and 
					// place and loop if necessary
					if(index == this.currentSlide)
					{
						var scroller = this;
						if(this.loop)
						{
							//this.animate();
						}
						return;
					}
					
					// get the current slide
					var currSlide = this.slides[this.currentSlide];
					
					// align the current slide just in case it was interupted durring animation
					$(currSlide).css({ left: 0});	 
					
					
					// get the new slide
					var newSlide = this.slides[index]
					
					
					// align the new slide before it slides
					$(newSlide).css({ left: this.width});
					$(newSlide).css("left", this.width);
                    $(newSlide.description.background).fadeTo(1, 0);
                    $(newSlide.description.context).fadeTo(1, 0);
					
					
					// animate the current slide out
					$(currSlide).animate({"left": "-=" + this.width + "px"}, 
					{
						duration: 1000
					});
					
					var _scroller = this.scroller;
					
					// animate the new slide in
					$(newSlide).animate({"left": "-=" + this.width + "px"}, 
					{
						duration: 1000,
						complete: function()
						{
							
							// when the animation is complete, fade in the slide description
							$(this.description.background).fadeTo("slow", 0.45);
                    		$(this.description.context).fadeTo("slow", 1, function()
							{
								
								// after the description is displayed, loop if nessesary
								var parent = $(this).parent()[0];	
								var scroller = $(this).parent()[0].scroller;
								/*
								if(scroller.loop)
								{
									scroller.animate();
								}*/
							});
							
						}
					});// end of animation
					
					this.currentSlide = index;
						
				}
				
                // create a function that will animate the scroller
                this.scroller.animate = function()
				{
                    var nxt = (this.currentSlide + 1) % this.slides.length;
					this.setSlide(nxt);
     
                }
                
                this.scroller.currentSlide = -1;
                //$(this.scroller.slides[0]).css("left", "0px");
				this.scroller.selectSlide = function(index)
				{
					this.setSlide(index);
					clearInterval(this.intervalId);
					
					var scroller = this;
					this.intervalId = setInterval(function(){  scroller.animate(); }, this.delay)
				}
				this.scroller.selectSlide(0);
				
				
                
                var stop = 0;
                //-------------
            
            }); // end of return
        }
    });
})(jQuery);


//----------------------
(function($)
{
    $.fn.extend(
    {
        // plug-in entry  
        buildMarquee_original: function(options)
        {
            return this.each(function()
            {
            
                // //Settings list and the default values	
                var defaults = {
                    type: "step",
                    delay: 500,
                    direction: "left",
                    width: $(this).width(),
                    height: $(this).height(),
					step_duration : 500,
					loop: false
                };
                
                // prepare the marquee container 
                $(this).css({
                    position: "relative",
                    overflow: "hidden"
                });
                
                // add marquee attribute
                this.marquee = $.extend(defaults, options);
				
				this.marquee.container = this;
                
                // get the contents of the marquee
                var html = $(this).html();
                
                // clear the contents of the marquee
                $(this).empty();
                
                // clone the contents of the marquee into two div containers 
                $(this).append("<div></div><div></div>").children("div").html(html);
                
                this.marquee.cells = $(this).children("div").toArray();
                
                
                // align all cells according to direction.
                var marquee = this.marquee;
                for (var i = 0; i < this.marquee.cells.length; i++) 
                {
                    var l = 0;
                    var t = 0;
                    if (this.marquee.direction == "left" || this.marquee.direction == "right") 
                    {
                        l = marquee.width * i;
						l = this.marquee.direction == "right"? l*-1:l;
                    }
                    else if (this.marquee.direction == "up" || this.marquee.direction == "down") 
                    {
                        t = marquee.height * i;
						t = this.marquee.direction == "down"? t*-1:t;
                    }
                    
                    $(this.marquee.cells[i]).css({
                        position: "absolute",
                        left: l,
                        top: t,
						width: this.marquee.width,
                        height: this.marquee.height
                    });
					
                }
                var stop;
                /***
                 *
                 */
                this.marquee.animate = function()
                {
                    var marquee = this;
                    
                    var onComplete = function()
                    {
                        var w = $(this).width();
                        var h = $(this).height();
                        var x = parseInt($(this).css("left"));
                        var y = parseInt($(this).css("top"));
						
                        if (marquee.direction == "left" && (x + w) <= 0) 
                        {
                            $(this).css({ left: marquee.width });
                        }
						else if (marquee.direction == "right" && x >= $(marquee.container).width()) 
                        {
                            $(this).css({ left: x-(marquee.width*2) });
                        }
						else if (marquee.direction == "up" && (y+h) <= 0) 
						{
							$(this).css({ top: marquee.height });
						}
						else if (marquee.direction == "down" && y >= $(marquee.container).height()) 
						{
							$(this).css({ top: y-(marquee.height*2) });
						}
                        
                        // after the last cell translation has compleated, restart loop after delay
                        if (this == $(marquee.cells).last()[0]) 
                        {
                            if(marquee.loop)
							{
								setTimeout(function(){ marquee.animate();}, (marquee.delay));	
							}
                        }
                    }
                    
                    
                    // animate each of the cells
                    $(marquee.cells).each(function(index)
                    {
                        if (marquee.direction == "left" || marquee.direction == "right") 
                        {
                            var dir = marquee.direction == "left"? "-=" : "+=";
							$(this).animate({"left": dir + marquee.step + "px"},
							{ 
								duration: marquee.step_duration, 
								complete: onComplete 
							});
                        }
						else if (marquee.direction == "up" || marquee.direction == "down") 
                        {
                            var dir = marquee.direction == "up"? "-=" : "+=";
							$(this).animate({"top": dir + marquee.step + "px"},
							{ 
								duration: marquee.step_duration, 
								complete: onComplete 
							});
                        }
                       
                        
                        
                        
                    });
                    //---
                
                
                }// end of animate function
                
                this.marquee.animate();
                
                
                //--------------------------
            
            
            }); // end of return
        }
    });
})(jQuery);

//--------------------------------------------
(function($)
{
    $.fn.extend(
    {
        // plug-in entry  
        buildMarquee: function(options)
        {
            return this.each(function()
            {
            
                // //Settings list and the default values	
                var defaults = {
                    type: "step",
                    delay: 500,
                    direction: "left",
                    width: $(this).width(),
                    height: $(this).height(),
					step_duration : 500,
					loop: false
                };
                
                // prepare the marquee container 
                $(this).css({
                    position: "relative",
                    overflow: "hidden"
                });
                
                // add marquee attribute
                this.marquee = $.extend(defaults, options);
				
				this.marquee.container = this;
                
                // get the contents of the marquee
                var html = $(this).html();
                
                // clear the contents of the marquee
                $(this).empty();
                
                // clone the contents of the marquee into two div containers 
                $(this).append("<div></div><div></div>").children("div").html(html);
                
                this.marquee.cells = $(this).children("div").toArray();
                
				// align all cells according to direction.
                var marquee = this.marquee;
				
				// prepare cells
				for (var i = 0; i < marquee.cells.length; i++)
				{
                    var l = 0;
                    var t = 0;
                    if (this.marquee.direction == "left" || this.marquee.direction == "right") 
                    {
                        l = marquee.width * i;
                        l = this.marquee.direction == "right" ? l * -1 : l;
                    }
                    else if (this.marquee.direction == "up" || this.marquee.direction == "down") 
                    {
                        t = marquee.height * i;
                        t = this.marquee.direction == "down" ? t * -1 : t;
                    }
                    
                    $(this.marquee.cells[i]).css(
                    {
                        position: "absolute",
                        left: l,
                        top: t,
                        width: this.marquee.width,
                        height: this.marquee.height
                    });
				}//
				
				
                this.marquee.alignCells = function(direction)
				{
					for (var i = 0; i < this.cells.length; i++) 
					{
                       // If an argument for direction is given then use that value, 
						// otherwise use the default value for the marquee
						var d = (typeof(direction) === 'undefined')? marquee.direction : direction; 
						var cell = this.cells[i];
                        var w = $(cell).width();
                        var h = $(cell).height();
                        var x = parseInt($(cell).css("left"));
                        var y = parseInt($(cell).css("top"));
                        
                        if (d == "left" && (x + w) <= 0) 
                        {
                            $(cell).css(
                            {
                                left: marquee.width
                            });
                        }
                        else if (d == "right" && x >= $(marquee.container).width()) 
                        {
                            $(cell).css(
                            {
                                left: x - (marquee.width * 2)
                            });
                        }
                        else if (d == "up" && (y + h) <= 0) 
                        {
                            $(cell).css(
                            {
                                top: marquee.height
                            });
                        }
                        else if (d == "down" && y >= $(marquee.container).height()) 
                        {
                            $(cell).css(
                            {
                                top: y - (marquee.height * 2)
                            });
                        }
					}
				}
				
				this.marquee.alignCells();
				
				
				
                this.marquee.performStep = function(direction)
				{
					clearInterval(this.timeOutId);
					
					if(!marquee.isAnimating){ marquee.animate(direction, 250); }					
				}
				
                this.marquee.animate = function(direction, speed)
                {
                    //var marquee = this;
                    marquee.isAnimating = true;
					
					// If an argument for direction is given then use that value, 
					// otherwise use the default value for the marquee
					direction = (typeof(direction) === 'undefined')? marquee.direction : direction; 
					speed = (typeof(speed) === 'undefined')? marquee.step_duration : speed;
					
					
					marquee.alignCells(direction);
					/*
					var alignLayout = function()
					{
						var w = $(this).width();
                        var h = $(this).height();
                        var x = parseInt($(this).css("left"));
                        var y = parseInt($(this).css("top"));
						
                        if (marquee.direction == "left" && (x + w) <= 0) 
                        {
                            $(this).css({ left: marquee.width });
                        }
						else if (marquee.direction == "right" && x >= $(marquee.container).width()) 
                        {
                            $(this).css({ left: x-(marquee.width*2) });
                        }
						else if (marquee.direction == "up" && (y+h) <= 0) 
						{
							$(this).css({ top: marquee.height });
						}
						else if (marquee.direction == "down" && y >= $(marquee.container).height()) 
						{
							$(this).css({ top: y-(marquee.height*2) });
						}
					};
					*/
					
                    var onComplete = function()
                    {
                        //marquee.alignCells();
                        
                        // after the last cell translation has compleated, restart loop after delay
                        if (this == $(marquee.cells).last()[0]) 
						{
							marquee.isAnimating = false;
                            if(marquee.loop)
							{
								marquee.timeOutId = setTimeout(function(){ marquee.animate();}, (marquee.delay));	
							}
                        }
						
						
                    }
                     
                    
                    // animate each of the cells
                    $(marquee.cells).each(function(index)
					{
						
                        
						
						if (direction == "left" || direction == "right") 
                        {
                            var dir = direction == "left"? "-=" : "+=";
							$(this).animate({"left": dir + marquee.step + "px"},
							{ 
								duration: speed, 
								complete: onComplete
							});
                        }
						else if (direction == "up" || direction == "down") 
                        {
                            var dir = direction == "up"? "-=" : "+=";
							$(this).animate({"top": dir + marquee.step + "px"},
							{ 
								duration: speed, 
								complete: onComplete
							});
                        }
                       
                        
                        
                        
                    });
                    //---
                
                
                }// end of animate function
                
				
               marquee.animate();
                
                
                //--------------------------
            
            
            }); // end of return
        }
    });
})(jQuery);


//-------------------------------------
function selectSlide(id)
{
    // extract the slider id from the thumbnail id
    var slideIndex = parseInt(id.substring("slide-thumbnail-".length, id.length));
    var scroller = $("#slider")[0].scroller;
    scroller.selectSlide(slideIndex);
}

function thumbScroll(direction)
{
    $("#slider-thumbnails")[0].marquee.performStep(direction);
}