var portfolio = {
	element : null,
	items : null,
	menuBox : null,
	subMenu : null,
	hideOrShowMenuBox : null,
	previous : null,
	next : null,
	effect : null,
	currentItemIndex : 1,
	totalItems : 0,
	widthPerElement : 365,
	
	init : function(element,items,menuBox,subMenu,hideOrShowMenuBox,previous,next) {
		window.addEvent('load', function(){
										 
			portfolio._init(element,items,menuBox,subMenu,hideOrShowMenuBox,previous,next);
		});
	},
	_init : function (element,items,menuBox,subMenu,hideOrShowMenuBox,previous,next) {
		this.element = $(element);
		this.items = $$(items);
		this.menuBox = $(menuBox);
		this.subMenu = $(subMenu);
		this.hideOrShowMenuBox = $(hideOrShowMenuBox);
		this.previous = $(previous);
		this.next = $(next);		

		if (!this.element || !this.items || !this.menuBox || !this.subMenu || !this.hideOrShowMenuBox || !this.previous || !this.next) return false;
		
		var imageFeed = new Element('div',{'id' : 'imageFeed'});
		var divBG = new Element('div',{'class' : 'divBG'});
		divBG.injectInside(imageFeed);
		var cnt = 0;
		this.items.forEach(function(item,index) {	
			cnt++;
			item.injectInside(imageFeed);
			item.removeClass('hide');
		});
		
		var dynamicWidth = this.widthPerElement * cnt;
		imageFeed.setStyle('width',dynamicWidth + 'px');
		imageFeed.addClass('img_feed_div');
		imageFeed.injectInside(this.element);
		this.totalItems = cnt;
		this.previous.addEvent('click', portfolio.Previous);
		this.next.addEvent('click', portfolio.Next);
		this.hideOrShowMenuBox.addEvent('click', portfolio.onDivHideOrShowMenuClick);		
		
		var dynamicHeight = $('wrapper').offsetHeight  ;		
		imageFeed.setStyle('height',dynamicHeight-20);
		/////
		//imageFeed.setStyle('height',633);
		/*
		$('wrapper').setStyle('height','653');
		this.element.setStyle('display','653');
		this.element.setStyle('overflow','hidden');
		*/
		this.element.setStyle('display','block');
		
		
	},
	onDivHideOrShowMenuClick : function(event) {		
	        if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
			target = event.target;
			}else {
				event.cancelBubble = true;
				event.returnValue = false;
				target = this;
			}			
			var aElement = $E('a', portfolio.hideOrShowMenuBox);
			if (aElement.hasClass('hide'))
			{			
				portfolio.menuBox.setStyle('padding','70px 0px 0px 0px');
				portfolio.effect = new Fx.Styles(portfolio.menuBox, {duration:700, wait:false}); 
				
				portfolio.effect.start({
				    'width': 0
				});				
				
				portfolio.effect = new Fx.Styles(portfolio.subMenu, {duration:700, wait:false});				
				portfolio.effect.start({
					'left': 302
				});
				
				portfolio.effect = new Fx.Styles(portfolio.element, {duration:700, wait:false}); 
				portfolio.effect.start({
					'width': 365
				});
				
				aElement.removeClass('hide');
				aElement.addClass('show');
				aElement.setHTML('Show<br/>Menu');
			}
			else
			{	
				var menuDiv = $$('#menusbox');
				portfolio.menuBox.setStyle('padding','70px 10px 0px 7px');
				portfolio.element.setStyle('width','325px');
				
				portfolio.effect = new Fx.Styles(portfolio.menuBox, {duration:700, wait:false}); 
				portfolio.effect.start({
				    'width': 170
				});
				
				portfolio.effect = new Fx.Styles(portfolio.subMenu, {duration:700, wait:false});				
				portfolio.effect.start({
					'left': 153
				});
				
				
				portfolio.effect = new Fx.Styles(portfolio.element, {duration:700, wait:false}); 
				portfolio.effect.start({
					'width': 186
				});
				
				aElement.removeClass('show');
				aElement.addClass('hide');
				aElement.setHTML('Show<br/>Photos');
			}
	},
	Next : function(event) {		
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
			target = event.target;
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		    target = this;
		}
		
	    portfolio.currentItemIndex++;
		if (portfolio.currentItemIndex <= portfolio.totalItems)
		{
			if (portfolio.currentItemIndex == portfolio.totalItems)
			{
				portfolio.next.addClass('inactive');			
			}
			else
			{
				portfolio.next.removeClass('inactive');
			}
			portfolio.previous.removeClass('inactive');	
			portfolio.effect = new Fx.Scroll(portfolio.element, {wait: true,duration: 500,transition: Fx.Transitions.linear});
			event = new Event(event).stop();
			portfolio.effect.toElement(portfolio.items[portfolio.currentItemIndex-1]);
		}
		else
			portfolio.currentItemIndex = portfolio.totalItems;
        
	},
	Previous : function(event) {	
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
			target = event.target;
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		    target = this;
		}
	
	   	portfolio.currentItemIndex--;
		if (portfolio.currentItemIndex > 0)
		{
			if (portfolio.currentItemIndex == 1)
			{
				portfolio.previous.addClass('inactive');
			}
			else
			{
				portfolio.previous.removeClass('inactive');
			}
			portfolio.next.removeClass('inactive');		  
			portfolio.effect = new Fx.Scroll(portfolio.element, {wait: true,duration: 500,transition: Fx.Transitions.linear});
			event = new Event(event).stop();
			
			portfolio.effect.toElement(portfolio.items[portfolio.currentItemIndex-1]);
		}
		else
			portfolio.currentItemIndex = 1;
	}
}
portfolio.init('img_div','#img_div img', 'menusbox', 'divSubMenu', 'divHideOrShowMenu', 'prev','next');