/**
 * Class AccordionMenu.js
 * Description: Accordion Effect
 *
 * @version 1.0
 * @autor: Fran
 */

/**
 * Constructor
 *
 * @param id
 * @return object AccordionMenu
 */
AccordionMenu = function(id){
	
	// Private variables
	var interval = null;
	var state = 1;
	var div = null;
	var body = null;
	var freq = 10;
    var selected = false;
    var imgtag = null;
	
	// Private methods

	/**
	 * Method setDiv
	 * Description: set the div object
	 */
	var setDiv = function(){
		div = document.getElementById('div' + id);
		body = document.getElementById('body' + id);
        imgtag = document.getElementById('imgtag'); 
	};
	

	/**
	 * Method enlarge
	 * Description: effect enlarge the box
	 */
	var enlarge = function(){
        selected = true;
		var boxClass = div.className.split(' ');
		switch(boxClass[0]){
			case 'box1': div.className = 'box2 mouseover'; break;
			case 'box2': div.className = 'box3 mouseover'; break;
			case 'box3': div.className = 'box4 mouseover'; break;
			case 'box4': div.className = 'box5 mouseover'; break;
			case 'box5': div.className = 'box6 mouseover'; break;
			case 'box6': div.className = 'box7 mouseover'; break;
			case 'box7': div.className = 'box8 mouseover'; break;
			case 'box8': div.className = 'box9 mouseover'; break; 
			case 'box9':
				clearInterval(interval);
				state = 3; // enlarged state
				body.className = 'show';
                imgtag.innerHTML = eval('img' + id);
                div.onclick = new Function('document.location.href = link' + id);
		}
	};

	/**
	 * Method reduce
	 * Description: effect reduce the box
	 */
	var reduce = function(){
        selected = false;
		var boxClass = div.className.split(' ');
		switch(boxClass[0]){
			case 'box9': div.className = 'box8 mouseout'; break;
			case 'box8': div.className = 'box7 mouseout'; break;
			case 'box7': div.className = 'box6 mouseout'; break;
			case 'box6': div.className = 'box5 mouseout'; break;
			case 'box5': div.className = 'box4 mouseout'; break;
			case 'box4': div.className = 'box3 mouseout'; break;
			case 'box3': div.className = 'box2 mouseout'; break;
			case 'box2': div.className = 'box1 mouseout'; break; 
			case 'box1':
				clearInterval(interval);
				state = 1; // enlarged state
				body.className = 'hidden';
                div.onclick = new Function();
		}
	}

	// Constructor code
	setDiv();

	return {
		
		// Public variables
		
		// Public methods
		
		/**
		 * Method enlargeBox
		 * Description: enlager the Box
		 */
		enlargeBox: function(){
			clearInterval(interval);
			state = 2; // enlarging state
			interval = setInterval(function(){
				enlarge();
			}, freq);
		},
		
		/**
		 * Method reduceBox
		 * Description: reduce the Box
		 */
		reduceBox: function(){
			clearInterval(interval);
			state = 4; // reducing state
			interval = setInterval(function(){
				reduce();
			}, freq);
		},

		/**
		 * Method getState
		 * Description: get the current box's state
		 *
		 * @return state
		 */
		getState: function(){
			return state;
		},

		/**
		 * Method setFreq
		 * Description: set the effect movement rate 
		 *
		 * @param freq
		 */
		setFreq: function(f){
			freq = f;
		},

		/**
		 * Method isSelected
		 * Description: whether the box is selected or not
		 *
		 * @return boolean
		 */
        isSelected: function(){
            return selected;            
        }
	}
}

// Other functions

/**
 * Function reduceOtherboxes
 * Description: reduce every box but the box which id is passed as parameter
 *
 * @param id
 */
function reduceOtherboxes(id){
    for(var i = 1; i <= 4; i++){
        if(i != id){
            acc = eval('acc' + i);
            acc.reduceBox();
        }
    }
}

/**
 * Function enlargeOnebox
 * Description: enlarge the box which id is passed as parameter and reduce the other boxes
 *
 * @param id
 */
function enlargeOnebox(id){
    // the function setTimeout is used to achieve unsynchronized functions
    setTimeout('acc' + id + '.enlargeBox()', 0);
    setTimeout('reduceOtherboxes(' + id + ')', 0);
}