window.addEvent('domready',function() {
	
	var main = $('main');
	
	var popups = main.getElements('a.popup');
	popups.addEvent('click',function(ev) {
		ev.stop();
		window.open(this.getProperty('href'));
	});

	var Layer = new Class({

		Implements: [Options],

		options: {
			iBox: document.getElement('body'),
			layerName: 'layerBackground',
			containerName: 'layerContainer',
			layerColor: '#000000',
			useSpinner: false,
			addCloseButton: false,
			maxLayerOpacity: 0.65,
			clickToClose: false
		},
			
		initialize: function(options) {
			this.setOptions(options);
			this.layer = new Element('div',{'id':this.options.layerName}).setStyles({'opacity':0, 'position':'absolute','left':0,'top':0,'z-index':1000,'background-color':this.options.layerColor}).inject(this.options.iBox);
			this.container = new Element('div',{'id':this.options.containerName}).setStyles({'opacity':0, 'position':'absolute','left':0,'top':0,'z-index':1001}).inject(this.options.iBox);
			this.inner = new Element('div').inject(this.container);
			if(this.options.useSpinner) this.inner.setStyle('background',this.options.useSpinner);
			if(this.options.addCloseButton) this.close = new Element('img',{'src':this.options.addCloseButton,'alt':'[X]'}).setStyles({'position':'absolute','top':5,'right':3,'cursor':'pointer'}).inject(this.container);
			this.makeEvents();
		},
		
		makeEvents: function() {
			this.layer.addEvent('click',function() {
				this.closeLayer();
			}.bind(this));
			window.addEvent('keyup',function(ev) {
				if(ev.key == 'esc') this.closeLayer();
			}.bind(this));
			if(this.options.addCloseButton) {
				var self = this;
				this.container.addEvents({
					'mouseenter': function() {
						self.close.fade(1);
					},
					'mouseleave': function() {
						self.close.fade(0);
					},
					'click': function() {
						if(self.options.clickToClose) self.closeLayer();
					}
				});
				this.close.cloneEvents(this.layer);
			}
		},
		
		showLayer: function(f) {
			this.container.setStyle('display','block');
			this.setLayer();
			f?this.layer.setStyle('opacity',1):this.layer.fade(this.options.maxLayerOpacity);
			this.container.fade(1);
		},
		
		closeLayer: function() {
			var al = new Fx.Tween(this.layer);
			al.start('opacity',0).chain(function() { this.container.setStyle('display','none'); }.bind(this));
			this.container.fade(0);
		},
		
		setLayer: function() {
			var bc = this.options.iBox.getScrollSize();
			this.layer.setStyles({'width':bc.x, 'height':bc.y});
		},
			
		setContainer: function() {
			this.container.setStyle('display','block');
			var ce = this.container.getSize();
			var bc = this.options.iBox.getSize();
			var x = (bc.x)/2 - ce.x/2;
			var y = (bc.y)/2 - ce.y/2;
			if(y < 10) y = 10;
			this.container.setStyles({'left':x,'top':y});
		},
		
		addInner: function(content,erease) {
			if(erease) this.inner.empty();
			if($type(content) == 'object' || $type(content) == 'element') {
				content.inject(this.inner);
			} else this.inner.set('html',content);
		}
	
	});
	
	var cSuwak = $('suwak');
	var suwak = cSuwak.getElement('div.krecha');
	var suwadlo = $('suwadlo');
	var handle = suwak.getElement('img.suwak_handle');
	var goSilder = false;
	var moveSlider = function(obj) {
		if(!goSilder) return;
		var sc;
		obj.dir == 1?sc = obj.el.step - 7:sc = obj.el.step + 7;
		obj.el.set(sc);
		//obj.el.scrollTo(0,sc);
		moveSlider.delay(20,this,obj);
	}
	var startSliding = function() {
		var sliding = new Slider(suwak,handle,{
			wheel:true,
			mode: 'vertical',
			range: [0,suwadlo.getScrollSize().y-suwadlo.getSize().y],
			onChange: function(v) {
				suwadlo.scrollTo(0,v);
			}
		});
		suwadlo.addEvent('mousewheel',function(ev) {
			ev = new Event(ev).stop();
			var step = sliding.step - ev.wheel * 15;
			sliding.set(step);
		});
		var up = cSuwak.getElement('img.suwak_up');
		var down = cSuwak.getElement('img.suwak_down');
		up.addEvents({
			'mousedown': function() {
				goSilder = true;
				var obj = {dir:1,el:sliding};
				moveSlider(obj); 
			},
			'mouseup': function() {
				goSilder = false;
				var obj = {dir:1,el:sliding};
				moveSlider(obj); 
			}
		});
		down.addEvents({
			'mousedown': function() {
				goSilder = true;
				var obj = {dir:-1,el:sliding};
				moveSlider(obj); 
			},
			'mouseup': function() {
				goSilder = false;
				var obj = {dir:-1,el:sliding};
				moveSlider(obj); 
			}
		});
	}
	startSliding.delay(10);
	
	var projekty = $('projekty');
	var big = $('big');
	var inv = $('inv');
	var abig = new Fx.Tween(big,{duration:200,'link':'cancel'});
	var screeny = projekty.getElement('div.screeny');
	var imgs = screeny.getElements('img');
	
	var proObj = new Hash({
		'p01':{
			'title':'Ultratattoo',
			'opis':'Dla studia Ultratattoo, zajmującego się piercingiem i tatuażem artystycznym, zaprojektowaliśmy i zrealizowaliśmy stronę www z pełnym zarządzaniem za pomocą systemu CMS, w tym rozbudowaną galerią.',
			'url':'www.ultratattoo.eu'
		},
		'p02':{
			'title':'WPCARAVANS',
			'opis':'Dla firmy WPCARAVANS, działającej w branży przyczem kempingowych, zaprojektowaliśmy i zrealizowaliśmy CI oraz stronę www z elementami sklepu internetowego z pełnym zarządzaniem za pomocą CMS, w tym generatorem aukcji do serwisu Allegro.pl.',
			'url':'www.wpcaravans.pl'
		},
		'p03':{
			'title':'InSensor',
			'opis':'Dla firmy InSensor&reg;, będącej częścią Ferroperm Piezoceramics A / S grupy Meggittm, zaprojektowaliśmy stronę www z pełnym zarządzaniem CMS',
			'url':'www.insensor.com'
		},
		'p04':{
			'title':'Projekt nowych pudełek dla serii Tell Me More',
			'opis':'Dla firmy Techland&reg; zaprojektowaliśmy pudełka dla nowej serii programu do nauki języków obcych - Tell Me More.',
			'url':'www.jezykownia.pl/?id=tell_me_more'
		},
		'p05':{
			'title':'Projekt i realizacja Jezykownia.pl wortalu komunikacji międzyjęzykowej',
			'opis':'Dla firmy Techland&reg; zaprojektowaliśmy i wdrożyliśmy wortal komunikacji językowej - stronę produktów do tłumaczeń i nauki języków obcych.',
			'url':'www.jezykownia.pl'
		},
		'p06':{
			'title':'Projekt i realizacja strony firmowej dla Techland&reg;',
			'opis':'Dla firmy Techland&reg; zaprojektowaliśmy i wdrożyliśmy firmową stronę internetową z pełnym zarządzaniem za pomocą systemu CMS, z uwzględniem podziału językowego.',
			'url':'www.techland.pl'
		},
		'p07':{
			'title':'Projekt i realizacja strony bazaRecenzji.pl',
			'opis':'Dla firmy Techland&reg; zaprojektowaliśmy i wdrożyliśmy rozbudowany agregat recenzji gier, muzyki i filmu z pełnym zarządzaniem za pomocą systmu CMS. Poza bazą recenzji, strona posiada elementy społecznościowe w postaci komentarzy i ocen użytkowników, a także dodawaniem przez nich nowych pozycji i własnych recenzji. Każdy użytkownik posiada własną podstronę, na której może śledzić historię swojej bytności.',
			'url':'www.bazarecenzji.pl'
		},
		'p08':{
			'title':'Nettle',
			'opis':'Dla firmy Nettle, zaprojektowaliśmy i wykonaliśmy rozbudowany serwis internetowy z pełnym zarządzaniem CMS i rozbudowanym systemem językowym.',
			'url':'www.nettle.pl'
		}
	});
	
	var changeProjekt = function(e) {
		var id = e.getProperty('rel');
		var mini = big.getElement('div.mini');
		var a = mini.getElement('a.galeria');
		var img = e.clone();
		var title = big.getElement('h4');
		var opis = big.getElement('div.akapit');
		var url = big.getElement('a.url');
		var data = proObj.get(id);
		mini.setProperty('rel',id);
		a.setProperty('href',img.getProperty('src').replace('.jpg','_b.jpg'));
		a.setProperty('title','Pokaż galerię dla '+data.title);
		title.set('html',data.title);
		opis.set('html',data.opis);
		url.setProperty('href','http://'+data.url);
		url.setProperty('title','Przejdź do projektu '+data.url);
		url.set('html',data.url+' &#187;');
		a.empty().grab(img.removeProperty('style'));
		abig.start('opacity',1);
	}
	
	imgs.each(function(e) {
		var pos = e.getCoordinates(screeny);
		var wr = new Element('div').setStyles({'position':'relative','width':pos.width,'height':pos.height,'float':'left','margin-right':3}).inject(screeny).grab(e);
		var ae = new Fx.Morph(e,{duration: 200,'link':'cancel'});
		var shadow = '0px 0px 10px 3px #000000';
		e.addEvents({
			'mouseenter': function() {
				if(Browser.Engine.gecko) {
					e.setStyle('-moz-box-shadow',shadow);
				} else if(Browser.Engine.webkit) {
					e.setStyle('-webkit-box-shadow',shadow);
				} else if(Browser.Engine.presto) {
					e.setStyle('box-shadow',shadow);
				} else e.setStyle('filter','progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135)');
				e.setStyle('z-index',10);
				ae.start({'top':9,'left': -(pos.width*1.5)/8,'height':pos.height*1.25,'width':pos.width*1.25});
			},
			'mouseleave': function() { 
				ae.start({'height':pos.height,'width':pos.width,'top':19,'left':0}).chain(function() {
					if(Browser.Engine.gecko) {
						e.setStyle('-moz-box-shadow','none');
					} else if(Browser.Engine.gecko) {
						e.setStyle('-webkit-box-shadow','none');
					} else if(Browser.Engine.gecko) {
						e.setStyle('box-shadow','none');
					}  else e.setStyle('filter','none');
					e.setStyle('z-index',0);
				});
			},
			'click': function() {
				if(!e.hasClass('wybrany')) {
					abig.start('opacity',0).chain(function() { changeProjekt(e); });
					screeny.getElement('img.wybrany').removeClass('wybrany');
					e.addClass('wybrany');
				}
			}
		});
		wr.cloneEvents(e);
	});
	screeny.setStyle('width',imgs.length*(imgs[0].getSize().x+3));
	
	var play = big.getElement('div.play').setStyle('opacity',0);
	var mini = big.getElement('div.mini');
	var aplay = new Fx.Tween(play,{duration:200,'link':'cancel'});
	var sLayer = new Layer({
		useSpinner: 'url(img/loader.gif) no-repeat center center',
		addCloseButton: 'img/close.png',
		clickToClose: true
	});
	mini.addEvents({
		'mouseenter': function() {
			play.setStyle('display','block');
			aplay.start('opacity',0.9);
		},
		'mouseleave': function() {
			aplay.start('opacity',0).chain(function() { play.setStyle('display','none'); });
		},
		'click': function() {
			sLayer.addInner($(mini.getProperty('rel')).getElement('img').clone(),true);
			sLayer.setContainer();
			sLayer.showLayer();
		}
	});
	
	var scrollProjekty = function() {
		var p = screeny.getParent();
		var sliding = new Slider(projekty.getElement('div.krecha'),projekty.getElement('img.suwak_handle'),{
			wheel:true,
			//mode: 'vertical',
			range: [0,p.getScrollSize().x-p.getSize().x],
			onChange: function(v) {
				p.scrollTo(v,0);
			}
		});
		p.addEvent('mousewheel',function(ev) {
			ev = new Event(ev).stop();
			var step = sliding.step - ev.wheel * 15;
			sliding.set(step);
		});
		var up = projekty.getElement('img.la');
		var down = projekty.getElement('img.ra');
		up.addEvents({
			'mousedown': function() {
				goSilder = true;
				var obj = {dir:1,el:sliding};
				moveSlider(obj); 
			},
			'mouseup': function() {
				goSilder = false;
				var obj = {dir:1,el:sliding};
				moveSlider(obj); 
			}
		});
		down.addEvents({
			'mousedown': function() {
				goSilder = true;
				var obj = {dir:-1,el:sliding};
				moveSlider(obj); 
			},
			'mouseup': function() {
				goSilder = false;
				var obj = {dir:-1,el:sliding};
				moveSlider(obj); 
			}
		});
	}
	scrollProjekty.delay(100);
	
	var sLayer2 = new Layer({
		addCloseButton: 'img/close.png'
	});
	
	main.getElement('div.kontakt').getElements('a').addEvent('click',function(ev) {
		ev.stop();
		sLayer2.addInner(inv.getElement('div.a'+this.getProperty('id')).clone(),true);
		sLayer2.setContainer();
		sLayer2.showLayer();
	});
	
	/*proObj.each(function(e) {
		var d = new Element('div',{'html':'<h4>'+e.title+'</h4><div class="akapit">'+e.opis+'</div><a href="'+e.url+'" title="'+e.url+'">'+e.url+'</a>'});
		inv.grab(d);
	});*/
	
});