var DCSHOES = {
	Grid: {
	    init: function() {
			this.btn = $('.moreBtnWrap');
			this.homeBuckets = $('#homeBuckets');
			btnAnchor = this.btn.find('.more9grid');
			heroControl = $('#heroControls');

			this.addEvents();
	    },

	    addEvents: function() {
			var _self = this,
				btn = _self.btn;

			$('#homeBuckets').find('.moreBtnWrap').live('click', function() {
				if (!btn.hasClass('expanded')) {
					_self.open();
				} else {
					_self.close();
				}

				return false;

			});
		},

		open: function() {
			var btn = this.btn,
				homeBuckets = this.homeBuckets,
				scrollDistance = $('#heroControlsWrapper').offset(),
				scrollDistanceTop = scrollDistance.top - 40;

			btn.addClass('expanded');
			btnAnchor.text('Less');

			homeBuckets.find('.grid').animate({
			}, 50, function() {
				// might need to move outside of callback
				$('html, body').animate({scrollTop: scrollDistanceTop}, 'slow');
				$('.bottomRow').show();
			});

			// stop timer
			HeroControls.stopTimer();

			// remove grey scale effect from grid images when grid is expanded
			// $('.calloutImg').find('canvas').hide().end().find('img').removeClass('greyScale');

	    },

	    close: function() {
		    var btn = this.btn,
				homeBuckets = this.homeBuckets;

			btn.removeClass('expanded');
			btnAnchor.text('More');

			$('.ctaContainer').show();
			$('.bottomRow').hide();

			homeBuckets.find('.grid').animate({
				height: '170px'
			}, 50, function() {
				$('html, body').animate({scrollTop: 0}, 'slow', function() {
					Footer.reposition();
				});
			});

			//start timer
			HeroControls.startTimer();

			// add grey scale effect back to images in grid
			// $('.calloutImg').find('canvas').show().end().find('img').addClass('greyScale');


			Cufon.refresh();

	    }
	
	},
	GridBuilder: {
		bucketHover: function(classState, fadeState, el) {
		// classState takes addClass or removeClass
		// fadeState takes fadeIn or fadeOout
		// el is the containing element

			var checkEl = $('html'),
				image = '.calloutImg img',
				effectClass = 'greyScale',
				canvasClass = 'canvas',
				calloutImage = '.calloutImg canvas';
		
			// adds or removes greyscale effect in IE
			el.find(image)[classState](effectClass);
		
			// adds or removes greyscale effect in browsers that support canvas
			if(checkEl.hasClass(canvasClass)) {
				el.find(calloutImage)[fadeState]("fast");
			}
		},
		faderize: function(el, level) {
			// animates the grid image overlay with fb share widget etc
			el.find(".calloutHover").animate({
				opacity: level
			}, 200);
		}
	}
};
$(function() {
	// Expanding Grid
	DCSHOES.Grid.init();
});