/*
			the images preload plugin
			*/
			(function($) {
				$.fn.preload = function(options) {
					var opts 	= $.extend({}, $.fn.preload.defaults, options),
						o		= $.meta ? $.extend({}, opts, this.data()) : opts;
					return this.each(function() {
						var $e	= $(this),
							t	= $e.attr('rel'),
							i	= $e.attr('href'),
							l	= 0;
						$('<img/>').load(function(i){
							++l;
							if(l==2) o.onComplete();
						}).attr('src',i);
						$('<img/>').load(function(i){
							++l;
							if(l==2) o.onComplete();
						}).attr('src',t);
					});
				};
				$.fn.preload.defaults = {
					onComplete	: function(){return false;}
				};
			})(jQuery);





			$(function () {
			    //some elements..
			    var $ps_container = $('#ps_container'),
					$ps_image_wrapper = $ps_container.find('.ps_image_wrapper'),
					$ps_next = $ps_container.find('.ps_next'),
					$ps_prev = $ps_container.find('.ps_prev'),
					$ps_nav = $ps_container.find('.ps_nav'),
					$tooltip = $ps_container.find('.ps_preview'),
					$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
					$links = $ps_nav.children('li').not($tooltip),
					total_images = $links.length,
					currentHovered = -1,
					current = 0,
					$loader = $('#loader'),
					$ps_autoTime = featureSliderAutoScrollMiliseconds/*miliseconds*/;

			    /*check if you are using a browser*/
			    var ie = false;
			    if ($.browser.msie) {
			        ie = true; //you are not!Anyway let's give it a try
			    }
			    if (!ie)
			        $tooltip.css({
			            opacity: 0
			        }).show();


			    /*first preload images (thumbs and large images)*/
			    var loaded = 0;
			    $links.each(function (i) {
			        var $link = $(this);
			        $link.find('a').preload({
			            onComplete: function () {
			                ++loaded;
			                if (loaded == total_images) {
			                    //all images preloaded,
			                    //show ps_container and initialize events
			                    $loader.hide();
			                    $ps_container.show();
			                    //when mouse enters the pages (the dots),
			                    //show the tooltip,
			                    //when mouse leaves hide the tooltip,
			                    //clicking on one will display the respective image
			                    $links.bind('mouseenter', showTooltip)
									  .bind('mouseleave', hideTooltip)
									  .bind('click', showImage);
			                    //navigate through the images
			                    $ps_next.bind('click', nextImage);
			                    $ps_prev.bind('click', prevImage);

			                    var autoTimer = setTimeout(function () { runAutoShow(); }, $ps_autoTime);
			                }
			            }
			        });
			    });


			    function runAutoShow() {//alert("ii")
			        var nextItem = $('.ps_nav li.selected').next();
			        if ($(nextItem).attr('class') == "ps_preview")
			            nextItem = $('.ps_nav li:first');

			        $(nextItem).trigger('click');
			        $(nextItem).click();
			        var autoTimer = setTimeout(function () { runAutoShow(); }, $ps_autoTime);
			    }

			    function showTooltip() {
			        var $link = $(this),
						idx = $link.index(),
						linkOuterWidth = $link.outerWidth(),
			        //this holds the left value for the next position
			        //of the tooltip
						left = parseFloat(idx * linkOuterWidth) - $tooltip.width() / 2 + linkOuterWidth / 2,
			        //the thumb image source
						$thumb = $link.find('a').attr('rel'),
						imageLeft;

			        //if we are not hovering the current one
			        if (currentHovered != idx) {
			            //check if we will animate left->right or right->left
			            if (currentHovered != -1) {
			                if (currentHovered < idx) {
			                    imageLeft = 75;
			                }
			                else {
			                    imageLeft = -75;
			                }
			            }
			            currentHovered = idx;

			            //the next thumb image to be shown in the tooltip
			            var $newImage = $('<img/>').css('left', '0px')
												   .attr('src', $thumb);

			            //if theres more than 1 image
			            //(if we would move the mouse too fast it would probably happen)
			            //then remove the oldest one (:last)
			            if ($ps_preview_wrapper.children().length > 1)
			                $ps_preview_wrapper.children(':last').remove();

			            //prepend the new image
			            $ps_preview_wrapper.prepend($newImage);

			            var $tooltip_imgs = $ps_preview_wrapper.children(),
							tooltip_imgs_count = $tooltip_imgs.length;

			            //if theres 2 images on the tooltip
			            //animate the current one out, and the new one in
			            if (tooltip_imgs_count > 1) {
			                $tooltip_imgs.eq(tooltip_imgs_count - 1)
										 .stop()
										 .animate({
										     left: -imageLeft + 'px'
										 }, 150, function () {
										     //remove the old one
										     $(this).remove();
										 });
			                $tooltip_imgs.eq(0)
										 .css('left', imageLeft + 'px')
										 .stop()
										 .animate({
										     left: '0px'
										 }, 150);
			            }
			        }
			        //if we are not using a "browser", we just show the tooltip,
			        //otherwise we fade it
			        //
			        if (ie)
			            $tooltip.css('left', left + 'px').show();
			        else
			            $tooltip.stop()
							.animate({
							    left: left + 'px',
							    opacity: 1
							}, 150);
			    }

			    function hideTooltip() {
			        //hide / fade out the tooltip
			        if (ie)
			            $tooltip.hide();
			        else
			            $tooltip.stop()
						    .animate({
						        opacity: 0
						    }, 150);
			    }

			    function showImage(e) {
			        var $link = $(this),
						idx = $link.index(),
						$image = $link.find('a').attr('href'),
						$linkUrl = $link.find('a').attr('data-url'), //yyy added by TBB
                        $linkNewWindow = $link.find('a').attr('data-newWindow'), //yyy added by LRS
						$currentImage = $ps_image_wrapper.find('img'),
						currentImageWidth = $currentImage.width();

			        //if we click the current one return
			        if (current == idx) return false;

			        //add class selected to the current page / dot
			        $links.eq(current).removeClass('selected');
			        $link.addClass('selected');

			        var $newImage;
			        if ($linkNewWindow == "True") {
			            //the new image element
			            $newImage = $('<img/>').css('left', currentImageWidth + 'px')
											   .attr('src', $image).bind('click', function () { window.open($linkUrl), 'newWindow' }); //yyy click attribute added by TBB
			        }
			        else {
			            //the new image element
			            $newImage = $('<img/>').css('left', currentImageWidth + 'px')
											   .attr('src', $image).bind('click', function () { location.href = $linkUrl; }); //yyy click attribute added by TBB
			        }

			        //if the wrapper has more than one image, remove oldest
			        if ($ps_image_wrapper.children().length > 1)
			            $ps_image_wrapper.children(':last').remove();

			        //prepend the new image
			        $ps_image_wrapper.prepend($newImage);

			        //the new image width.
			        //This will be the new width of the ps_image_wrapper
			        var newImageWidth = 958; // $newImage.width();//yyy width hardcoded because of firefox bug

			        //check animation direction
			        if (current > idx) {
			            $newImage.css('left', -newImageWidth + 'px');
			            currentImageWidth = -newImageWidth;
			        }
			        current = idx;
			        //animate the new width of the ps_image_wrapper
			        //(same like new image width)
			        $ps_image_wrapper.stop().animate({
			            width: newImageWidth + 'px'
			        }, 350);
			        //animate the new image in
			        $newImage.stop().animate({
			            left: '0px'
			        }, 350);
			        //animate the old image out
			        $currentImage.stop().animate({
			            left: -currentImageWidth + 'px'
			        }, 350);

			        e.preventDefault();
			    }

			    function nextImage() {
			        if (current < total_images) {
			            $links.eq(current + 1).trigger('click');
			        }
			    }
			    function prevImage() {
			        if (current > 0) {
			            $links.eq(current - 1).trigger('click');
			        }
			    }


			});