var Popper = new Class({

	getOptions: function(){
		return {
			colour: '#fff',
			zIndex: 50,
			container: document.body,
			onClick: Class.empty,
			popinspeed: 900,
			popintrans: Fx.Transitions.Bounce.easeOut,
			popoutspeed: 350,
			popouttrans: Fx.Transitions.Quad.easeIn,
			hiddenXcoord: '-260px',
			carouselspeed: 2500
		};
	},

	initialize: function(linkclass,options){
		this.setOptions(this.getOptions(), options);
		
		this.options.container = $(this.options.container);

		this.overlay = new Overlay({onClick:this.close.bind(this),opacity: 0.5,background: '#eee url(/_lib/_images/_structure/diags.gif)'});
		//this.overlay.show();

		

		this.popper = new Element('div').setProperty('id', 'popper').setStyles({
			position: 'absolute',
			left: '94px',
			top: this.options.hiddenXcoord,
			width: '570px',
			height: '190px',
			padding: '20px 0px 2em 20px',
			border: '1px solid #ccc',
//			overflow: 'auto',
//			opacity: 0.6,
			zIndex: this.options.zIndex,
			backgroundColor: this.options.colour
		}).injectInside(this.options.container);
		

		this.popin = new Fx.Styles(this.popper, {onComplete: this.showclose.bind(this),duration: this.options.popinspeed, transition: this.options.popintrans});
		this.popout = new Fx.Styles(this.popper, {duration: this.options.popoutspeed, transition: this.options.popouttrans});
		
		this.poppers = $$('.'+linkclass);

		this.poppers.each(function(el,i){
			el.index = i;
			//console.log(this);
			//el.onclick = this.open.pass(el, this);

			if(window.ie6){
				el.addEvents({
					mouseenter: function(){
						el.getFirst().setStyle('display','block');
					},
					mouseleave: function(){
						//alert(el.hasClass('over'));
						el.getFirst().setStyle('display','none');
					}
				});
			}
			
			el.addEvent('click',function(e){
				//console.log(this);
				new Event(e).stop();
				popper.open(this.href.substr(el.href.indexOf('?')+1));
			});
			
			/*
			if(el.href.indexOf('#') > -1){
				el.content = $(el.href.substr(el.href.indexOf('#')+1));
				if(el.content){el.content.setStyle('display','none');}
			}
			*/
		}, this);

		//this.open('

	},

	open: function(query) {
		url = 'index.php?ajax&'+query;
		//console.log('opening: '+url);
		this.overlay.show();

		this.popin.start({
			top: '110px'
		});
		this.popper.innerHTML = '';

		new Ajax(url, {
			method: 'get',
			update: this.popper,
			onComplete: this.initcontent.bind(this)
		}).request();

	},

	close: function() {
		//console.log('closing');

		this.popout.start({
			top: this.options.hiddenXcoord
		});
		if(this.carousel){
			this.carousel.stop();
		}
		this.overlay.hide();
	},

	initcontent: function() {
		
		if(this.popper.getFirst().getFirst().getChildren().length>1){
			//console.log('carousel');
			//if(this.contentContainer.getFirst().getFirst().
			
			this.carousel = new CNETcarousel(this.popper.getFirst(), {
				slideInterval: this.options.carouselspeed
			});
		}
	},

	showclose: function(){
		this.controls = new Element('div').setProperty('id', 'controls').setStyles({
				position: 'absolute',
				left: '0px',
				bottom: '0px',
				width: '590px',
				padding: '4px 0',
				backgroundColor: '#ccc',
		//		'border-top': '1px solid #ccc',
				color: '#000',
				'text-align': 'right',
		//			overflow: 'auto',
				opacity: 0,
				zIndex: this.options.zIndex
			}).injectInside(this.popper);
			
			this.closelink = new Element('span',{'class':'closelink'}).setText('Close [X]').addEvent('click',function(){
				popper.close();
			}).injectInside(this.controls);
		
		this.showclosefx = new Fx.Style(this.controls, 'opacity', {duration:200});
		this.showclosefx.start(1);
		
	}

});
Popper.implement(new Options);