window.addEvent('domready', function() {
  
	// Let's define some variables first
	var wrapper = $('wrap'); // The outer wrapper
	var carousel = $('carousel'); // The inner wrapper
	var items = $$('#carousel li'); // The different elements, this is an array
	var item_width = 93; // 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});

	// The function to browse forward
	function next_item(pos){
		
		if(pos == -186){
			animation.start('left', 0);
		} else {
			var newposition = pos - item_width;
			animation.start('left', newposition);
		}
	}

	// The function to browse backward
	function previous_item(pos){
		if(pos == 0){
			animation.start('left', -max_margin);
		} else {
			var newposition = pos + item_width;
			animation.start('left', newposition);
		}
	}

	// Set up the 'next' and 'previous' buttons
	$('next').addEvent('click', function(){
		var position = parseInt(carousel.getStyle('left'));
		next_item(position);
	});

	$('previous').addEvent('click', function(){
		var position = parseInt(carousel.getStyle('left'));
		previous_item(position);
	});

  var morph_gallery = new Fx.Morph('gallery_wrap');
  var on = 0;
  
  $('view_gallery_button').addEvent('click', function(e) {
    e.stop();

    on = !on ? 1 : 0;

    if (on)
    {
      morph_gallery.start({
        height: '257px'
      });
    } else
    {
      morph_gallery.start({
        height: '197px',
        onComplete: function ()
        {
          $('gallery_wrap').toggleClass('cs_toggle');
        }
      });
      
    }

    $('carousel_wrap').toggleClass('show');
	});

});