var Slider = new Class({
	Implements: [Options, Events],
	options: {
		path: '/images/slider/',
		data: {},//'slides.json',
		transition: Fx.Transitions.Back.easeInOut,
		duration: 1200,
		delay: 10,
		language: 'pl'
	},
	initialize: function(options){
		this.setOptions(options);
		this.ie = Browser.Engine.trident && Browser.Engine.version < 7 ? true : false;
		this.slides = [];
		this.preloaded = [];
		this.wrapper = new Element('div', {
			'class': 'slider-wrapper'
		});
		this.build(this.options.data);
		$(window).addEvent('resize', function(){
			var width = $(document.body).getSize().x;
			$$('.slider-wrapper .slide').setStyle('width', width);
			$('panel-home-flash').setStyle('background-size', (width > 1680 ? '100% 361px' : ''));
			if (this.ie) {
				$('panel-home-flash').setStyle('background-image', (width > 1680 ? 'url("/images/flash-bg-wide.jpg")' : 'url("/images/flash-tlo.jpg")'));
			}
		});
	},
	load: function() {
		this.request = new Request.JSON({
			url: this.options.path + this.options.data,
			onSuccess: function(result) {
				this.build(result);
			}.bind(this)
		});
		this.request.get();
	},
	build: function(data) {
		this.data = data[this.options.language];
		this.data.each(function(element){
			if (this.ie) {
				var link = new Element('a', {
					'class': 'slide',
					'href' : element.url
				});
			}
			else {
				var link = new Element('div', {
					'class': 'slide',
					'html' : '<a href="' + element.url +'">' + element.text + '</a>'
				});
			}
			link.setStyle('background-image', 'url("' + this.options.path + element.image + '")');
			this.slides.push(link);
		}.bind(this));
		this.fx();
		this.inject();
	},
	fx: function() {
		this.fxs = [];
		this.slides.each(function(element){
			var fxIn = new Fx.Morph(element, {
				duration: this.options.duration,
				transition: this.options.transition,
				onComplete: function() {
					!this.ie ? element.fade(1) : null;
				}.bind(this)
			});
			var fxOut = new Fx.Morph(element, {
				duration: this.options.duration,
				transition: this.options.transition,
				onComplete: function() {
					element.dispose();
				}
			});
			this.fxs.push([fxIn, fxOut]);
		}.bind(this));
	},
	inject: function() {
		var injectSlide = function(index) {
			var width = $(document.body).getSize().x;
			if (this.slides[index + 1] && !this.preloaded[index + 1]) {
				this.preload(this.data[index + 1].image);
				this.preloaded[index + 1] = true;
			}
			this.slides[index].inject(this.wrapper).setStyles({
				'width': width,
				'margin-left' : (this.ie ? 0 : -width / 1.5)
			});
			if (this.ie) {
				this.fxs[index][0].start({
					'margin-left': 0
				});
			}
			else {
				this.slides[index].setStyle('opacity', 0.01)
				this.fxs[index][0].start({
					'margin-left': 0,
					'opacity': 1
				});
			}
			
			(function(){
				if (this.ie) {
					this.fxs[index][1].start({
						'margin-left': -width
					});
				}
				else {
					this.fxs[index][1].start({
						'opacity': 0,
						'margin-left': -width
					});
				}				
				if (this.slides[index + 1]) {
					injectSlide(index + 1);
				}
				else {
					injectSlide(0);
				}
			}.bind(this)).delay(this.options.delay * 1000);
		}.bind(this);
		injectSlide(0);
	},
	preload: function(image) {
		new Element('img', {
			src: this.options.path + image
		}).setStyles({
			position: 'absolute',
			top: '-999999px',
			left: '-9999999px',
			visibility: 'hidden'
		}).inject(document.body);
	},
	toElement: function() {
		return this.wrapper;
	}
});
document.addEvent('domready', function(){
	$('panel-home-flash').setStyle('background-size', ($(document.body).getSize().x > 1680 ? '100% 361px' : ''));
	if (Browser.Engine.trident && Browser.Engine.version < 7) {
		$('panel-home-flash').setStyle('background-image', ($(document.body).getSize().x > 1680 ? 'url("/images/flash-bg-wide.jpg")' : 'url("/images/flash-tlo.jpg")'));
	}
	$(new Slider({
		language: $$('#lang .active #pl').length ? 'pl' : 'en',
		delay: 8,
		data: {
			pl:[
				{
					url: '/index.php?id=9&action=details&id_project=32',
					text: 'Woli & Tysio na pokładzie',
					image: 'slide1.png'
				},
				{
					url: '/index.php?id=9&action=details&id_project=22',
					text: 'Kocham Cię Polsko',
					image: 'slide2.png'
				},
				{
					url: '/index.php?id=9&action=details&id_project=31',
					text: 'Szymon na żywo',
					image: 'slide3.png'
				},
				{
					url: '/index.php?id=9&action=details&id_project=28',
					text: 'Milion w minutę',
					image: 'slide4.png'
				}
			],
			en:[
				{
					url: '/index.php?id=9&action=details&id_project=32',
					text: 'Woli & Tysio on board',
					image: 'slide1_en.png'
				},
				{
					url: '/index.php?id=9&action=details&id_project=22',
					text: 'Kocham Cię Polsko',
					image: 'slide2_en.png'
				},
				{
					url: '/index.php?id=9&action=details&id_project=31',
					text: 'Szymon na żywo',
					image: 'slide3_en.png'
				},
				{
					url: '/index.php?id=9&action=details&id_project=28',
					text: 'Milion w minutę',
					image: 'slide4_en.png'
				}
			]
		}
	})).inject($('panel-home-flash'));
});