var mySlide = null;
var scroll = null;
var img = null;
var winW = null;
window.onresize = resize;

preloadImages('img/frame.png','img/butt1_.gif','img/butt2_.gif','img/butt3_.gif','img/butt4_.gif','img/mBt.png','img/mL.png','img/mLr.png','img/mR.png','img/mRr.png','img/arL_.gif','img/arR_.gif', 'img/shadowL_.png', 'img/shadowR_.png');
function preloadImages() { 
  var d=document; if(d.images){ if(!d.p) d.p=new Array();
    var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
}

function mToggle(el) {
	$('menuCont1').empty();
	$(el).clone().injectInside('menuCont1');
/*	if ($('menuCont1').getFirst().getSize().size.x < 852) { $('arL').setStyle('display', 'none'); $('arR').setStyle('display', 'none');	} 
	else { $('arL').setStyle('display', 'block'); $('arR').setStyle('display', 'block');}*/
	$('menuCont').setStyle('visibility', 'visible');
}

function init() {
	resize(); 

	scroll = new Fx.Scroll('demo-wrapper', { wait: false, duration: 1000, transition: Fx.Transitions.Quad.easeInOut });
	mySlide = new Slider($('track1'), $('handle1'), { onChange: function(pos){	
		innerW = $('demo-wrapper').scrollWidth;
		outerW = $('demo-wrapper').getSize().size.x;
		newPos = parseInt((innerW-outerW)/100 * pos);
		scroll.scrollTo(newPos,0);	} 
	}).set(0);

	scrollMenu = new Fx.Scroll('menuWrapper', { wait: false, duration: 1000, transition: Fx.Transitions.Quad.easeInOut });
	$('menuWrapper').addEvent('mouseover', function(e){
		e = new Event(e);
		el = e.target;
		innerW = $('menuWrapper').scrollWidth;
		outerW = $('menuWrapper').getSize().size.x;
		scrollMenu.scrollTo((el.getPosition().x-outerW/2)-100, 0);
		e.stop();
	});

/*	var el = $('menuWrapper');
	$('arL').addEvent('click', function(e){	
		e = new Event(e); 
		scrollMenu.scrollTo(el.getSize().scroll.x-150, 0);
		e.stop();	
	});
	$('arR').addEvent('click', function(e){	
		e = new Event(e); 
		scrollMenu.scrollTo(el.getSize().scroll.x+150, 0);
		e.stop();	
	});*/

	$('scrollShaderR').addEvent('click', function(e){	
		e = new Event(e); 
		el = $('demo-wrapper');
		innerW = $('demo-wrapper').scrollWidth;
		scPos = el.getSize().scroll.x + 400;
		mySlide.set(100/innerW*(scPos+400));
		scroll.scrollTo(scPos, 0, {duration:200,transition:Fx.Transitions.linear}); e.stop();	
	});
	$('scrollShaderL').addEvent('click', function(e){	
		e = new Event(e); 
		el = $('demo-wrapper');
		innerW = $('demo-wrapper').scrollWidth;
		scPos = el.getSize().scroll.x - 400;
		mySlide.set(100/innerW*(scPos-400));
		scroll.scrollTo(scPos, 0, {duration:200,transition:Fx.Transitions.linear}); e.stop();	
	});
	$('scrollShaderR').addEvent('mouseover', function(e){	e = new Event(e); this.setProperty('src', 'img/shadowR_.png'); e.stop();	});
	$('scrollShaderL').addEvent('mouseover', function(e){	e = new Event(e); this.setProperty('src', 'img/shadowL_.png'); e.stop();	});
	$('scrollShaderR').addEvent('mouseout', function(e){	e = new Event(e); this.setProperty('src', 'img/shadowR.png'); e.stop();	});
	$('scrollShaderL').addEvent('mouseout', function(e){	e = new Event(e); this.setProperty('src', 'img/shadowL.png'); e.stop();	});

/*	$('arL').addEvent('mouseover', function(e){	e = new Event(e); this.setProperty('src', 'img/arL_.gif'); e.stop();	});
	$('arR').addEvent('mouseover', function(e){ e = new Event(e); this.setProperty('src', 'img/arR_.gif'); e.stop();	});
	$('arL').addEvent('mouseout', function(e){ e = new Event(e); this.setProperty('src', 'img/arL.gif'); e.stop();	});
	$('arR').addEvent('mouseout', function(e){	e = new Event(e); this.setProperty('src', 'img/arR.gif'); e.stop();	});*/

/*	$('b1').addEvent('click', function(e){	e = new Event(e); mToggle('menu1'); e.stop();	});
	$('b1').addEvent('mouseover', function(e){	e = new Event(e); this.setProperty('src', 'img/butt1_.gif'); e.stop();	});
	$('b1').addEvent('mouseout', function(e){ e = new Event(e);	this.setProperty('src', 'img/butt1.gif'); e.stop();	}); */
	$('b2').addEvent('click', function(e){	e = new Event(e); mToggle('menu2'); e.stop();	});
	$('b2').addEvent('mouseover', function(e){	e = new Event(e); this.setProperty('src', 'img/butt2_.gif'); e.stop();	});
	$('b2').addEvent('mouseout', function(e){ e = new Event(e);	this.setProperty('src', 'img/butt2.gif'); e.stop();	});
/*
	$('b3').addEvent('click', function(e){	e = new Event(e); mToggle('menu3'); e.stop();	});
	$('b3').addEvent('mouseover', function(e){	e = new Event(e); this.setProperty('src', 'img/butt3_.gif'); e.stop();	});
	$('b3').addEvent('mouseout', function(e){ e = new Event(e);	this.setProperty('src', 'img/butt3.gif'); e.stop();	});
*/
/*
	$('b4').addEvent('click', function(e){	e = new Event(e); mToggle('menu4'); e.stop();	});
	$('b4').addEvent('mouseover', function(e){	e = new Event(e); this.setProperty('src', 'img/butt4_.gif'); e.stop();	});
	$('b4').addEvent('mouseout', function(e){ e = new Event(e);	this.setProperty('src', 'img/butt4.gif'); e.stop();	});
*/

	scrollUpdater(0,0);
}

function sU(el1, el2) {
	$('last5').setStyle('visibility','hidden');
	$('demo-inner').effect('opacity', {onComplete:function(){
		scrollUpdater(el1, el2);
	}}).start(1,0);
	mySlide.set(0);
}

function resize() {
	ns4 = (document.layers)? true:false
	ie4 = (document.all)? true:false
	winW = (ns4)? window.innerWidth : document.body.offsetWidth
	winH = (ns4)? window.innerHeight : document.body.offsetHeight

	$('demo-wrapper').setStyle('width', winW);
	$('menuWrapper').setStyle('width', winW);
}