var myImages = new Asset.images(['/img/bg/df-main.gif','/img/buttons/next.png', '/img/buttons/prev.png', '/img/title/portfolio.png', '/img/head/hello.jpg','/img/bg/hello_bg.png','/img/bg/df-menu.gif','/img/logos/df-logo.png','/img/bg/menu_bg.png'], {
		onComplete: function(){
			//alert('All images loaded!');
		}
	});


	var myFx = {};
	var effectDescription = {};
	var effecHello = {};
	
	var portfolioCount = 0;
	var myScrollItem = {};
	var myScrollControl = true;
	
	window.addEvent('domready', function(){
										 
													
		effectHello = new Fx.Morph('df-hello', {duration: 300, transition: Fx.Transitions.Sine.easeOut});
		myFx = new Fx.Scroll('df-works-absolute', { offset: {'x':0,'y':0}, transition:Fx.Transitions.Pow.easeOut, duration:600, wheelStops:false});
		myScrollItem = $('df-works').getElements('li');
		
		// reset slider
		myFx.start(0,0);
		
		$('df-hello-email').addEvent('mouseover', function(event){
			//helloSlide('DOWN');
			//this.getParent().fireEvent('mouseover');
		});

		function helloSlide(myEffect){
			if(myEffect=="UP"){
				if($('df-hello').getStyle('margin-top') != -380 ){
						effectHello.start({'margin-top':-380});
				}
			}else if (myEffect=="DOWN"){
				if($('df-hello').getStyle('margin-top') != -40 ){
					effectHello.start({'margin-top':-40});
				}
			}
		}
		
		$(document).addEvent('mousemove', function(event){
				if(event.client.y+document.getScroll().y<200){
					helloSlide('DOWN');
				}
		});
		
		
		
		$(document).addEvent('keydown', function(event){
			var strKey = event.key
				
			if (strKey == "right"){
				//$('df-portfolio-nextbutton').fireEvent('click');
				workSlide('next');
			}else if(strKey == "left"){
				//$('df-portfolio-prevbutton').fireEvent('click');
				workSlide('prev');
				$('df-portfolio-prevbutton').fireEvent('mouseover');
				
			}
		});
		
		$('df-portfolio').addEvent('mouseover', function(event){
			helloSlide('UP');
		});
	
		$('df-works').getElements('img').each(function(el,ind){
			var title = el.title.split(':');
			el.getParent().getParent().getElements('div')[0].setStyle('height',el.getSize().y);
			
			el.title   = '';
			el.head    = title[0];
			el.service = title[1];

			//alert(el.getSize().y)
		});

		function workSlide(keyParam){
			if (myScrollControl){
				
				effectTitle = new Fx.Morph('df-works-title', {duration: 300, transition: Fx.Transitions.Sine.easeOut});
				effectServices = new Fx.Morph('df-works-services', {duration: 300, transition: Fx.Transitions.Sine.easeOut});
				effectDescription = new Fx.Morph('df-works-descriptions', {duration: 300, transition: Fx.Transitions.Sine.easeOut});
				
				effectDescription.addEvent('complete', function() {
					 $('df-works-title').innerHTML = myScrollItem[portfolioCount].getElements('img')[0].head;
					 $('df-works-services').innerHTML = myScrollItem[portfolioCount].getElements('img')[0].service;
					
					effectDescription.start({'margin-bottom':-35,'margin-top':25,opacity:1});
					effectDescription.removeEvents('complete');
				});
				
			
				myScrollControl  = false;
				
				if (keyParam == "prev"){
					if (portfolioCount>0){portfolioCount--};
				}else if (keyParam == "next"){
					if (portfolioCount < myScrollItem.length-1){
						portfolioCount++
					}else{
						portfolioCount = 0;					
					};
				}
				
				myFx.start(941*portfolioCount, 0);
				
				effectHello.start({'margin-top':-380});
				effectDescription.start({'margin-bottom':-85,'margin-top':75,opacity:0});
									
				$('df-portfolio-counter').innerHTML  = portfolioCount+1;
				myScrollItem = $('df-works').getElements('img')[portfolioCount+1].src=myScrollItem = $('df-works').getElements('img')[portfolioCount+1].src.split('~')[0];
				myScrollItem = $('df-works').getElements('img')[portfolioCount+2].src=myScrollItem = $('df-works').getElements('img')[portfolioCount+2].src.split('~')[0];
			}
		}
		
		$('df-portfolio-navigation').getElements('div').addEvent('click', function() {
			if(this.id == 'df-portfolio-prevbutton')
				var keyParam = 'prev';
			else if(this.id == 'df-portfolio-nextbutton'){
				var keyParam = 'next';
			}
			workSlide(keyParam);
		});

		myFx.addEvent('complete', function() {
			myScrollControl  = true;									   
		});
	});