// VARS

var panels;
var panelFx;
var inIE; // yeah..

window.addEvent('domready', function() {
	
	panels = $$('.panel');
	
	panels.each(function(el) {
	
		panelFx = new Fx.Morph(el, {duration:300, wait:false});	
		
		el.addEvent('click', function(){
			openPanel(el);
		});
		
		showCarouselNav(el);
		hideCarouselNav(el);
		
	});
	
	//check if IE
	inIE = /*@cc_on!@*/false;
	
});

function openPanel(panel){
	var xp = $('c').getElement('.panel.active');
	if(xp != panel){
		if(xp){
			closePanel(xp);	
		}
		panel.set('tween', {duration: 400, wait:false});
		panel.tween('height', 350);
		panel.addClass('active');
		
		showCarouselNav(panel);
	}
}

function closePanel(panel){
	panel.set('tween', {duration: 400, wait:false});
	panel.tween('height', 150);
	panel.removeClass('active');
	
	hideCarouselNav(panel);
}

function showCarouselNav(panel){
	var lis = panel.getElements('.carousel li');
	if(lis.length > 1){
		if(!inIE){
			panel.getElements('.btn').each(function(el){
				el.set('tween', {duration: 500, wait:false});
				el.tween('opacity', [0,.1]);
				
				el.addEvent('mouseenter', function(){
					el.set('tween', {duration: 100, wait:false});
					el.tween('opacity', 1);
				});
				
				el.addEvent('mouseleave', function(){
					el.set('tween', {duration: 100, wait:false});
					el.tween('opacity', 0.1);
				});
				
			});
		}
		
		activateCarousel(panel);
	}
}

function hideCarouselNav(panel){
	var lis = panel.getElements('.carousel li');
	if(lis.length > 1 && !inIE){
		panel.getElements('.btn').each(function(el){
			el.set('tween', {duration: 200, wait:false});
			el.tween('opacity', 0);
		});
	}
}

function activateCarousel(panel){
	
	var bn = panel.getElement('.btnNext');
	var bp = panel.getElement('.btnPrev');
	
	bn.addEvent('click', function(){
		var position = Math.round(parseInt(panel.getElement('.carousel').getStyle('left'))/590)*590;
		slideIt("next", panel, position);
	});
	
	bp.addEvent('click', function(){
		var position = Math.round(parseInt(panel.getElement('.carousel').getStyle('left'))/590)*590;
		slideIt("prev", panel, position);
	});
	
}

// The function to browse forward
function slideIt(dir, panel, pos){
	
	// carousel vars
	var wrapper = panel.getElement('.wrap'); // The outer wrapper
	var carousel = panel.getElement('.carousel'); // The inner wrapper
	var items = carousel.getElements('li'); // The different elements, this is an array
	var item_width = 590 // The full width of a single item (incl. borders, padding, etc ... if there is any)
	var max_margin = items.length * item_width - item_width;
	
	// Set up the animation
	var animation = new Fx.Tween(carousel, {duration: 500, transition: Fx.Transitions.Expo.easeInOut});
	
	if(dir == "next"){
		if(pos <= -max_margin){
			animation.start('left', 0);
		} else { 
			var newposition = pos - item_width;
			animation.start('left', newposition);
		}
	} else {
		if(pos >= 0){
			animation.start('left', -max_margin);
		} else { 
			var newposition = pos + item_width;
			animation.start('left', newposition);
		}
	}
}