var SkimmerItem = Class.create();
SkimmerItem.prototype = {
	numFrames: 			0,
	height: 			0,
	item:				null,
	imagesrc:			"",
	image:				null,
	width:				0,
	selected:			null,
	onFrameChangedFunc: null,
	currentFrame: 		0,
	locked:				false,

	initialize: function(item)
	{
		this.numFrames = item.getAttribute("data-numframes");
		this.height = item.getAttribute("data-frameheight");
		this.width = item.getAttribute("data-framewidth");
		this.imagesrc = item.getAttribute("data-skimimageurl");
		this.selected = item.getAttribute("data-selectedframe");
		this.donotreset = item.getAttribute("data-donotreset");
		if (item.getAttribute("data-onframechanged") && item.getAttribute("data-onframechanged")!="")
		{
			this.onFrameChangedFunc = item.getAttribute("data-onframechanged");
		}
		this.item = item;
		this.currentFrame = 0;

		var self = this;
		if (this.donotreset)
		{
			this.item.onclick = function(e) {self.onClicked();}
		}

		//Set Width and Height
		this.item.setStyle ({width: this.width+'px', height: this.height+'px'});
	},

	onClicked: function()
	{
		this.locked = true;
	},

	onFrameChanged: function(frame)
	{
		if (this.onFrameChangedFunc != "")
		{

		}
	},

	setFrame: function(frame)
	{
		if (this.currentFrame == frame) return;
		if (this.locked) return;

		this.item.setStyle ({backgroundPosition: 'center ' + (-frame * (this.item.getHeight() - 2)) + "px"});
		this.currentFrame = frame;

		this.onFrameChanged(frame);
	},

	doSkim: function(e)
	{
		if (!e) return;

		//Get X-Position of Mouse relativ to top-left corner of the Skim-Image
		//so we can calculate which frame to display
		var mx = Event.pointerX(e);
		var itempos = this.item.cumulativeOffset();
		var px = itempos["left"];
		var difx = mx-px;

		//Calculate the frame to display
		var frame = Math.round(difx / (this.item.getWidth()/this.numFrames));

		//Position Skim-Image with the correct frame
		this.setFrame(frame);
	},

	resetItem: function()
	{
		var frame = parseInt(this.numFrames/2);
		if (self.selected)
		{
			frame = self.selected;
		}
		this.setFrame(frame);
	},

	initItem: function(success)
	{
		var self = this;
		this.item.innerHTML = "";

		//Falls das Skim-Image kaputt oder nicht vorhanden ist ein "No Preview Bild einblenden"
		if (!success)// || this.image.height < ((this.numFrames-1)*this.height))
		{
			self.item.setStyle({backgroundImage:'url(http://static.4players.de/sourcen/portal/4players/4ptv/nopreview.png)'});
			return;
		}

		self.item.setStyle({backgroundImage:'url(' + self.image.src + ')'});

		//self.item.onmousemove = function(e) {self.doSkim(e);}
		self.item.observe('mousemove', function(e) {self.doSkim(e);});
		self.item.observe('mouseout', function(e) {
			if (!self.donotreset)
			{
				self.resetItem();
			}
			self.locked = false;
		});

		//Set initial Position in the middle of the Video
		self.resetItem();
	},

	loadImage: function()
	{
		var self = this;
		this.image = new Image();
		this.image.onload = function(){self.initItem(true);};
		this.image.onerror = function(){self.initItem(false);};
		this.image.src = this.imagesrc;
	}
};

function visible(element) {
	  if (element.offsetWidth === 0 || element.offsetHeight === 0) return false;
	  var height = document.documentElement.clientHeight,
	      rects = element.getClientRects();
	  for (var i = 0, l = rects.length; i < l; i++) {
	    var r = rects[i],
	        in_viewport = r.top > 0 ? r.top <= height : (r.bottom > 0 && r.bottom <= height);
	    if (in_viewport) return true;
	  }
	  return false;
}

var skimContainers = null;
var skimReload = false;
function initSkimmer()
{
	skimContainers = skimContainers ? skimContainers : $$('.skim');
	if (skimReload) {
		skimContainers = $$('.skim');
		skimReload = false;
	}
	skimContainers.each(function(item) {
		if (!item.hasClassName('loaded'))
		{
			if (visible(item))
			{
				var skimitem = new SkimmerItem(item);
				skimitem.loadImage();
				item.addClassName('loaded');
			}
		}
	});
}

function initContainerSkims(container)
{
	$(container).select('.skim').each(function(item) {
		if (!item.hasClassName('loaded'))
		{
			var skimitem = new SkimmerItem(item);
			skimitem.loadImage();
			item.addClassName('loaded');
		}
	});
}

Event.observe(document, 'dom:loaded', initSkimmer);
Event.observe(window, 'scroll', initSkimmer);