var DCHotSpot = function (data, inc) {
	
	var _self = this;
	var bd = $('body');
	var isIE = ( bd.hasClass('IE6') || bd.hasClass('IE7') || bd.hasClass('IE8') || bd.hasClass('IE9') );
	//this.xPercent = data.xPercent;
	//this.yPercent = data.yPercent;
	
	this.getTemplate = function (dir, image, price, color) {
		if (color == undefined || color == ''){
			color='white';
		}
		
		var hasImage = ( image && image !== "" && image !== undefined );
		var hasPrice = ( price && price !== "" && price !== undefined );
		
		var temp = "<div class='hotspot "+ dir +" '><div class='wrapper'>";
		temp += "<a class='spot' href='#'><img src='/extension/qsdcshoes/design/dcshoes/images/hotspot-"+ color +".png' /></a>";
		temp += "<div class='hotspot-content " + ( ( hasImage ) ? "image " : "" ) + "clearfix'>";
		
		if ( hasImage ) {
			temp += "<img src='<%= image %>' width='120' />";
		}
		temp += "<div class='info clearfix'>";
		temp += "<div class='title'><%= title %></div>";
		if ( hasPrice ) {
			temp += "<span class='price'>$<%= price %></span>";
		}
		temp += "<a class='cta' href='<%= ctaLink %>'><%= ctaText %><span class='arrow'></span></a>";
		temp += "</div></div></div></div>";
		
		var d = {title:data.description, image:data.image, ctaLink:data.callToAction.link, ctaText:data.callToAction.text};
		if ( hasImage && hasPrice ) {
			d.price = $.currency(data.price);
		}
		
		return _.template (temp, d);
	};
	
	/* var direction = (data.xPercent > 0.5) ? 'right' : 'left'; */
	var template = this.getTemplate (data.direction, data.image, data.price, data.color);
	
	var jTemplate = $(template).appendTo ( "#spot-container" );
	jTemplate.data(data);
	
	this.setPosition = function () {
		var img = $("#background .bg-img:first-child");
		var imgOffset = img.offset();
		var left = imgOffset.left;
		var top = $('#spot-container').offset().top;
		
		
		
		var imgWidth = img.outerWidth();
		var imgHeight = img.outerHeight();
		var xperc = Number(data.xPercent);
		var yperc = Number(data.yPercent);
		var l = left + Math.round(xperc * imgWidth);
		var t = top + Math.round(yperc * imgHeight);
		
		// Offset top by -height of hotspot icon (60px)
		// Offset left by -width of space between graphic and end of image (7px)
		
		l = l - 7;
		t = t - 60;
		
		jTemplate.offset({left:l, top:t});
	};
	
	jTemplate.mouseenter (function () {
		$(this).stop(true, true);
		
		// basic collision dectection for hot spot content
		// making sure that the hot spot doesn't open upwards
		// when there's content that would overlap it
		var hotSpotOffset = $('.hotspot').offset(),
			headerHeight = $('#headerWrapper').height(),
			difference = (hotSpotOffset.top - 89) - headerHeight;

		if(difference < 0) {
			$(this).find('.hotspot-content').css({
				'top': $(this).find('.hotspot-content').height() - 81
			});
		} else {
			$(this).find('.hotspot-content').css({
				'top': '-81px'
			});
		}

		$(this).find('.hotspot-content').fadeIn('fast');
	});
	
	jTemplate.mouseleave (function () {
		$(this).stop(true, true);
		$(this).find('.hotspot-content').fadeOut('fast', function() {
			$(this).css({
				'top': '-81px'
			});
		});
	});
	
	jTemplate.find('.hotspot-content').fadeOut(0);
	
	$(window).resize (function () {
		_self.setPosition ();	
	});
	
	_self.setPosition ();
	
	jTemplate.css({display:'none'});

	// check to see which browser we are in
	if ( isIE ) {
		// Corrects IE fadeIn with transparent png files by just using show
		jTemplate.delay(inc*200).show();
	} else {
		jTemplate.delay(inc*200).fadeIn();
	}
	
};

var DCHotSpotController = {
	
	initialize: function () {
		
		var bd = $('body');
		var isIE = ( bd.hasClass('IE6') || bd.hasClass('IE7') || bd.hasClass('IE8') || bd.hasClass('IE9') );
		
		$(window).scroll(function () {
			var scroll = Number($(window).scrollTop());
			if ( scroll && scroll > 1 ) {
				if ( isIE ) {
					$('#hotspots').hide();
				} else {
					$('#hotspots').animate({'opacity':0});
				}
			} else {
				if ( isIE ) {
					$('#hotspots').show();
				} else {
					$('#hotspots').stop(true, true);
					$('#hotspots').animate({'opacity':1});
				}
			}

		});
		
	},
	
	update:function (id) {
		
		var hero = HeroModel.getHeroContent(id);
		list = hero.hotSpots;
		
		$("#spot-container").html('');
		
		var i = 0;
		var l = list.length;
		for (i; i<l; i++) {
			var spot = new DCHotSpot ( list[i], i );
		}
	}
	
};

$(function () {
	DCHotSpotController.initialize();
});