//jedyna globalna zmienna
var Portfolio = {};

/*
 * klasa do podstaw serwisu
 * - menu
 * - ladowanie podstron
 * - obsluga historii
 * - czytanie adresu
 */
Portfolio.Website = new Class({

	Implements: Options,

    options: {
		hash: '',
		baseUrlRegExp: /http\:\/\/(www\.)?diseno\.pl\/index\.php/,
		baseUrl: 'http://www.diseno.pl/index.php',
		content: 'content'
    },

    initialize: function(options){
		this.setOptions(options);
		this.hash = this.options.hash;
		this.checkUrl();
		this.menu();
	},

	menu: function() {
		$$('#menu ul ul').each(function(el,index){
		el.setStyle('top',index * 29 + 'px');
	});
	$$('#menu li').each(function(el){
		var fx = new Fx.Morph(el,{
			link:'cancel'
		});
		if (el.getParent().getElement('ul')) {
			el.getParent().getElement('ul').fade('hide');
		}
		el.setStyles({
			'background-color':'#e6e5e1',
			'color':'#000',
			'border-color':"#000"
		});
		el.addEvents({
			'mouseover':function(e){
				el.addClass('hover');
				fx.start({
					'background-color':'#fff'
				});
				if (el.getElement('ul')) {
					el.getElement('ul').fade(0.98);
					el.addClass('active');
				}
			},
			'mouseleave':function(e){
				if (!el.hasClass('active')) {
					fx.start({
						'background-color':'#e6e5e1'
					});
				}
				(function(){
					if(el.getElement('ul')) {
						if(!el.getElement('ul').getElement('li.hover')) {
							el.getElement('ul').fade(0);
							fx.start({
								'background-color':'#e6e5e1'
							});
						}
					}
				}).delay(200);
				el.removeClass('hover');
			}
		})
	});
	$$('#menu li a').each(function(el){
		if (el.getParent('li').get('id') == 'blog') {
			return;
		}
		el.store('href',el.get('href'));
		var baseUrl = /http\:\/\/(www\.)?diseno\.pl\/index\.php/;
		el.set('href','#' + el.retrieve('href').replace(baseUrl, ''));
		if(el.getParent('li').getElement('ul')) {
			el.addEvent('click',function(e){
				var e = new Event(e);
				e.preventDefault();
			});
		}
		else {
			el.addEvent('click',function(e){
				this.load(el.retrieve('href'));
			}.bind(this));
		}
	}.bind(this));		
	},

    checkUrl: function() {
        var url = window.location.href.toString();
		var baseUrlRegExp = /http\:\/\/(www\.)?diseno\.pl\/index\.php/;
		var baseUrl = 'http://www.diseno.pl/index.php';
		
        if(url.indexOf('#')>-1) {
            currentHash = url.substr(url.indexOf('#') + 1,url.length);
        }
        else {
			currentHash = '';
			if (url != this.options.baseUrl && url.length > this.options.baseUrl.length) {
				currentHash = url;
			}
        }
        if(currentHash == '') {
            currentHash = ''
        }
        if(currentHash != this.hash && currentHash != '' && '/contact' != basename(url)) {
            this.hash = currentHash;
            if(this.hash == '') {
                this.hash = '';
            }
			if (!this.hash.match(this.options.baseUrlRegExp)) {
				this.hash = this.options.baseUrl + this.hash;
			}
			this.load(this.hash);
        }
        url = undefined;
        currentHash = undefined;
    },
	
	load: function(url) {

		new Request({

			url: url,

			onRequest: function() {
				//fejdowanie contentu
				$(this.options.content).fade(0);
			}.bind(this),

			onComplete: function(response) {
				$(this.options.content).set('html',response).fade(1);
				if ($('zoom') && $('thumbs')) {
					new Portfolio.Gallery();
				}
				$(this.options.content).fade(1)
			}.bind(this)
		}).send();
	}
	
});

/*
 * klasa od obslugi galerii zdjec
 */
Portfolio.Gallery = new Class({

	Implements: Options,

    options: {
		thumbs: 'thumbs',
		zoom: 'zoom'
    },

    initialize: function(options){
		this.thumbs = $(this.options.thumbs);
		
		this.setOptions(options);
		//dodajemy wygszacze po lewej i prawej - skasowac z diseno
		new Element('div', {
			'class': 'fade-left'
		}).inject(this.thumbs, 'after');
		new Element('div', {
			'class': 'fade-right'
		}).inject(this.thumbs, 'after');

		this.thumbsLi = this.thumbs.getElements('li');
		this.thumbsLi.fade('hide');
		//jesli jest w ogole jakas minuatura dajemy jej odpowiedni margin i zapalamy, storujemy aktualne opacity
		if (this.thumbsLi[0]) {
			this.thumbsLi[0].fade(1).setStyle('margin-left', '296px').store('o', 1);
			//sprawdzamy czy sa kolejne miniatury i odpowiednio odfejdowujemy
			if (this.thumbsLi[1]) {
				this.thumbsLi[1].fade(0.7).store('o', 0.7);
				if (this.thumbsLi[2]) {
					this.thumbsLi[2].fade(0.5).store('o', 0.5);
					if (this.thumbsLi[3])
						this.thumbsLi[3].fade(0.3).store('o', 0.3);
				}
			}
		}

		//jesli jest link do duzego zdjecia ustawiamy go na aktywny
		if(this.thumbs.getElement('a'))
			this.thumbs.getElement('a').addClass('active');

		//loader w pole na powiekszenie
		$(this.options.zoom).addClass('loading');

		//jesli w polu na powiekszenie jest juz jakis obrazek wygaszamy go
		if ($(this.options.zoom).getElement('img')) 
			$(this.options.zoom).getElement('img').fade(0);

		//akcje dla kazdej miniatury
		this.thumbs.getElements('a').each(function(element, index){
			element.set('href','#'+element.get('href'));
			new Portfolio.Photo({
				element: element,
				index: index
			});

		});
							
		// find current image
		var currentImage = null;
		var url = basename(window.location.href.toString());


		this.thumbs.getElements('a').each(function(el, index){
			if (basename(el.getElement('img').get('src').replace('.min.', '.')).match(url)) {
				currentImage = el.getElement('img').get('src').replace('.min.', '.');
				el.fireEvent('click');
			}
		});

		new Asset.image(currentImage, {
			onload: function(){
				$('zoom').empty().removeClass('loading').fade(0).fade(1);
				this.inject($('zoom')).erase('height').erase('width');
				this.addEvent('click', function(e) {
					nextImage(this);
				});
		
			fixSize();
			}
		});
		
		this.preload();
		
	},
	
	preload: function() {
		this.thumbsLi.each(function(el){
			//if(el.retrieve('o')>0 && )
			if (!el.retrieve('l')) {
				new Asset.image(el.getElement('img').get('src').replace('.min.','.'));
				el.store('l',1);
			}
			
			el.getElement('img').removeEvents('click');
			
			el.getElement('img').addEvent('click', function(){
				this.preload();
			}.bind(this));
		}.bind(this));
	}

});

/*
 * klasa od obslugi pojedynczego zdjecia
 */
Portfolio.Photo = new Class({

	Implements: Options,

    options: {
		element: null,
		index: 0,
		zoom: 'zoom',
		thumbs: 'thumbs'
    },

    initialize: function(options){
		this.setOptions(options);
		
		this.thumbs = $(this.options.thumbs);
		this.zoom = $(this.options.zoom);
		
		this.thumb = this.options.element.getElement('img');
		this.imageSrc = this.thumb.get('src').replace('.min.', '.');
		
		this.fx = new Fx.Scroll(this.thumbs, {
			transition: Fx.Transitions.Quint.easeInOut,
			link: 'chain'
		});
		
		//najazd myszy - fade(1)
		this.options.element.addEvents({
		
			'mouseover': function(){
				if (this.options.element.getParent().retrieve('o') > 0) 
					this.options.element.getParent().fade(1);
			}.bind(this),
			
			'mouseleave': function(){
				this.options.element.getParent().fade(parseFloat(this.options.element.getParent().retrieve('o')));
			}.bind(this),
			
			'click': function(e){
				
				if (!this.zoom.getElement('img') || !this.zoom.getElement('img').get('src').match(this.imageSrc)) {
				
					$$('.loadingImage').fade(1).removeClass('loadingImage');
					
					$$('#thumbs a.active').removeClass('active');
					
					this.options.element.getParent().fade(1).store('o', 1);
					
					if (this.options.element.getParent().getPrevious()) {
						var previous = this.options.element.getParent().getAllPrevious();
						previous[0].fade(0.7).store('o', 0.7);
						
						if (previous[1]) {
							previous[1].fade(0.5).store('o', 0.5);
							if (previous[2]) {
								previous[2].fade(0.3).store('o', 0.3);
								previous[2].getAllPrevious().fade(0).store('o', 0);
							}
						}
						
					}
					
					if (this.options.element.getParent().getNext()) {
						var next = this.options.element.getParent().getAllNext();
						next[0].fade(0.7).store('o', 0.7);
						if (next[1]) {
							next[1].fade(0.5).store('o', 0.5);
							if (next[2]) {
								next[2].fade(0.3).store('o', 0.3);
								next[2].getAllNext().fade(0).store('o', 0);
							}
						}
					}
					
					this.options.element.addClass('active');
					
					this.zoom.addClass('loading');
					
					if (this.zoom.getElement('img')) 
						this.zoom.getElement('img').fade(0);
					
					this.options.element.getElement('img').fade(0.3).addClass('loadingImage');
					
					this.load();
					
					this.slideThumbs();
					//przesuawnie listy miniatur					
				}
				
			}.bind(this)
			
		});
		
	},
	
	load: function() {
		var zoom = this.zoom;
		var ele = this.options.element;
		var url = this.imageSrc;
		new Asset.image(url, {
			onload: function(){
				zoom.empty().removeClass('loading').fade('hide').fade(1);
				if(Browser.Engine.trident) zoom.setStyle('zoom',1);
				this.inject($('zoom')).erase('height').erase('width');
					fixSize();
					ele.getElement('img').removeClass('loadingImage').fade(1);
					this.addEvent('click', function(e){
						nextImage(this);
					});
			}
		});
		
		(function(){
			if (ele.getElement('img').hasClass('loadingImage')) {
				zoom.empty().removeClass('loading').fade('hide').set('html', '<img src="' + ele.get('href') + '" alt="Diseño - moda de España" border="0"/>');
				zoom.fade(1);
				zoom.getElement('img').removeClass('loadingImage').fade('hide').fade(1);
			}
		}).delay(3000);
	},
	
	slideThumbs: function() {

		if (this.options.element.retrieve('offset'))
			var offset = this.options.element.retrieve('offset');
		else {
			var offset = 0;
			this.options.element.getParent().getAllPrevious().each(function(element){
				var width = element.getElement('img').getSize().x;
				offset = width + 10 + offset;
			});
			this.options.element.store('offset', offset);
		}

		this.fx.start(offset, 0);

	}

});

var basename = function (string) {
	return string.substr(string.lastIndexOf('/'));
}

var nextImage = function(img)
{
	var src = img.get('src');
	var first, getNext, next, stop = null;
	$('thumbs').getElements('img').each(function(el,index){
		if (stop) {
			return;
		}
		if (0 == index) {
			first = el.getParent('a');
		}
		if (!getNext && el.get('src').replace('.min.', '.').match(src)) {
			getNext = true;
		} else if (getNext) {
			next = el.getParent('a');
			stop = true;
		}
	});
	if (next) {
		first = null;
		next.fireEvent('click');
		return;
	}
	if (first) {
		first.fireEvent('click');
	}
	first = getNext = next = stop = null;
}

var fixSize = function(win)
{
	if ($('zoom')) {
		var windowInnerHeight = window.getSize().y;
		var newHeight = 0;
		var img = $('zoom').getElement('img');
		if (img) {
			if(!img.retrieve('h')) {
				var tmp = img.clone();
				tmp.setStyles({
					'position':'absolute',
					'visibility':'hidden',
					'top':'0',
					'left':'0'
				}).inject(document.body);
				var h = tmp.getSize().y;
				if (h > 565) h = 565;
				img.store('h',h);
				tmp.destroy(0);
			}
			var fxImg = new Fx.Tween(img,{chain:'link'});
			var fxZoom = new Fx.Tween($('zoom'),{chain:'link'});
			if (windowInnerHeight <= 780) {
				newHeight = Math.round(windowInnerHeight * 0.53);
				if (565 > newHeight) {
					//jesli resize okna to z efektem
					if (win) {
						fxImg.start('height', newHeight + 'px');
						fxZoom.start('height', newHeight + 'px');
					}
					else {
						img.setStyle('height', newHeight + 'px');
						$('zoom').setStyle('height', newHeight + 'px');
					}
				}
			}
			else {
				if (win) {
					fxImg.start('height', img.retrieve('h') + 'px');
					fxZoom.start('height', img.retrieve('h') + 'px');
				}
				else {
					img.setStyle('height', img.retrieve('h') + 'px');
					$('zoom').setStyle('height', img.retrieve('h') + 'px');
				}
			}
		}
	}
}

window.addEvent('resize', function(){
	fixSize(1);
});

window.addEvent('domready',function(){
	new Portfolio.Website();
});