function create_accordion() {

	// Check if this is only the home page.
	if($('site_body_container')) {

		/*
		---------------------------------------------------------------------------------------------
		| ACCORDIAN
		---------------------------------------------------------------------------------------------
		*/

		// Create accordion object.
		accordion = new Accordion('div.tog_step', 'div.atStart', {
			opacity: false, display: -1,
			onActive: function(toggler, element){
				toggler.setStyle('background', 'url(lib/images/step_bg.png) bottom left no-repeat');
			},

			onBackground: function(toggler, element){
				toggler.setStyle('background', 'url(lib/images/step_bg.png) top left no-repeat');
			}
		}, $('accordion'));
		

		/*
		---------------------------------------------------------------------------------------------
		| STEP BUTTONS
		---------------------------------------------------------------------------------------------
		*/

		// Step 1
	    $('step_1').addEvents({
	        'mouseover': function(){
	            $('step_1').setStyle('background-position', 'center left');
	            $('step_1').setStyle('color', '#ffffff');
	        },

	        'mouseout': function(){
	            $('step_1').setStyle('background-position', 'top left');
	            $('step_1').setStyle('color', '#2D2D2D');
	        },

	        'mousedown': function(){
	            $('step_1').setStyle('background-position', 'bottom left');
	            $('step_1').setStyle('color', '#cccccc');
	        },

	        'click': function(){
	            accordion.display(0);
	        }
	    });	 	 	 
		
		// Step 2 - Previous
	    $('step_2_previous').addEvents({
	        'mouseover': function(){
	            $('step_2_previous').setStyle('background-position', 'center left');
	            $('step_2_previous').setStyle('color', '#ffffff');
	        },

	        'mouseout': function(){
	            $('step_2_previous').setStyle('background-position', 'top left');
	            $('step_2_previous').setStyle('color', '#2D2D2D');
	        },

	        'mousedown': function(){
	            $('step_2_previous').setStyle('background-position', 'bottom left');
	            $('step_2_previous').setStyle('color', '#cccccc');
	        },

	        'click': function(){
	            accordion.display(1);
	        }
	    });	

		// Step 2 - Next
	    $('step_2_next').addEvents({
	        'mouseover': function(){
	            $('step_2_next').setStyle('background-position', 'center left');
	            $('step_2_next').setStyle('color', '#ffffff');
	        },

	        'mouseout': function(){
	            $('step_2_next').setStyle('background-position', 'top left');
	            $('step_2_next').setStyle('color', '#2D2D2D');
	        },

	        'mousedown': function(){
	            $('step_2_next').setStyle('background-position', 'bottom left');
	            $('step_2_next').setStyle('color', '#cccccc');
	        },

	        'click': function(){
	            update_options_chosen(1);
			 	accordion.display(1);
	        }
	    });	 


		// Step 3 - Previous
	    $('step_3_previous').addEvents({
	        'mouseover': function(){
	            $('step_3_previous').setStyle('background-position', 'center left');
	            $('step_3_previous').setStyle('color', '#ffffff');
	        },

	        'mouseout': function(){
	            $('step_3_previous').setStyle('background-position', 'top left');
	            $('step_3_previous').setStyle('color', '#2D2D2D');
	        },

	        'mousedown': function(){
	            $('step_3_previous').setStyle('background-position', 'bottom left');
	            $('step_3_previous').setStyle('color', '#cccccc');
	        },

	        'click': function(){
	            accordion.display(2);
	        }
	    });	

		// Step 3 - Next
	    $('step_3_next').addEvents({
	        'mouseover': function(){
	            $('step_3_next').setStyle('background-position', 'center left');
	            $('step_3_next').setStyle('color', '#ffffff');
	        },
	        
	        'mouseout': function(){
	            $('step_3_next').setStyle('background-position', 'top left');
	            $('step_3_next').setStyle('color', '#2D2D2D');
	        },

	        'mousedown': function(){
	            $('step_3_next').setStyle('background-position', 'bottom left');
	            $('step_3_next').setStyle('color', '#cccccc');
	        },

	        'click': function(){
	            //update_options_chosen(2);
				

			accordion.display(2);
	        }
	    });	

		// Step 4
	    $('step_4').addEvents({
	        'mouseover': function(){
	            $('step_4').setStyle('background-position', 'center left');
	            $('step_4').setStyle('color', '#ffffff');
	        },

	        'mouseout': function(){
	            $('step_4').setStyle('background-position', 'top left');
	            $('step_4').setStyle('color', '#2D2D2D');
	        },

	        'mousedown': function(){
	            $('step_4').setStyle('background-position', 'bottom left');
	            $('step_4').setStyle('color', '#cccccc');
	        },

	        'click': function(){
	            update_options_chosen(3);
				generate_image_order();
				accordion.display(3);
	        }
	    });	

	    

	    /*
		---------------------------------------------------------------------------------------------
		| ADD IMAGE BUTTON
		---------------------------------------------------------------------------------------------
		*/
	    $('image_browser').addEvents({
	        'mouseover': function(){
	            $('image_browser').setStyle('background-position', 'center left');
	            $('image_browser').setStyle('color', '#ffffff');
	        },

	        'mouseout': function(){
	            $('image_browser').setStyle('background-position', 'top left');
	            $('image_browser').setStyle('color', '#2D2D2D');
	        },

	        'mousedown': function(){
	            $('image_browser').setStyle('background-position', 'bottom left');
	            $('image_browser').setStyle('color', '#cccccc');
	        },

	        'click': function(){
	            update_options_chosen(1);
			 	accordion.display(1);
	        }
	    });	 

	    $('file_browser').addEvents({
	        'mouseover': function(){
	            $('file_browser').setStyle('background-position', 'center left');
	            $('file_browser').setStyle('color', '#ffffff');
	        },

	        'mouseout': function(){
	            $('file_browser').setStyle('background-position', 'top left');
	            $('file_browser').setStyle('color', '#2D2D2D');
	        },

	        'mousedown': function(){
	            $('file_browser').setStyle('background-position', 'bottom left');
	            $('file_browser').setStyle('color', '#cccccc');
	        },

	        'click': function(){
	            update_options_chosen(1);
			 	accordion.display(1);
	        }
	    });			
		/*
		---------------------------------------------------------------------------------------------
		| REMOVE TEXT BUTTON
		---------------------------------------------------------------------------------------------
		*/
	    $('remove_envelope_text').addEvents({
	        'click': function(){
	            if($('remove_envelope_text').checked) {
	            	hide_text();
				}
				else {
					show_text();
				}
	        }
	    });	 


		/*
		---------------------------------------------------------------------------------------------
		| FONT DROP DOWN BUTTONS
		---------------------------------------------------------------------------------------------
		*/
		var font_face_button = $('font_face').getElement('a');

	    font_face_button.addEvents({
	        'mouseover': function(){
	            menu_show('font_menu');
	        },

	        'mouseout': function(){
	            closetime();
	        }
	    });	

		
		$('font_menu').addEvents({
	        'mouseover': function(){
	            cancelclosetime();
	        },

	        'mouseout': function(){
	            closetime();
	        }
	    });	

	    
		/*
		---------------------------------------------------------------------------------------------
		| COLOR DROP DOWN BUTTONS
		---------------------------------------------------------------------------------------------
		*/
		var font_color_button = $('active_color').getElement('a');

	    font_color_button.addEvents({
	        'mouseover': function(){
	            menu_show('color_menu');
	        },

	        'mouseout': function(){
	            closetime();
	        }
	    });	

	    $('color_menu').addEvents({
	        'mouseover': function(){
	            cancelclosetime();
	        },

	        'mouseout': function(){
	            closetime();
	        }
	    });	
	    

	    /*
		---------------------------------------------------------------------------------------------
		| PRINT BUTTONS
		---------------------------------------------------------------------------------------------
		*/
		var print_button = $('print_button').getElement('a');

	    print_button.addEvents({
	        'mouseover': function(){
	            print_button.setStyle('background-position', 'center left');
	            print_envelope();
	        },

	        'mouseout': function(){
	            print_button.setStyle('background-position', 'top left');
	        },

	        'mousedown': function(){
	            print_button.setStyle('background-position', 'bottom left');
	        }
	    });	


	    /*
		---------------------------------------------------------------------------------------------
		| SUBMIT ORDER BUTTON
		---------------------------------------------------------------------------------------------
		*/
	    $('order_envelope').addEvents({
	        'mouseover': function(){
	            $('order_envelope').setStyle('background-position', 'center left');
	            $('order_envelope').setStyle('color', '#ffffff');
	        },

	        'mouseout': function(){
	            $('order_envelope').setStyle('background-position', 'top left');
	            $('order_envelope').setStyle('color', '#2D2D2D');
	        },

	        'mousedown': function(){
	            $('order_envelope').setStyle('background-position', 'bottom left');
	            $('order_envelope').setStyle('color', '#cccccc');
	        }
	    });	 


	    /*
		---------------------------------------------------------------------------------------------
		| ENVELOPE & GRAPHIC TOOL TIPS
		---------------------------------------------------------------------------------------------
		*/

	    // Tips for Image
		var Tips1 = new Tips($('graphic_container'));

	    // Tips for Envelope
		var Tips2 = new Tips($('line_container'));


		/*
		---------------------------------------------------------------------------------------------
		| ALLOW ENVELOPE & GRAPHIC TO DRAG AND MOVE.
		---------------------------------------------------------------------------------------------
		*/

		// Allow image to drag
		new Drag.Move('graphic_container', {'container': 'customize_container', 'grid': 5});
	    $('graphic_container').setStyle('cursor', 'move');

		

		// Allow envelope text to drag
	    new Drag.Move('line_container', {'container': 'customize_container', 'grid': 5});
	    $('line_container').setStyle('cursor', 'move');


	    /*
		---------------------------------------------------------------------------------------------
		| ENVELOPE LINES
		---------------------------------------------------------------------------------------------
		*/
		
		var old_height = 0;
		var old_width = 0;

	
		// Make the image resiable.
		$('envelope_graphic').makeResizable({
			// Specify the handle for resizing.
			handle: $('image_handler'),

			// When the user starts dragging.
			onStart: function() {
				// Get the coordinates of the graphic
				var dims = $('envelope_graphic').getCoordinates();

				// Get the old height and width before resizing.
				old_height = dims.height;
				old_width = dims.width;
			},

			// On Drag Event, make sure when the user resizes, the aspect ratio remains. 
			onDrag: function() {
				// Change opacity when resizing.
				$('envelope_graphic').setStyle('opacity', '0.5');

				// Set the limits for resizing.
				this.limit = {x:[50, ($('envelope_graphic').height / (old_height / old_width))], y:[50, 260]};

				// Resize image proportionally.				 
				$('envelope_graphic').setStyle('height', ($('envelope_graphic').width * (old_height / old_width)));
			},

			// When user is one resizing, sharpen the image.
			onComplete: function () {
				var dims = $('envelope_graphic').getCoordinates();
				$('envelope_graphic').src='http://' + location.host + '/Uploads/image_resizer.php?width=' + dims.width + '&height=' + dims.height + '&image=http://' + location.host + '/Uploads/edits/' + $('oc_image').getProperty('value');
				$('envelope_graphic').setStyle('opacity', '1.0');
			}
		});


		// Handle events when the image is hovered over.
	    $('graphic_container').addEvents({

	        'mouseover': function(){
	            $('graphic_container').setStyle('border', '1px dashed #cccccc');
	            $('image_handler').setStyle('display', '');
	        },

	        'mouseout': function(){
	            $('graphic_container').setStyle('border', '1px dashed #fbfbfb');
	            $('image_handler').setStyle('display', 'none');
	        }
	    });	  
    }
}