function slideSwitch() {
	var $active = $('#ssWrapper DIV.active');
	if ( $active.length == 0 ) $active = $('#ssWrapper DIV:last');
	var $next =  $active.next('DIV.slide').length ? $active.next('DIV.slide') : $('#ssWrapper DIV.slide:first');
	$active.addClass('last-active');

	$next
		.addClass('active')
		.animate({opacity: 1.0}, 1250,"easeOutSine", function() {
			$active.removeClass('active last-active').css({opacity: 0.0})
	});
}

function initSlideshow() {
	$('#ssWrapper DIV:first').addClass('active').css({opacity: 1.0});
	setInterval( "slideSwitch()", 7000 );
}  



(function($) {
  
  var gallery = $.sammy(function() {
	this.element_selector = '#main';
	this.global_ratio = '';
	this.use(Sammy.Storage);
	this.use(Sammy.Cache);
    this.use(Sammy.Template,'');
	//this.clearCache();
	this.cache_partials = true;
	this.log = function() {
		return null;
	}	
		
    this.element_selector = '#main';    
		this.helpers({
			
			load_image: function(img_elem,image) {
				var context = this;
				$img = $('<img/>')
				$img.bind('load readystatechange',function(ev) {
					if (this.complete || (this.readyState == 'complete' && ev.type =='readystatechange')) {
						context.app.images[pos].loaded = true
						context.app.images[pos].loading = false
						if (!(_.detect(context.app.images,function(img) { return img.loading == true }))) {
							context.app.preload_active = false
						}
					}
					
					$img.attr('src',context.app.images[pos].url)
					img_elem.attr('src', image.url).show();
					
				})
				
			},
			
			calculate_parent_resize_ratio: function() {
				var parent_height = 800;
				var parent_width = 1200;
				var window_height = $(window).height();
				var window_width = $(window).width();
				var layout_height = 70 ; //20 for spacing

				var available_width = window_width-215; //buffer
				var available_height = window_height-layout_height;
				
				if (available_height < parent_height) {
					var height_ratio = available_height / parent_height;
				} else {
					var height_ratio = 1;
				}
				
				if (available_width < parent_width) {
					var width_ratio = available_width / parent_width;
				} else {
					var width_ratio = 1;
				}
				
				if (width_ratio == 1 && height_ratio == 1) {
					var safe = true
				} else {
					var safe = false
				}

				return {height: height_ratio, width: width_ratio, safe: safe, available_width: available_width, available_height: available_height}
			},			

			resize_parent: function() {
				var context = this;
				var ratio = context.calculate_parent_resize_ratio();
				if (ratio.width > ratio.height) {
					var working_ratio = ratio.height
				} else {
					var working_ratio = ratio.width
				}
				
				var target_width = working_ratio*1200
				var target_height = working_ratio*800
				
				if (ratio.available_width < 1200) {
					this.app.image_display.width(ratio.available_width);
				} else {
					this.app.image_display.width(1200);
				}

				if (ratio.available_height < 800) {
					this.app.image_display.height(ratio.available_height);
				} else {
					this.app.image_display.height(800);
				}
				
			},
			
			resize: function(element,image,ratio) {
				
				if (ratio.width > ratio.height) {
					var working_ratio = ratio.height
				} else {
					var working_ratio = ratio.width
				}
					
				var target_width = working_ratio*image.width
				var target_height = working_ratio*image.height

				$image = element.find("img")
				$image.width(target_width)
				$image.height(target_height)
				
				return element
			},
			
			resize_elements: function() {
				var context = this;
				var ratio = context.calculate_parent_resize_ratio();
				
				$('#ssWrapper div.slide img').each(function(index) {

					if (ratio.width > ratio.height) {
						var working_ratio = ratio.height
					} else {
						var working_ratio = ratio.width
					}

					var image = context.app.images[index];
					var target_width = working_ratio*image.width
					var target_height = working_ratio*image.height
					$(this).width(target_width)
					$(this).height(target_height);
					
				})

				return context.resize_parent();
				
			}
		})
		
		this.images = []
		this.preload_active = false
		
		this.bind('run', function() {
			var context = this;
			this.app.image_display = $('#ssWrapper');
			var ratio = context.calculate_parent_resize_ratio();
			context.resize_parent(this.app.image_display);

			$('.gallery li').each(function(index,li) {
				$li = $(li)
				context.app.images.push({
					url: $li.attr('data-url'), 
					caption: $li.attr('data-caption'),
					height: $li.attr('data-height'),
					width: $li.attr('data-width'),
					count: index
				})
				
				context.partial('assets/templates/russelsmith/media/js/slideshow.template', {image: context.app.images[index]}, function(rendered) {
					var $rendered = $(rendered)
					context.resize($rendered,context.app.images[index],ratio);
					context.app.image_display.append($rendered);
				});
				
			}).parents('#galleria').remove();
			
			$(window).resize(function() { context.resize_elements(); });
			initSlideshow();
			
		});
		
  });
  
  $(function() {
    gallery.run();
  });
  
})(jQuery);