$(document).ready(function(){
			$.ajax({
				type: "GET",
				url: "_swf/banner/banner.xml",
				dataType: "xml",
				success: function(xml) {
					$(xml).find('item').each(function(){
						//var id = $(this).attr('id');
						var image = $(this).attr('image');
						var url = $(this).attr('link');
						var rel = $(this).attr('rel');
						var thumb = $(this).attr('thumb');
						$('<div class="items"></div>').html('<a href="'+url+'"><img src="'+image+'"/></a>').appendTo('#banner');
						$('<a rel="'+rel+'" href="#">'+rel+'<div class="tt"><img src="'+thumb+'" /></div></a>').appendTo('.paging');
					});
					$(".paging a").bind("click",function() {	
							$active = $(this); //Activate the clicked paging
							//Reset Timer
							clearInterval(play); //Stop the rotation
							rotate(); //Trigger rotation immediately
							rotateSwitch(); // Resume rotation
							return false; //Prevent browser jump to link anchor
					});
					$(".paging a").hover(function(){
							var sayi = $(this).attr("rel");
							//var pos = $(this).position();
							$(".paging .tt").hide();
						}, function(){
							$(this).removeClass("tooltip");
							$(".paging .tt").hide();
					});
				}
				
			});
			
			


			//Set Default State of each portfolio piece
			$(".paging").show();
			$(".paging a:first").addClass("active");
				
			//Get size of images, how many there are, then determin the size of the image reel.
			var imageWidth = $("#bannerCont").width();
			var imageSum = $("#banner img").size();
			var imageReelWidth = imageWidth * imageSum;
			
			//Adjust the image reel to its new size
			$("#banner").css({'width' : 3320});
			
			//Paging + Slider Function
			rotate = function(){	
				var triggerID = $active.attr("rel") - 1; //Get number of times to slide
				var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
		
				$(".paging a").removeClass('active'); //Remove all active class
				$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
				
				//Slider Animation
				$("#banner").animate({ 
					left: -image_reelPosition
				}, 500 );
				
			}; 
			
			//Rotation + Timing Event
			rotateSwitch = function(){		
				play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
					$active = $('.paging a.active').next();
					if ( $active.length === 0) { //If paging reaches the end...
						$active = $('.paging a:first'); //go back to first
					}
					rotate(); //Trigger the paging and slider function
				}, 7000); //Timer speed in milliseconds (3 seconds)
			};
			
			rotateSwitch(); //Run function on launch
			
			//On Hover
			$("#banner .items a").hover(function() {
				clearInterval(play); //Stop the rotation
			}, function() {
				rotateSwitch(); //Resume rotation
			});	

		});