﻿$j(document).ready(function(){
	/* Slideshow Image Selector Object */
	function imageSelector(){};
	imageSelector.prototype = {
		_items: {},
		_images : {},
		_stage : {},
		_action : false,
		
		init : function() {
			var o = this;
			o._items = $j('#Thumbnails ul li');
			o._images = $j('a.image-selector');
			o._stage = $j('#ContentPrimary');
			o.render();
		},
		render : function() {
			var o = this;
			o.visibleImage = $j('.visible', o._stage);
			o.hiddenImage = $j('.hidden', o._stage);
			o.visibleImage.css({position: 'absolute', left: '600px'});
			o.visibleImage.animate({left: '0px'}, 1800);
			o.visibleImage.removeClass('js-hide');
			o.events();
		}, 
		events : function() {
			var o = this;
			//Hover
			o._images.hover(
			    function(){
			        $j(this).css({cursor: 'pointer'});
			        if( $j(this).parent().hasClass('active') == false ) {
			            $j('span',this).animate({opacity: 'show'},500);
			        }  
			    },
			    function(){
			        $j(this).css({cursor: 'default'});
			        if( $j(this).parent().hasClass('active') == false ) {
			            $j('span',this).hide();
			        }
			    }
			);
			//Click
			$j(o._images).click(function(){
				if(o._action == false) {
				    //Set selected
				    o._items.removeClass('active');
				    $j('span',o._items).hide();
				    $j(this).parent().addClass('active');
				    $j('span',this).show();
					o._action = true;
					//Reset Images
					o.visibleImage = $j('.visible', o._stage);
					o.hiddenImage = $j('.hidden', o._stage);
					o.hiddenImage.show();
					
					o.hiddenImage.attr('src',$j(this).attr('rel'));
					o.visibleImage.animate({opacity: 'hide'}, 200,function(){
							o.visibleImage.removeClass('visible').addClass('hidden');
							o.hiddenImage.removeClass('hidden').addClass('visible');
							o._action = false;
					});
				}
				return false;
			});
		},
		cleanUp : function() {
			var  o = this;
			//Remove LI elements without images in
			o._items.each(function(){
				if ($j('img',this).length < 1) { console.log('test'); }
				console.log($j('img',this).length);
			});
		}
	}

	/* Sample Object Usage */
	var imageSelector = new imageSelector();
	imageSelector.init();
	imageSelector.cleanUp();
});