/*
** moviecompare.js
**
** handles the moviecompare page.  basically handle the more attributes link.
*/
;( function($){
	
	$.fn.moviecompare = function( settings ) {

		if (settings) $.extend( $.fn.moviecompare.settings, settings );
		
		this.each( function() {
			
			var _moviecompare = createMovieCompare( this );
		
			_moviecompare.dna_sets = function() {
				return $([_moviecompare.view.leftSide, _moviecompare.view.rightSide]);
			};
		
			_moviecompare.collapse = function() {
				_moviecompare.dna_sets().each( function() {
					var dna_set = $(this);
					var index   = 1;
					dna_set.find('.dna').each( function() {
						var dna = $(this);
						if ( index > $.fn.moviecompare.settings.truncateSize ) {
							dna.hide();
						}
						index += 1;
					});
				});
				_moviecompare.view.expandCollapseLink.text( $.fn.moviecompare.settings.moreLinkText );
				_moviecompare.expanded = false;
			};
			
			_moviecompare.expand = function() {
				_moviecompare.dna_sets().each( function() {
					var dna_set = $(this);
					var index   = 1;
					dna_set.find('.dna').each( function() {
						var dna = $(this);
						if ( index > $.fn.moviecompare.settings.truncateSize ) {
							dna.show();
						}
						index += 1;
					});
				});
				_moviecompare.view.expandCollapseLink.text( $.fn.moviecompare.settings.lessLinkText );
				_moviecompare.expanded = true;
			};
		
			/*
				handles the "more attributes" / "less attributes" clicks.
			*/
			_moviecompare.toggleView = function( event ) {
				if ( _moviecompare.expanded ) {
					_moviecompare.collapse();
				} else {
					_moviecompare.expand();
				}
				event.preventDefault();
				event.stopPropagation();
			};
			
			_moviecompare.collapse(); // initially we want to be collapsed.
		
			// lets add action to $.fn.moviecompare.settings.expandCollapseLinkClass
			_moviecompare.view.expandCollapseLink.click( _moviecompare.toggleView );

		});
		
	};
	
	function createMovieCompare( element ) {
		var compare = $(element);
		
		var dna_sets = compare.find('.dna_set');
		
		$.extend( compare, {
			view: {
				leftSide: $(dna_sets[0]),
				rightSide: $(dna_sets[1])
			}
		});
		
		createUI( compare );
		
		compare.view.expandCollapseLink = compare.find('.' + $.fn.moviecompare.settings.expandCollapseLinkClass );
	
		return compare;
	};
	
	/*
		responsible for creating the UI, which is basically adding
		the "more attributes" link.
	*/
	function createUI( element ) {
		$([element.view.leftSide, element.view.rightSide]).each( function() {
			var e = this;
			e.append( "<a href='#' class='" + $.fn.moviecompare.settings.expandCollapseLinkClass + "'>" + $.fn.moviecompare.settings.moreLinkText +"</a>");
		});
	};
	
	$.extend( $.fn.moviecompare, {
		settings: {
			truncateSize: 5,
			moreLinkText: "more attributes",
			lessLinkText: "fewer attributes",
			expandCollapseLinkClass: "expand_collapse"
		}
	});
	
})(jQuery);