document.observe('dom:loaded', function() {
	$('col_2').observe('click', function(e) {
		var linkBox,
			linkBoxId,
			clicked = e.findElement('img');

		if (clicked) {
			linkBox = clicked.up('.bluebox');
			linkBoxId = linkBox.readAttribute('id');
			open_video(linkBoxId.substring(4, linkBoxId.length));
		}
	});

	function open_video(i) {
		i -= 1;
		var videos = $$('div.open_video div'),
			videoContainer = $$('.open_video')[0],
			showVideoLinks = $$('div.bluebox span'),
			playBoxes = $$('div.bluebox'),
			bottomVideoContainer,
			bottomPlayBox;

		videos.each(function(video, idx) {
			video.hide();
		});
		showVideoLinks.each(function(showLink, idx) {
			showLink.show();
		});
		playBoxes.each(function(playBox, idx) {
			playBox.removeClassName('active');
		});
		videoContainer.setStyle({
				marginTop: '0px'
		});

		showVideoLinks[i].hide();
		playBoxes[i].addClassName('active');
		videos[i].show();

		bottomVideoContainer = videoContainer.cumulativeOffset().top + videoContainer.getHeight();
		bottomPlayBox = playBoxes[i].cumulativeOffset().top + playBoxes[i].getHeight();
		if (bottomVideoContainer < bottomPlayBox) {
			videoContainer.setStyle({
				marginTop: (bottomPlayBox - bottomVideoContainer) +'px'
			});
		}
	}
});