var __ = {}

// --------------------------------------------------------------------------------
// SLIDESHOW
	
	// GET XML AND CONVERT TO JSON
        function RenderXML(path){
	$.ajax({
		type: "GET",
		url: path,
		dataType: "xml",
		success: function(xml) {
			
			var slides_html = []
			$(xml).find('slide').each(function(){
				var slide = {}
				
				var title = $(this).find('title').text()
				var img = $(this).find('large_image_url').text()
				var desc = $(this).find('description').text()
				
				slides_html.push('\
					<li>\
						<h3>'+title+'</h3>\
						<img src="'+img+'" \>\
						<p>'+desc+'</p>\
					</li>\
				')
			})
			
			$('#van-banner').html('<ul class="slides">'+slides_html.join('')+'</ul>')
			MakeSlideShow('#van-banner')
		}
	});
}
	
	
	function MakeSlideShow(id){
		$(id).addClass('slideshow')
		var slides = $(id).find('li')
		
		// slideshow width
		var width = $(id).width() 
		$(id+' ul').width(width * slides.length)
		
		// draw pages
		var pages = []
		var num_slides = slides.length
		for (var i=0; i<num_slides; i++){
			var css_class = []
			if (i == 0){
				css_class.push('active')
			}
			pages.push('<li class="'+css_class.join('')+'" data-page="'+i+'">'+(i+1)+'</li>')
		}
		
		$('#van-banner').append('<ul class="pages">'+pages.join('')+'</ul>')
		
		// draw prev / next navigation
		$(id).append('<span class="prev">Previous</span>')
		$(id).append('<span class="next">Next</span>')
		
		// make  prev / next interactive 
		$(id+' .prev').bind('mousedown', function(e){ IncrementSlide(e, -1) })
		$(id+' .next').bind('mousedown', function(e){ IncrementSlide(e, +1) })

		// make pages interactive 
		$('.pages li').bind('mousedown', function(e){
			var container = $(e.target).closest('.slideshow')
			
			if (! container.hasClass('animating')){
				var width = container.width() 
				var new_slide = $(this).data('page')
				
				// animate
				container.addClass('animating')
				container.find('.slides').animate({left: (width * new_slide) * -1}, function(){
					container.removeClass('animating')
				})
				
				// update active state
				container.find('.pages li.active').removeClass('active')
				$(this).addClass('active')
			}
		})
	}
	
	function IncrementSlide(e, increment){
		var container = $(e.target).closest('.slideshow')
		
		if (! container.hasClass('animating')){
			
			var num_slides = container.find('.pages li').length
			var current_slide = container.find('.pages li.active').data('page')
			var new_slide = current_slide + increment
			
			var width = container.width() 
			if (new_slide >= num_slides){
				new_slide = 0	
			} else if (new_slide < 0){
				new_slide = num_slides-1
			}
			
			// animate
			container.addClass('animating')
			container.find('.slides').animate({left: (width * new_slide) * -1}, function(){
				container.removeClass('animating')
			})
			
			// update pages active state
			container.find('.pages li.active').removeClass('active')
			container.find('.pages li').eq(new_slide).addClass('active')
		}
	}
	
	// ANIMATE SLIDES
	__.slide_change = 7000
	function ChangeSlide(){
		var _ = __
		$('#van-banner .next').trigger('mousedown', [{'not_user':true}])
		__.animate_slide_timeout = setTimeout('ChangeSlide()', _.slide_change)
	}
	__.animate_slide_timeout = setTimeout('ChangeSlide()', __.slide_change)
	
	// STOP ANIMATION ON INTERACTION
	$(document).ready(function(){
		$('#van-banner').bind('mousedown mousemove mouseup touchstart touchmove touchend', function(e, not_user){
			var _ = __
			if (! not_user){		
				if (_.prevent_interaction_timeout){
					clearTimeout(_.prevent_interaction_timeout)
				}
				if (_.animate_slide_timeout){
					clearTimeout(_.animate_slide_timeout)
				}
				_.prevent_interaction_timeout = setTimeout('ChangeSlide()', __.slide_change)
			}
		})
	})