window.addEvent('domready',function()
{
	if(document.id('table_videos_target')){
		document.id('table_videos_target').setStyle('height','900px');
		verVideo('websqcs','table_videos_target',9);
			ovl = new Overlay(document.body,{
			onClick:function (){
				this.close();
				if(document.id('frameWrapper'))document.id('frameWrapper').destroy();
				}
			});

	}		
})//ENDOM

function verVideo(search,idTarget,max_results,index){
		if(!document.id(idTarget))return;
		theIndex=(!index)?1:index.toInt();
		_embeds=new Array();
	document.id(idTarget).set('html','<center><img src="http://sqcs.com.mx/images/spinner.gif" style="margin-top:200px" /><br/><small>cargando videos...</small></center>');
	new Request.JSONP({
		url: 'http://gdata.youtube.com/feeds/api/users/'+search+'/uploads',
		data: {
			'max-results':max_results.toInt(),
			alt:'json-in-script',
			orderby:'updated',
			'start-index':theIndex

		},
		onComplete: function(r){
			var videos=r.feed.entry;var id;var c=0;var html;var url;var titulo;var infovid;var maxr=3,test=0,Img;
			if(!document.id('controles')){
				new Element('div',{
					styles:{'text-align':'center'},
					'id':'controles',
					'html':'<a href="javascript:;" rel="ant" style="display:none"> &lt; (9)anteriores] </a> ~'
							+'<a href="javascript:;" rel="sig"> siguientes(9) &gt;</a>'
				}).inject(idTarget,'before');
				var controles=$$('#controles a');
				controles.addEvents({
					'click':function (e){
						e.stop();
						switch (this.rel){
							case 'sig':
								verVideo(search,idTarget,9,(theIndex+9).toInt());
								controles[0].removeProperty('style');
							break;
							case 'ant':
								if(theIndex>1)
									verVideo(search,idTarget,9,(theIndex-9).toInt());
								if(theIndex==1)
									controles[0].setStyle('display','none');
							break;

							default :break;
						}
						
					}
				});
			}
			
			
			
			html='<table align="center" class="table_videos" style="width:100%">';
			html+='<tr>';
			videos.each(function(el,iel){
				id=r.feed.entry[iel].link[0].href.split('=')[1].split("&")[0];
				url=r.feed.entry[iel].link[0].href.split("&")[0];
				titulo=r.feed.entry[iel].title.$t;
				fechapub=r.feed.entry[iel].published.$t.split('T')[0].split('-').reverse().join('-');
				infovid='<div class="titulo_vid"><b>'+titulo+'</b><br/><b>Fecha de publicaci&oacute;n</b>: '+fechapub+'</div>';
				_embeds[iel]='<iframe width="100%" height="100%" src="http://www.youtube.com/embed/'+id+'?autoplay=1" frameborder="0" allowfullscreen ></iframe>';
				Img='<img style="cursor:pointer" class="imgv" rel="'+iel+'" width="280" height="200" src="http://img.youtube.com/vi/'+id+'/0.jpg" title="Clic para ver el video" />';
				if(c<maxr){
					html+='<td style="background:#eee;text-align:center">'+Img+'<br/>'+infovid+'</td>';
	
				}
				else{
					html+='</tr><tr><td style="background:#eee;text-align:center">'+Img+'<br/>'+infovid+'</td>';
					c=0;
				}
				c++;
			
			});

			html+="</tr>";
			html+="</table>";
			document.id(idTarget).set('html',html);
			
			$$('.imgv').addEvents({
				'click':function(el){
					var _str=_embeds[this.get('rel')];
					ovl.open();
					new Element('div',{
						'id':'frameWrapper',
						styles:{
							'padding':'10px',
							'background':'url("http://sqcs.com.mx/images/spinner.gif") no-repeat center center #eee',
							'z-index':'950',
							'position':'fixed',
							'left':'300px',
							'top':'55px',
							'width':'600px',
							'height':'450px'
						},
						'html':_str
						
					}).inject($(document.body));
				},
				'mouseenter':function (){
					this.fade(1);
				},
				'mouseleave':function (){
					this.fade(.8);
				}
			}).fade(0.8);
		}
	}).send();
}



/*###########################################################################
				overlay
#############################################################################*/

/*
---

name: Overlay

authors:
  - David Walsh (http://davidwalsh.name)

license:
  - MIT-style license

requires: [Core/Class, Core/Element.Style, Core/Element.Event, Core/Element.Dimensions, Core/Fx.Tween]

provides:
  - Overlay
...
*/

var Overlay = new Class({

	Implements: [Options, Events],

	options: {
		id: 'overlay',
		color: '#000',
		duration: 500,
		opacity: 0.8,
		zIndex: 900/*,
		onClick: function(){},
		onClose: function(){},
		onHide: function(){},
		onOpen: function(){},
		onShow: function(){}
		*/
	},

	initialize: function(container, options){
		this.setOptions(options);
		this.container = document.id(container);

		this.bound = {
			'window': {
				resize: this.resize.bind(this),
				scroll: this.scroll.bind(this)
			},
			overlayClick: this.overlayClick.bind(this),
			tweenStart: this.tweenStart.bind(this),
			tweenComplete: this.tweenComplete.bind(this)
		};

		this.build().attach();
	},

	build: function(){
		this.overlay = new Element('div', {
			id: this.options.id,
			styles: {
				position: (Browser.ie6) ? 'absolute' : 'fixed',
				background: this.options.color,
				left: 0,
				top: 0,
				'z-index': this.options.zIndex,
				opacity: 0
			}
		}).inject(this.container);
		this.tween = new Fx.Tween(this.overlay, {
			duration: this.options.duration,
			link: 'cancel',
			property: 'opacity'
		});
		return this;
	}.protect(),

	attach: function(){
		window.addEvents(this.bound.window);
		this.overlay.addEvent('click', this.bound.overlayClick);
		this.tween.addEvents({
			onStart: this.bound.tweenStart,
			onComplete: this.bound.tweenComplete
		});
		return this;
	},

	detach: function(){
		var args = Array.prototype.slice.call(arguments);
		args.each(function(item){
			if(item == 'window') window.removeEvents(this.bound.window);
			if(item == 'overlay') this.overlay.removeEvent('click', this.bound.overlayClick);
		}, this);
		return this;
	},

	overlayClick: function(){
		this.fireEvent('click');
		return this;
	},

	tweenStart: function(){
		this.overlay.setStyles({
			width: '100%',
			height: this.container.getScrollSize().y,
			visibility: 'visible'
		});
		return this;
	},

	tweenComplete: function(){
		var event = this.overlay.getStyle('opacity') == this.options.opacity ? 'show' : 'hide';
		if (event == 'hide') this.overlay.setStyle('visibility', 'hidden');
		return this;
	},

	open: function(){
		this.fireEvent('open');
		this.tween.start(this.options.opacity);
		return this;
	},

	close: function(){
		this.fireEvent('close');
		this.tween.start(0);
		return this;
	},

	resize: function(){
		this.fireEvent('resize');
		this.overlay.setStyle('height', this.container.getScrollSize().y);
		return this;
	},

	scroll: function(){
		this.fireEvent('scroll');
		if (Browser.ie6) this.overlay.setStyle('left', window.getScroll().x);
		return this;
	}

});