/*--------------------------------------------------------------------------*/

var Hero = function (container, width, height) {
	this.container = $j(container);
	this.slides = container.find('.slide');
	this.images = container.find('img.main');
	this.wrapper = $j('#content .wrapper:first');
	this.width = width;
	this.height = height;
	this.setup();
};
Hero.prototype = {
	setup: function () {
		var self = this;
		
		this._resize();
		$j(window).resize(function () { self._resize(); });
	},
	_resize: function () {
		new ReverseResize(this.slides, this.images, this.width, this.height);
		//new DynamicResize(this.images);
		this.wrapper.width($j(window).width());
		this.wrapper.height($j(window).height());
	}
};

// New Hero with no reverse resize
// Keeping the old Hero, too
var HeroTwo = function (container, width, height) {
	this.container = $j(container);
	this.slides = container.find('.slide');
	this.images = container.find('img.main');
	this.wrapper = $j('#content .wrapper:first');
	this.width = width;
	this.height = height;
	this.setup();
};
HeroTwo.prototype = {
	setup: function () {
		var self = this;

		this._resize();
		$j(window).resize(function () { self._resize(); });
	},
	_resize: function () {
		this.wrapper.width($j(window).width());
		this.wrapper.height($j(window).height());
	}
};

/*--------------------------------------------------------------------------*/

var HotSpot = function (trigger, pop) {
	this.trigger = $j(trigger);
	this.pop = $j(pop);
	this.setup();
};
HotSpot.prototype = {
	setup: function () {
		var self = this;
		this.trigger.click(function () {
			self.show();
		});
	},
	show: function () {
		var self = this;
		this.pop.fadeIn(200, function () { self.open(); });
	},
	open: function () {
		var self = this;
		this.animateInfo(266, 1, '#c60c46');
		this.pop.addClass('active');
		this.pop.find('.close').click(function () {  self.close(self.pop); });
		//this.closeOthers();
	},
	close: function (pop) {
		var self = this;
		this.pop.removeClass('active');
		pop.fadeOut(200, function () { self.animateInfo(0, 0, '#470f1f'); });
	},
	closeOthers: function () {
		var self = this;
		$j('.hotspot .overlay').each(function () {
			if (!$j(this).hasClass('active')) { self.close($j(this)); }
		});	
	},
	animateInfo: function (xCoord, opac, bg) {
		this.pop.animate({ backgroundColor: bg }, 1000);
		this.pop.find('.photo').animate({ opacity: opac }, 400);
		this.pop.find('.info').delay(400).animate(
			{ opacity: opac, left: xCoord },
			{ duration: 500, easing: 'easeOutExpo' }
		);
	}
};

/*--------------------------------------------------------------------------*/

$j(document).ready(function () {
	var dock = new Dock($j('.dock'));
	dock.firstLoad();

    // This makes the images stick to left top
    // and to resize as on Cannondale homepage
    var $hero = $j('.hero');
    new HeroTwo($hero, 1600, 1065);
    $hero.find('img').css({
        'min-width' : 1250
    });

	$j('.hotspot').each(function () { new HotSpot($j(this).find('.marker'), $j(this).find('.overlay')); });
	
	new SlideShow($j('.hero'), $j('.hero .slide'), 8, 0);

});