var QuickPosts = new Class({

	//implements
	Implements: [Options],

	//itemsArray: new Array(),		//will use this to store list items
	parsArray: new Array(),			//will use this to store list paragraphs
	itemNum: null,					//variable to hold current item in list
	item_opener: null,  				//I'll be using this to hold the item Fx.tween stuff (for re-use and any possible chaining purposes)
	originalStyles: null,				//to hold the original style of each toggler (for morphing back)
	dynDesc:null,						//dynamic 'holder' for dynamic descs (for fade in/out)
	dynHeight:null,					//used for setting height of dynDesc to height of outerBox

	//options
	options: {
	transitionTime: 750, 	//transition time (1 second = 1000) for slide animation
	descContainer:null,		//outer container of dynamic desc. paragraph(s) (to center inside)
	togglers: null,			//'toggler' element selector  (i.e. '.toggler' )
	containers: null,			//item 'container' element selector  (i.e. '.item_container' )
	posts:  null, 				//Array of 'posts/items' elements
	spacer: 5,					//number of pixels between each title
	activeClass: null,		//active toggler color, default white
	textSpacer: 5,
	outerBox:null			//outer box (i.e. orange box) that holds both left and right sides - will need to get height
	},

	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		
		var innerDesc = new Element('div');
		innerDesc.set('class', 'left_inner');
		this.dynDesc = innerDesc.inject(this.options.descContainer);
		
		
		
		  //this.dynDesc.setStyle('height', 0);
		  
		  this.dynDesc.set('slide', {
			duration: this.options.transitionTime,
			transition: Fx.Transitions.Pow.easeOut,
			link: 'chain'
		  });
		  
		  this.dynDesc.slide('hide');
		
		//setup image animation
		this.item_opener = new Fx.Tween(this.dynDesc, {
		     duration: this.options.transitionTime, 
		     transition: Fx.Transitions.Cubic.easeOut, 
		     link: 'chain'
		});
		
	
		this.options.posts.each(function(v, k){
			  //v = the element
			  //k = the index
			  
			  //get post components
			   var tempTitle = $(v.getElement(this.options.togglers));
			   var tempDesc = $(v.getElement(this.options.containers));
			   var tempDescHTML = tempDesc.get('html');
			   
			   //get & insert 'desc' content into array
			   this.parsArray.push(tempDescHTML);
			   
			   //remove desc, since we now have the info stored in an array
			   var removedPar = tempDesc.dispose();
			   
			   tempTitle.set('morph', { duration: 500, transition: 'cubic:out' });
			   
			   //set inactive color if null
			   if(this.originalStyles == null){
				this.originalStyles = tempTitle.getStyles('color', 'background-color');   
			   }
			  
			  tempTitle.addEvents({
				'click' : this.changePost.bindWithEvent(this, k),
				'mouseenter' : function() {
					this.setStyle('cursor', 'pointer');
				}
			  });
		
		 }, this);
		
		//get & set height of container
		this.dynHeight = this.options.outerBox.getSize().y;
		this.options.descContainer.setStyle('height', this.dynHeight);
	
	},

	//my post-initialization (startup) function
	start: function() {
		
		
		this.options.posts[0].getElement(this.options.togglers).fireEvent('click');
	},

	
	//this shows/hides content, as well as handles the left side image switching
	changeText: function(passedID) {
				
		//check for passedID presence
		if((passedID != null) && (this.itemNum != passedID)) {
			
			if(this.itemNum != null){
				//hide prev content & set toggler back to original
				this.dynDesc.slide('out'); 
				this.options.posts[this.itemNum].getElement(this.options.togglers).morph(this.originalStyles);
			}
			
			//now update current item
			this.itemNum = passedID;  
			
			//change the image (function)
			this.changeDesc.delay(this.options.transitionTime, this);
			
			//now show current content & morph toggler to active class
			//this.options.posts[passedID].getElement(this.options.containers).slide('in'); 
			this.options.posts[this.itemNum].getElement(this.options.togglers).morph(this.options.activeClass);
													
		}

	},
	
	changeDesc: function() {
		//this.dynDesc.slide('out');
		
		this.dynDesc.set({
			html: this.parsArray[this.itemNum]
		});
		
		this.dynDesc.slide('in');
	},
	
	//--------------------------------------------------------------------------------------------------------
	//My supplementary functions  (mini-functions/helpers/etc.)
	//--------------------------------------------------------------------------------------------------------
	changePost: function (e, theIndex) {
		
		if(this.itemNum != theIndex){
			this.changeText(theIndex);
		}
	
	},
	
	nextPress: function () {
		this.direction = 0;
		this.slideIt();
		
		if(this.options.prevBtn.getStyle('opacity') == 0){
			this.options.prevBtn.setStyle('opacity', .5);	
		}
		
	},
	
	prevPress: function () {
		this.direction = 1;
		this.slideIt();
		
		if(this.options.nextBtn.getStyle('opacity') == 0){
			this.options.nextBtn.setStyle('opacity', .5);	
		}
	}
	
	//------------------------  end supp. functions -----------------------------------------//
	
	

});