var article_contents = $$('.article_content');
var contents_array = [];
var photo_width = 400;
var photo_height = 300;
var photo_offset_left = 0;

article_contents.each( function( item, i) {
	contents_array.push(create_db_object(item)); 		
});

var image_viewer = $$('#main_rotator .image_viewer')[0];

$$('#sub_viewers img').each( function( img, i) {
	img.addEvent('click', function() {
		changeArticle(i);
	});
})

var active_article = 0;

// Change Article
var changeArticle = function ( i ) {
	var img = $$('#sub_viewers img')[i];
	var article_content = contents_array[i];

	// figure out the photo's ratio
	var photo_ratio = $$('.article_content img')[i].width;
	if (photo_ratio < 400){
		//use 3:4 ratio
		photo_width = 300;
		photo_height = 400;
		photo_offset_left = 50;
	} else{
		//use 4:3 ratio
		photo_width = 400;
		photo_height = 300;
		photo_offset_left = 0;
	}	

	changeImage(img, article_content);
	$$('#sub_viewers .article_tab').each( function(item, i) {
		item.removeClass("active");
	});
	$$('#sub_viewers .article_tab')[i].addClass("active");
	$$('#main_rotator .teaser')[0].setHTML( article_content.teaser.innerHTML );
	$$('#main_rotator .date')[0].setHTML( article_content.start_date.innerHTML );
	$$('#main_rotator .sport_name')[0].setHTML( article_content.sport_name.innerHTML );
	$$('#main_rotator a').each( function(link) {
		link.href = article_content.link.href;
	})
	active_article = i;
	if ( article_interval.interval_func )
		article_interval.reset();
};
// Whiz bang awesomeness
var changeImage = function( img, article_content ) {
		var cloneImage = img.clone();
		cloneImage.setStyles( img.getCoordinates() ).setStyles({position: 'absolute', right: ''});
		cloneImage.setProperty('id','') // clear out id
		cloneImage.src = article_content.image.src;
		cloneImage.injectInside(document.body);
		$('image_heading').setStyle('display','none');
		var fx = new Fx.Styles( cloneImage, { duration: 400, wait:false });
		fx.start({
			left : image_viewer.getCoordinates().left + photo_offset_left,
			top : image_viewer.getCoordinates().top,
			height:'300px',
			width: photo_width + 'px'
		}).chain(function() {
			var innerImg = new Element('img', {
				src : cloneImage.src,
				height: photo_height + 'px',
				width: photo_width + 'px'
			});
			var innerLink = new Element('a', {
				href:article_content.link.href
			});
			innerImg.setStyles({height:photo_height + 'px',width:photo_width + 'px'})
			$$('#main_rotator .image_viewer img').each( function(item){
				item.remove();
			})
			$$('#main_rotator .image_viewer a').each( function(item){
				item.remove();
			})
			innerLink.adopt(innerImg);
			innerLink.injectInside(image_viewer);
			cloneImage.remove();

			$('image_heading').setStyles({top:'300px', left:'0px','display':'block'});

			var title_td = $$('#image_heading td.opaque')[0];

			var title_link = new Element('a', {
				href:article_content.link.href
			});
			title_link.setHTML( article_content.title.innerHTML);
			title_td.adopt(title_link);

			new Fx.Style('image_heading','top',{duration:1000}).start('300px', '236px');
		});
};


var nextArticle = function() {
	active_article += 1;
	if (active_article >= contents_array.length)
	 {
		 active_article = 0;
	 }
	 changeArticle(active_article);
};

var prevArticle = function() {
	active_article -= 1;
	if (active_article < 0)
	 {
		 active_article = $$('#sub_viewers .article_tab').length;
	 }
	 changeArticle(active_article);
};

var stopArticle = function() {
	 article_interval.toggle();
};

var article_interval;
window.addEvent('load', function() {
	article_interval = new DB_Interval( nextArticle, 10000 );	
	article_interval.start();
});