var staticMooTools = null;

MootoolsExample = function(baseURL) {
	staticMooTools = this;
	this.init(baseURL);	
};

MootoolsExample.PREVIEW_WIDTH = 425;
MootoolsExample.PREVIEW_HEIGHT = 335;
MootoolsExample.UPDATE_INTERVAL = 10000; //each 10 seconds

MootoolsExample.prototype = {
	
	baseURL: null,
	callingRemote: null,
	items: null,	
	pendingItems: null,
	
	htmlShadow: null,
	htmlPreview: null,
	htmlEmbedded: null,
	htmlItems: null,
	htmlFirstItem: null,
		
	init: function(baseURL) {
		this.callingRemote = false;
		this.baseURL = baseURL;
		this.items = new Array();		
		
		this.htmlShadow = $('shadow');
		this.htmlPreview = $('preview');
		this.htmlEmbedded = $('embedded');
		
		this.htmlItems = $('rssItems');		
		
		//set interval
		setInterval(this.update, MootoolsExample.UPDATE_INTERVAL);
		this.update();
	},
	
	indexLink: function(link) {
		var k=0;
		
		for (k=0; k<this.items.length; k++) {
			if (this.items[k].link == link)
				return k;
		}
		
		return -1;
	},
	
	update: function() {
		
		if (!staticMooTools.callingRemote && staticMooTools.pendingItems == null) {
			staticMooTools.callingRemote = true;
			
			var jsonRequest = new Json.Remote(staticMooTools.baseURL+'/showcase/demos/javascript-Mootools-RSS/index.php?r='+Math.random(), {onComplete: staticMooTools.updateComplete});
			jsonRequest.caller = staticMooTools;
			jsonRequest.send();
		}
	},
	updateComplete: function(rssItems) {
		var me = this.caller;
		var i = 0;
		var sliderEffect = null;
		me.callingRemote = false;
		
		me.pendingItems = rssItems;		
		me.animateItem();
	},
	
	animateItem: function() {
		var me = this;
		var item = null;
		
		if (this.caller)
			me = this.caller;
					
		if (me.pendingItems.length) {
			item = me.pendingItems.pop();
			
			if (me.indexLink(item.link) == -1) {
				
				//append link
				me.items.push(item);
								
				sliderEffect = new Fx.Slide(me.renderItem(item), {mode: 'horizontal', onComplete: me.animateItem});
				sliderEffect.caller = me;
				sliderEffect.hide();
				sliderEffect.slideIn();								
			} else //run again manually
				me.animateItem();
		} else 
			me.pendingItems = null;
	},
	
	renderItem: function(item) {
		var rootElement = document.createElement('div');
		var spanClearElement = document.createElement('span');
		var thumbnailElement = document.createElement('div');
		var contentElement = document.createElement('div');
		var innerElementOne = document.createElement('a');
		var innerElementTwo = document.createElement('img');
		
		var hrefPreviewOne = null;
		var hrefPreviewTwo = null;
		
		
		rootElement.className = 'rssItem';
		rootElement.id = 'rssItem'+this.items.length;		
		
		item.htmlID = rootElement.id;
		thumbnailElement.className = 'thumbnail';
		innerElementOne.href="javascript:void(0);";
		innerElementOne.caller = this;
		innerElementOne.item = item;
		hrefPreviewOne = innerElementOne;
		
		innerElementTwo.src = item.thumbnail;
		innerElementOne.appendChild(innerElementTwo);
		thumbnailElement.appendChild(innerElementOne);
		rootElement.appendChild(thumbnailElement);
		
		
		//now content
		contentElement.className = 'content';
		innerElementOne = document.createElement('div');
		innerElementOne.className = "title";	
		innerElementOne.innerHTML = item.title;
		contentElement.appendChild(innerElementOne);
				
		innerElementOne = document.createElement('div');
		innerElementOne.className = "posted";	
		innerElementOne.innerHTML = item.time;
		contentElement.appendChild(innerElementOne);
		
		innerElementOne = document.createElement('div');
		innerElementOne.className = "link";	
		
		innerElementTwo = document.createElement('a');
		innerElementTwo.href="javascript:void(0);";
		innerElementTwo.caller = this;
		innerElementTwo.item = item;
		innerElementTwo.innerHTML = 'Preview';
		hrefPreviewTwo = innerElementTwo;
		innerElementOne.appendChild(innerElementTwo);
		
		innerElementTwo = document.createElement('span');
		innerElementTwo.innerHTML = '&nbsp;or&nbsp;';
		innerElementOne.appendChild(innerElementTwo);
		
		innerElementTwo = document.createElement('a');
		innerElementTwo.href = item.link;
		innerElementTwo.target = '_blank';		
		innerElementTwo.innerHTML = 'View video on youtube.com';		
		innerElementOne.appendChild(innerElementTwo);
				
		contentElement.appendChild(innerElementOne);		
		rootElement.appendChild(contentElement);
		
		spanClearElement.className = 'clear';
		spanClearElement.innerHTML = '&nbsp;';
		rootElement.appendChild(spanClearElement);
		
		this.htmlItems.appendChild(rootElement);
		//for last preprend to items
		if (this.htmlFirstItem)
			$(item.htmlID).injectBefore(this.htmlFirstItem);
			
		this.htmlFirstItem = item.htmlID;
		
		hrefPreviewOne.onclick = this.showPreview;
		hrefPreviewTwo.onclick = this.showPreview;
		return item.htmlID;
	},
	
	showPreview: function() {
		var me = this.caller;
		var item = this.item;
		var itemPosition = $(item.htmlID).getPosition();
		
		var positionLeft=0;
		var positionTop=0;
		var viewportHeight = Window.getScrollTop() + Window.getHeight();
		
		//show shadow item
		me.htmlShadow.style.width = Window.getScrollWidth()+"px";
		me.htmlShadow.style.height = Window.getScrollHeight()+"px";
		me.htmlShadow.style.display = 'block';
		
		//calculate preview position
		positionLeft = (Window.getScrollWidth() - MootoolsExample.PREVIEW_WIDTH)/2;
		
		if (itemPosition.y + MootoolsExample.PREVIEW_HEIGHT > viewportHeight ) {

			positionTop = Math.max(5, viewportHeight - MootoolsExample.PREVIEW_HEIGHT - 40);
					
		} else 
			positionTop = itemPosition.y;
		
				
		/* render */
		me.htmlPreview.style.top = positionTop+"px";
		me.htmlPreview.style.left = positionLeft+"px";		
		me.htmlPreview.style.display = 'block';
		
		me.htmlEmbedded.innerHTML = '<object width="'+MootoolsExample.PREVIEW_WIDTH+'" height="'+MootoolsExample.PREVIEW_HEIGHT+'"><param name="movie" value="'+item.swf+'"></param><param name="wmode" value="transparent"></param><embed src="'+item.swf+'" type="application/x-shockwave-flash" wmode="transparent" width="'+MootoolsExample.PREVIEW_WIDTH+'" height="'+MootoolsExample.PREVIEW_HEIGHT+'"></embed></object>';
	},
	closePreview: function() {
		//hide shadow item
		this.htmlShadow.style.display = 'none';		
		this.htmlPreview.style.display = 'none';		
	}
};