(function(window, document) {

var layout = {
	loading: document.getElementById('loading'),
	thumbnails: document.getElementById('thumbnails'),
	remarks: document.getElementById('remarks'),
	shader: document.getElementById('shader'),
	
	videolayer: document.getElementById('videolayer'),
	videoframe: document.getElementById('videoframe'),
	videoplayer: document.getElementById('videoplayer'),
	videotitle: document.getElementById('videotitle'),
	videonext: document.getElementById('videonext'),
	videoprevious: document.getElementById('videoprevious'),
	videoclose: document.getElementById('videoclose'),
	videolink: document.getElementById('videolink')
};

var previousVideo = null;
window.Video = function(title, url, id, imageurl) {
	this.title = title;
	this.url = url;
	this.id = id;
	
	var element = document.createElement('div');
	element.style.cssText = 'float: left; clear: none; height: 145px; margin: 5px; border: 1px solid #c8cccc;';
	element.innerHTML = '<div><img src="/media/image/video/thumb/' + imageurl + '"></div><div>' + title + '</div>';
	element.childNodes[0].style.cssText = 'position: relative; top: 0px; left: 0px; width: 100px; height: 100px; margin: 2px 2px 2px 2px; border: none; overflow: hidden;';
	element.childNodes[0].firstChild.style.cssText = 'position: absolute; top: 0px; left: 0px; float: none; margin: 0; border: none;';
	element.childNodes[1].style.cssText = 'width: 100px; margin: 0 2px 0 2px; text-align: center; font: bold 10px sans-serif; color: #95a1a6;';
	element.videoObject = this;
	
	this.nextVideo = null;
	
	this.previousVideo = previousVideo;
	if (previousVideo) previousVideo.nextVideo = this;
	
	element.onclick = function() {
		openPlayer();
		setPlayer(this.videoObject);
	}
	
	element.onmouseover = 
	element.onmouseout = function(event) {
		switch (event ? event.type : window.event.type) {
			case 'mouseover':
				this.firstChild.firstChild.style.top = '-100px';
				this.style.borderColor = '#95a1a6';
				this.childNodes[1].style.color = '#6e8289';
				break;
			case 'mouseout' :
				this.firstChild.firstChild.style.top = '0px';
				this.style.borderColor = '#c8cccc';
				this.childNodes[1].style.color = '#95a1a6';
		}
	}
	
	previousVideo = this;
	
	lastSeason.lastChild.appendChild(element);
	
	/* cimke igazítása */ if ((m = element.childNodes[1].offsetHeight/14) < 3) element.childNodes[1].style.marginTop = 7 * (3-m) + 'px';
};

var lastSeason = layout.thumbnails;
window.Season = function(title) {
	var element = document.createElement('div');
	element.style.cssText = 'float: left; clear: both; width: 470px;';
	
	var elementTitle = document.createElement('div');
	elementTitle.innerHTML = title;
	elementTitle.style.cssText = 'display: block; height: 16px; padding-top: 1px; margin: 4px 4px 4px 4px; background: #e7ebeb url(/media/image/video/cmp/toggle.gif) no-repeat scroll 3px 3px; color: #6E8289; font: bold 11px sans-serif; text-align: center; cursor: pointer;';
	//elementTitle.style.cssText = 'display: block; height: 17px; padding-top: 1px; margin: 4px 4px 4px 4px; background: #e7ebeb url(cmp/toggle.gif) no-repeat scroll 3px 3px; color: #6E8289; font: bold 11px sans-serif; text-align: center; cursor: pointer;';
	
	var elementThumbs = document.createElement('div');
	elementThumbs.style.cssText = 'display: block; visibility: hidden; height: 0px; overflow: hidden;';
	
	element.appendChild(elementTitle);
	element.appendChild(elementThumbs);

	new Toggle(elementTitle, elementThumbs);
	
	layout.thumbnails.appendChild(element);
	lastSeason = element;
};

function Toggle(element, wrapper) {
	this.openState = false;
	this.wrapper = wrapper;
	element.toggle = this;
	element.onclick = function() {
		if (this.toggle.openState) {
			this.toggle.wrapper.style.visibility = 'hidden';
			this.toggle.wrapper.style.height = '0px';
			this.style.backgroundPosition = '3px 3px';
		}
		else {
			this.toggle.wrapper.style.visibility = 'visible';
			this.toggle.wrapper.style.height = 'auto';
			this.style.backgroundPosition = '3px -12px';
		}
		this.toggle.openState = !this.toggle.openState;
	}
}

var thumbnailsAbsolutePos = function() {;
	var abspos = 0;
	var element = layout.thumbnails;
	while (element = element.offsetParent)
		abspos += element.offsetTop;
	return abspos;
}();
function openPlayer() {
	layout.videolayer.style.display = 'block';
	layout.shader.style.height = layout.thumbnails.offsetHeight + 'px';
	
	var framepos = document.documentElement.scrollTop - thumbnailsAbsolutePos;
	
	if (framepos < 50)
		layout.videoframe.style.top = 50 + 'px';
	else if (framepos + 400 > layout.thumbnails.offsetHeight)
		layout.videoframe.style.top = layout.thumbnails.offsetHeight - 400 + 'px';
	else
		layout.videoframe.style.top = framepos + 50 + 'px';
}

var currentVideo = null;
function setPlayer(videoObject) {
	layout.videoplayer.innerHTML = '<embed src="http://assets.indavideo.hu/swf/player.swf" flashvars="vID=' + videoObject.id + '&onsite=1&autostart=0" width="420" height="339" type="application/x-shockwave-flash" allowfullscreen="true" />';
	layout.videotitle.innerHTML = videoObject.title;
	layout.videolink.href = 'http://www.indavideo.hu/video/' + videoObject.url;
	
	if (videoObject.previousVideo) {
		layout.videoprevious.style.visibility = 'visible';
		layout.videoprevious.title = 'Előző videó: ' + videoObject.previousVideo.title;
	} else layout.videoprevious.style.visibility = 'hidden';
	
	if (videoObject.nextVideo) {
		layout.videonext.style.visibility = 'visible';
		layout.videonext.title = 'Következő videó: ' + videoObject.nextVideo.title;
	} else layout.videonext.style.visibility = 'hidden';
	
	currentVideo = videoObject;
}

layout.videoclose.onclick = function() {
	layout.videoplayer.innerHTML = '';
	layout.videolayer.style.display = 'none';
}
layout.videonext.onclick = function() {
	setPlayer(currentVideo.nextVideo);
}
layout.videoprevious.onclick = function() {
	setPlayer(currentVideo.previousVideo);
}

window.onload = function() {
	layout.remarks.style.visibility = 'visible';
	layout.thumbnails.style.visibility = 'visible';
	layout.loading.style.display = 'none';
	lastSeason.firstChild.onclick();
}

})(this, this.document);