window.addEvent('domready', function() {
	
	$$('img').each(function(img){
		img.setProperty('galleryimg','no');
		var myDrag = new Drag(img);
		img.addEvents({
			'contextmenu': function(event){
				return false;
			}
		});
	});
	
	$$('.project_item').each(function(homeproductitem){
		var title = homeproductitem.getElement('.project_item_title');
		var image = homeproductitem.getElement('.project_item_image');
		var link = homeproductitem.getElement('a');
		title.setStyles({'opacity':0,'display':'block'});
		image.setStyles({'opacity':1,'display':'block'});
		var myFx_title = new Fx.Tween(title, { duration: 600, transition: 'Quad:out', link: 'cancel', property: 'opacity' });
		// var myFx_image = new Fx.Tween(image, { duration: 600, transition: 'Quad:out', link: 'cancel', property: 'opacity' });
		homeproductitem.addEvents({
			'mouseenter': function(){
				myFx_title.start(1);
				// myFx_image.start(0);
			},
			'mouseleave': function(){
				myFx_title.start(0);
				// myFx_image.start(1);
			}
		})
	});
	
	window.addEvent('scroll',function(){
		loadImages();
	})
	window.addEvent('resize',function(){
		loadImages();
	})
	loadImages();

});


function loadImages(){
	$$('.project_item').each(function(homeproductitem){
		if (homeproductitem.getCoordinates().top-window.getScroll().y < window.getHeight() && (homeproductitem.getCoordinates().top+homeproductitem.getHeight()) - window.getScroll().y > 0 ){
			if (homeproductitem.getElements('img').length > 0){
				var img = homeproductitem.getElement('img');
				if (img.get('rel') && img.get('src') != img.get('rel')){
					img.set({
						styles: {
							'opacity':0
						},
						src: img.get('rel')
					});
					(function(){ var myFx = new Fx.Tween(img, { duration: 1000, transition: 'Quad:out', link: 'cancel', property: 'opacity' }).start(1); }).delay(200);
				}
			}
		}
	});
}


function initSlider(gal){
	var scroll = new Scroller(gal, {area: 200, velocity: 0.05}).start();
}

function loadSlide(url,slide,buttons,link){
	if (currentSlideUrl != url){
		currentSlideUrl = url;
		var currentImg = slide.getElement('img');
		var myImages = Asset.images([url], {
			properties: {
				'class': 'myImage'
			},
			onComplete: function(){
				var myFx1 = new Fx.Tween(myImages[0], { duration: 'long', transition: 'quart:in',link: 'cancel',property: 'opacity'}).set(0);
				var myFx2 = new Fx.Tween(currentImg, { duration: 'long', transition: 'quart:out',link: 'cancel',property: 'opacity', onComplete : function(){
					currentImg.dispose();
				}});
				currentImg.setStyles({'position':'absolute','top':0,'left':0});
				myImages[0].setStyles({'opacity': 0,'position':'relative'});
				myImages[0].inject(slide,'top');
				myFx1.start(1);
				myFx2.start(0);
				buttons.setStyles({'border-color': '#fff'});
				link.setStyles({'border-color': '#a58a28'});
			}
		});
	}
	
}


var MySimpleCarousel = new Class({
	Implements: [Options, Events],
	options: {
//		onRotate: $empty,
//		onStop: $empty,
//		onAutoPlay: $empty,
//		onShowSlide: $empty,
		slideInterval: 4000,
		transitionDuration: 700,
		startIndex: 0,
		buttonOnClass: "selected",
		buttonOffClass: "off",
		rotateAction: "none",
		rotateActionDuration: 100,
		autoplay: false
	},
	initialize: function(container, slides, buttons, options){
		this.container = document.id(container);
		this.setOptions(options);
		this.slides = slides;
		this.buttons = $$(buttons);
		this.showSlide(this.options.startIndex);
		if (this.options.autoplay) this.autoplay();
		if (this.options.rotateAction != 'none') this.setupAction(this.options.rotateAction);
		return this;
	},
	toElement: function(){
		return this.container;
	},
	setupAction: function(action) {
		this.buttons.each(function(el, idx){
			document.id(el).addEvent(action, function() {
				if (this.currentSlide != idx) this.showSlide(idx);
				this.stop();
			}.bind(this));
		}, this);
	},
	showSlide: function(slideIndex){
		if (this.container.getCoordinates().top - window.getScroll().y < 0){
			var myFx = new Fx.Scroll(window).start(0, this.container.getCoordinates().top - 20 );
		}
		var action = {};
		this.slides.each(function(slide, index){
			if (index == slideIndex && index != this.currentSlide){ //show
				if (document.id(this.buttons[index])) document.id(this.buttons[index]).swapClass(this.options.buttonOffClass, this.options.buttonOnClass);
			} else {
				if (document.id(this.buttons[index])) document.id(this.buttons[index]).swapClass(this.options.buttonOnClass, this.options.buttonOffClass);
			}
		}, this);
		
		var currentImg = this.container.getElements('img');
		var container = this.container;
		var myclass = this;
		
		var myImages = Asset.images([this.slides[slideIndex]], {
			onComplete: function(){
				var myFx1 = new Fx.Tween(myImages[0], { duration: 'long', transition: 'quart:in',link: 'cancel',property: 'opacity'}).set(0);
				myImages[0].setStyles({'opacity': 0,'position':'relative'}).inject(container,'top');
				myFx1.start(1);
				if (currentImg.length > 0){
					var myFx2 = new Fx.Tween(currentImg[0], { duration: 'long', transition: 'quart:out',link: 'cancel',property: 'opacity', onComplete : function(){
						currentImg.dispose();
					}});
					currentImg[0].setStyles({'position':'absolute','top':0,'left':0});
					myFx2.start(0);
				}
			}
		});
		
		this.fireEvent('onShowSlide', slideIndex);
		this.currentSlide = slideIndex;
		return this;
	},
	autoplay: function(){
		this.slideshowInt = this.rotate.periodical(this.options.slideInterval, this);
		this.fireEvent('onAutoPlay');
		return this;
	},
	stop: function(){
		$clear(this.slideshowInt);
		this.fireEvent('onStop');
		return this;
	},
	rotate: function(){
		var current = this.currentSlide;
		var next = (current+1 >= this.slides.length) ? 0 : current+1;
		this.showSlide(next);
		this.fireEvent('onRotate', next);
		return this;
	},
	gonext: function(){
		var current = this.currentSlide;
		var next = (current+1 >= this.slides.length) ? 0 : current+1;
		this.showSlide(next);
		this.stop();
		return this;
	},
	goprev: function(){
		var current = this.currentSlide;
		var prev = (current > 0 ) ? current-1 : this.slides.length-1;
		this.showSlide(prev);
		this.stop();
		return this;
	}
});