window.addEvent('domready', function() {
    var status = {
        'false': 'close',
        'true': 'open'

    };

    //-vertical

    //var myVerticalSlide = new Fx.Slide('vertical_slide');
    //var myVerticalSlide2 = new Fx.Slide('vertical_slide2');
    //var myVerticalSlide3 = new Fx.Slide('vertical_slide3');

    var myVerticalSlide1 = new Fx.Slide('vertical_slide1');
    var myVerticalSlide2 = new Fx.Slide('vertical_slide2');
    var myVerticalSlide3 = new Fx.Slide('vertical_slide3');
    var myVerticalSlide4 = new Fx.Slide('vertical_slide4');
    var myVerticalSlide5 = new Fx.Slide('vertical_slide5');

    var myMorph1 = new Fx.Morph('v_slide1', { duration: 'long' });
    var myMorph2 = new Fx.Morph('v_slide2', { duration: 'long' });
    var myMorph3 = new Fx.Morph('v_slide3', { duration: 'long' });
    var myMorph4 = new Fx.Morph('v_slide4', { duration: 'long' });
    var myMorph5 = new Fx.Morph('v_slide5', { duration: 'long' });

    //var myEffect = new Fx.Morph('myElement', { duration: 'short', transition: Fx.Transitions.Sine.easeOut });


    myMorph1.start({ width: '300px' });
    myMorph2.start({ width: '50px' });
    myMorph3.start({ width: '50px' });
    myMorph4.start({ width: '50px' });
    myMorph5.start({ width: '50px' });

    myVerticalSlide1.slideIn();
    myVerticalSlide2.slideOut();
    myVerticalSlide3.slideOut();
    myVerticalSlide4.slideOut();
    myVerticalSlide5.slideOut();


    $('v_slide1').addEvent('mouseenter', function(e) {
        e.stop();

        myMorph1.start({ width: '300px' });
        myMorph2.start({ width: '50px' });
        myMorph3.start({ width: '50px' });
        myMorph4.start({ width: '50px' });
        myMorph5.start({ width: '50px' });

        myVerticalSlide1.slideIn();
        myVerticalSlide2.slideOut();
        myVerticalSlide3.slideOut();
        myVerticalSlide4.slideOut();
        myVerticalSlide5.slideOut();


    });



    $('v_slide2').addEvent('mouseenter', function(e) {
        e.stop();

        myMorph1.start({ width: '50px' });
        myMorph2.start({ width: '300px' });
        myMorph3.start({ width: '50px' });
        myMorph4.start({ width: '50px' });
        myMorph5.start({ width: '50px' });

        myVerticalSlide1.slideOut();
        myVerticalSlide2.slideIn();
        myVerticalSlide3.slideOut();
        myVerticalSlide4.slideOut();
        myVerticalSlide5.slideOut();



    });
    $('v_slide3').addEvent('mouseenter', function(e) {
        e.stop();

        myMorph1.start({ width: '50px' });
        myMorph2.start({ width: '50px' });
        myMorph3.start({ width: '300px' });
        myMorph4.start({ width: '50px' });
        myMorph5.start({ width: '50px' });

        myVerticalSlide1.slideOut();
        myVerticalSlide2.slideOut();
        myVerticalSlide3.slideIn();
        myVerticalSlide4.slideOut();
        myVerticalSlide5.slideOut();
        //	    myHorizontalSlide1.slideOut();


    });

    $('v_slide4').addEvent('mouseenter', function(e) {
        e.stop();

        myMorph1.start({ width: '50px' });
        myMorph2.start({ width: '50px' });
        myMorph3.start({ width: '50px' });
        myMorph4.start({ width: '300px' });
        myMorph5.start({ width: '50px' });

        myVerticalSlide1.slideOut();
        myVerticalSlide2.slideOut();
        myVerticalSlide3.slideOut();
        myVerticalSlide4.slideIn();
        myVerticalSlide5.slideOut();
        //	    myHorizontalSlide1.slideOut();


    });
    $('v_slide5').addEvent('mouseenter', function(e) {
        e.stop();

        myMorph1.start({ width: '50px' });
        myMorph2.start({ width: '50px' });
        myMorph3.start({ width: '50px' });
        myMorph4.start({ width: '50px' });
        myMorph5.start({ width: '300px' });


        myVerticalSlide1.slideOut();
        myVerticalSlide2.slideOut();
        myVerticalSlide3.slideOut();
        myVerticalSlide4.slideOut();
        myVerticalSlide5.slideIn();
        //	    myHorizontalSlide1.slideOut();


    });
    $('v_slide1').addEvent('click', function(e) {
        e.stop();

        myMorph1.start({ width: '300px' });
        myMorph2.start({ width: '50px' });
        myMorph3.start({ width: '50px' });
        myMorph4.start({ width: '50px' });
        myMorph5.start({ width: '50px' });

        myVerticalSlide1.slideIn();
        myVerticalSlide2.slideOut();
        myVerticalSlide3.slideOut();
        myVerticalSlide4.slideOut();
        myVerticalSlide5.slideOut();



    });



    $('v_slide2').addEvent('click', function(e) {
        e.stop();

        myMorph1.start({ width: '50px' });
        myMorph2.start({ width: '300px' });
        myMorph3.start({ width: '50px' });
        myMorph4.start({ width: '50px' });
        myMorph5.start({ width: '50px' });

        myVerticalSlide1.slideOut();
        myVerticalSlide2.slideIn();
        myVerticalSlide3.slideOut();
        myVerticalSlide4.slideOut();
        myVerticalSlide5.slideOut();





    });
    $('v_slide3').addEvent('click', function(e) {
        e.stop();

        myMorph1.start({ width: '50px' });
        myMorph2.start({ width: '50px' });
        myMorph3.start({ width: '300px' });
        myMorph4.start({ width: '50px' });
        myMorph5.start({ width: '50px' });

        myVerticalSlide1.slideOut();
        myVerticalSlide2.slideOut();
        myVerticalSlide3.slideIn();
        myVerticalSlide4.slideOut();
        myVerticalSlide5.slideOut();
        //	    myHorizontalSlide1.slideOut();


    });

    $('v_slide4').addEvent('click', function(e) {
        e.stop();

        myMorph1.start({ width: '50px' });
        myMorph2.start({ width: '50px' });
        myMorph3.start({ width: '50px' });
        myMorph4.start({ width: '300px' });
        myMorph5.start({ width: '50px' });

        myVerticalSlide1.slideOut();
        myVerticalSlide2.slideOut();
        myVerticalSlide3.slideOut();
        myVerticalSlide4.slideIn();
        myVerticalSlide5.slideOut();
        //	    myHorizontalSlide1.slideOut();


    });
    $('v_slide5').addEvent('click', function(e) {
        e.stop();

        myMorph1.start({ width: '50px' });
        myMorph2.start({ width: '50px' });
        myMorph3.start({ width: '50px' });
        myMorph4.start({ width: '50px' });
        myMorph5.start({ width: '300px' });


        myVerticalSlide1.slideOut();
        myVerticalSlide2.slideOut();
        myVerticalSlide3.slideOut();
        myVerticalSlide4.slideOut();
        myVerticalSlide5.slideIn();
        //	    myHorizontalSlide1.slideOut();


    });



    //	$('v_slidein').addEvent('mouseenter', function(e) {
    //		e.stop();
    //		myVerticalSlide1.slideIn();
    //		myVerticalSlide2.slideOut();
    //	});

    //	$('v_slideout').addEvent('mouseenter', function(e) {
    //		e.stop();
    //		myVerticalSlide1.slideOut();
    //		myVerticalSlide2.slideIn();
    //	});

    //	$('v_toggle').addEvent('click', function(e) {
    //		e.stop();
    //		myVerticalSlide1.toggle();
    //	});

    //	$('v_hide').addEvent('click', function(e){
    //		e.stop();
    //		myVerticalSlide1.hide();
    //		$('vertical_status').start('html', status[myVerticalSlide1.open]);
    //	});
    //	
    //	$('v_show').addEvent('click', function(e){
    //		e.stop();
    //		myVerticalSlide1.show();
    //		$('vertical_status').start('html', status[myVerticalSlide1.open]);
    //	});
    //	



    // 	When Vertical Slide ends its transition, we check for its status
    // note that complete will not affect 'hide' and 'show' methods
    //	myVerticalSlide1.addEvent('complete', function() {
    //		$('vertical_status').start('html', status[myVerticalSlide1.open]);
    //	});

    //	myVerticalSlide2.addEvent('complete', function() {
    //	    $('vertical_status').start('html', status[myVerticalSlide2.open]);
    //	});
    //	myVerticalSlide3.addEvent('complete', function() {
    //	    $('vertical_status').start('html', status[myVerticalSlide3.open]);
    //	});

    //--horizontal


    //	var myHorizontalSlide1 = new Fx.Slide('horizontal_slide1', { mode: 'horizontal' });


    //	myHorizontalSlide1.hide();
    //	

    //	$('h_slide1').addEvent('mouseenter', function(e){
    //		e.stop();

    //		myHorizontalSlide1.slideIn();
    //		myVerticalSlide1.slideOut();
    //		myVerticalSlide2.slideOut();
    //		myVerticalSlide3.slideOut();
    //		myVerticalSlide4.slideOut();
    //		myVerticalSlide5.slideOut();

    //	});





    //	$('h_slideout').addEvent('click', function(e){
    //		e.stop();
    //		myHorizontalSlide.slideOut();
    //	});

    //	$('h_toggle').addEvent('click', function(e){
    //		e.stop();
    //		myHorizontalSlide.toggle();
    //	});

    //	$('h_hide').addEvent('click', function(e){
    //		e.stop();
    //		myHorizontalSlide.hide();
    //		$('horizontal_status').start('html', status[myHorizontalSlide.open]);
    //	});
    //	
    //	$('h_show').addEvent('click', function(e){
    //		e.stop();
    //		myHorizontalSlide.show();
    //		$('horizontal_status').start('html', status[myHorizontalSlide.open]);
    //	});
    //	
    //	// When Horizontal Slide ends its transition, we check for its status
    //	// note that complete will not affect 'hide' and 'show' methods
    //	myHorizontalSlide.addEvent('complete', function() {
    //		$('horizontal_status').start('html', status[myHorizontalSlide.open]);
    //	});
});