var HeroCallToAction = {
	
	initialize: function () {
		
	},
	
	update: function (id) {
		var hero = HeroModel.getHeroContent(id);
		var cta = hero.callToAction;
		var _self = this;
		this.cta = cta;
		var html = '';
		if (cta.link!==''){
			html = '<a href="'+cta.link+'"><img src="'+cta.image+'" /></a>';
		}else{
			html= '<a><img src="'+cta.image+'" /></a>';
		}
		$('#heroCta .cta').html(html);
		$('#heroCta .cta a img').css({display:'none'});
		$('#heroCta .cta a img').load(function () {
			_self.reposition();
			$(this).fadeIn();
		});
		
	},
	
	reposition:function () {
		//reseting cta CSS positioning before setting things up
		$('#heroCta .cta').css({right:'',left:'',bottom:'',top:''});
		var cta = this.cta;
		var valign = (typeof cta.valign != "undefined") ? cta.valign : 'right';
		var halign = (typeof cta.halign != "undefined") ? cta.halign : 'bottom';
		
		var vval = (valign == "middle") ? "50%" : "0px";
		var hval = (halign == "middle") ? "50%" : "0px";
		
		var voffset = 125;	//offset for not overlaping main menu and everything else on top of page
		var hoffset = 0;
		
		if (valign == "middle") {
			valign = "top";
			var vm = -Math.ceil( $('#heroCta .cta a img').outerHeight() / 2 );
			voffset = vm + 40;
		}
		if (halign == "middle") {
			halign = "left";
			var hm = -Math.ceil( $('#heroCta .cta a img').outerWidth() / 2 );
			hoffset = hm;
		}
		
		voffset = String(voffset) + "px";
		hoffset = String(hoffset) + "px";
		
		var css = {};
		css[valign] = vval;
		css[halign] = hval;
		css['margin-left'] = hoffset;
		css['margin-top'] = voffset;
		$('#heroCta .cta').css(css);
		
	}
	
};