JAME.Components.Panels = function(options) {

	this.container          = options.container;
	this.navContainer       = options.navContainer || this.container;
	this.panels             = options.panels;
	this.panelWidth         = options.panelWidth;
	this.onCreateNavigation = options.onCreateNavigation || function() {};
	this.isNavigationOff    = options.navigationOff      || false;
	this.speed              = options.transition         || false;
	this.onNavigationClick  = options.onNavigationClick  || function(){};
	options.padding			= options.padding || 0;
	this.interval           = undefined;
	options.customId		= options.customId||'';
	if(JAME.$('jpanels-gallery-nav')){
		++JAME.Components.Panels.counter;
		options.customId='panel'+JAME.Components.Panels.counter+'_';
	}
	JAME.extend(this,new JAME.Events.EventDispatcher());

	this.animationInstance  = undefined;
	var me = this;

	options.to   	   = options.to || 'left';

	var moveOf		   =(options.to=='top') ? ['height','bottom','top'] : ['width','left','right'];

	var width          = parseInt(JAME.CSS.getStyle(this.container,moveOf[0]));
	var totalWidth     = 0;
	var links          = '';

	for(var i=0,ln=this.panels.length;i<ln;i++) {
		var w      = this.panelWidth || parseInt(JAME.CSS.getStyle(this.panels[i],moveOf[0]));
		totalWidth+=w;
		totalWidth+=parseInt(JAME.CSS.getStyle(this.panels[i],'padding-'+moveOf[1]));
		totalWidth+= parseInt(JAME.CSS.getStyle(this.panels[i],'padding-'+moveOf[2]));
		var style = {
			float:(options.to=='left')?'left':'none',
			textAlign:'center'
		};
		style[moveOf[0]]=w;
		JAME.CSS.setStyles(this.panels[i],style);

		if(this.isNavigationOff) {
			continue;
		}
		var display = this.onCreateNavigation(this.panels[i],i) || i+1;

		links+='<a href="#" class="'+options.customId+' goto" id="counter_'+i+'">'+display+'</a>';
	};

	if(totalWidth<=width) return this;


	var containerWidth = this.panelWidth || width;

	var style={};
	style[moveOf[0]]=parseInt(containerWidth)*(this.panels.length+2);

	JAME.CSS.setStyles(this.container,style);

	var style={
		position:JAME.CSS.getStyle(this.container,'position'),
		left   : JAME.CSS.getStyle(this.container,'left'),
		top    : JAME.CSS.getStyle(this.container,'top')
	};

	var basePosition = JAME.CSS.getStyle(JAME.$(me.container.id),'position');
	JAME.CSS.setStyles(this.container,{
		position:'static',
		overflow:'hidden'
	});

	var div = JAME.DOM.wrapNode(this.container,'div');
	div.id="jpanels-container-overflow";
	var style={overflow:'hidden',clear:'both'};
	style[moveOf[0]]=width;
	JAME.CSS.setStyles(div,style);

	if(!this.isNavigationOff) {
		var customId = options.customId ? '<div id='+options.customId+'>' : '<div>';
		var nav = customId+'<div id="jpanels-gallery-nav">'+
			'<div><a href="#" class="goPrev">&laquo;&laquo;</a>'+
			'<span style="margin:0px;padding:0px;position:relative;top:0px;">'+
			'<div id="scrollbar"></div>';
		nav+=links;
		nav+='</span><a href="#" class="goNext">&raquo;&raquo;</a></div><br /></div></div>';
		var insert=JAME.DOM.createNode('div');
		insert.innerHTML=nav;
		div.parentNode.insertBefore(insert,div);
	JAME.CSS.setStyles(JAME.$('scrollbar'),{width:JAME.CSS.getStyle(parse('#jpanels-gallery-nav .goto')[0],'width')});

	}

	var elm_per_view = 0;
	var moveBy	     = 0;
	if(width>parseInt(JAME.CSS.getStyle(this.panels[0],moveOf[0]))) {
		moveBy = parseInt(JAME.CSS.getStyle(this.panels[0],moveOf[0])) + options.padding;
		var elm_per_view = Math.floor(width/parseInt(JAME.CSS.getStyle(this.panels[0],moveOf[0])))-1;
	}
	else 
		moveBy=width+options.padding;


	var actualImg = 0;
	var maxPos    = this.panels.length - elm_per_view;
	var topos     = parse(".goto") || undefined;


	var activeStyles = {
		color : '#885544'
	};

	var setActiveStyle= (!options.isStyling) ? function(pos) {
		if(!topos) return;
		if(!topos[pos]) return;

		if(!topos[pos].oldStyle) {
			topos[pos].oldStyle={};
			for(var style in activeStyles) {
				if(JAME.CSS.getStyle(topos[pos],style))
				topos[pos].oldStyle[style]=JAME.CSS.getStyle(topos[pos],style);
			}
		}
		JAME.CSS.setStyles(topos[pos],activeStyles);
	} : function(pos) {
		if(!topos) return;
		if(!topos[pos]) return;
				topos[pos].className+=' activated';
		};

	var deactivateStyle= (!options.isStyling) ? function(pos) {
		if(!topos) return;
		if(!topos[pos]) return;

		if(topos[pos].oldStyle) {
			JAME.CSS.setStyles(topos[pos],topos[pos].oldStyle);
		}
	} : function(pos) {
			topos[pos].className = (topos[pos].className) ? topos[pos].className.replace('activated','') : '';
		};

	setActiveStyle(0);

	if(basePosition=='absolute') {
		var effectBase = {
			position:['absolute','absolute'],
			opacity:[.9,0.5]
		};
	}
	else {
		var effectBase = {
			position:['relative','relative'],
			opacity:[.9,0.5]
		};
	}

	this.goNext = function() {
		
		var pos = actualImg;

		deactivateStyle(pos);
		actualImg = (pos==maxPos-1) ? -1 : parseInt(actualImg); 
		actualImg=actualImg+1;

		me.moveScrollBar(actualImg);
		setActiveStyle(actualImg);
		var from = -(moveBy*pos);
		var to   = -(moveBy*actualImg);
		effectBase[options.to]=[from,to];
		me.animationInstance = new JAME.FX({duration:400}).Tween(JAME.$(me.container.id),effectBase);
		me.animationInstance.addListener('onComplete',function() {
			me.animationInstance=undefined;
			new JAME.FX({duration:200,easing:JAME.FX.Transition.Sine.In}).Tween(JAME.$(me.container.id),{opacity:[1]});
			if(me.isSlideShow && !me.interval) me.startSlideShow(me.isSlideShow);
		});
	}

	this.goPrev = function() {
	
		var pos = actualImg;
		deactivateStyle(pos);

		actualImg = (actualImg==0) ? parseInt(maxPos) : actualImg; 
		actualImg = parseInt(actualImg) - 1 ;

		me.moveScrollBar(actualImg);
		setActiveStyle(actualImg);
		var from = -(moveBy*pos);
		var to   =-(moveBy*actualImg);
		effectBase[options.to]=[from,to];
		me.animationInstance = new JAME.FX({duration:400}).Tween(JAME.$(me.container.id),effectBase);
		me.animationInstance.addListener('onComplete',function() {
			me.animationInstance=undefined;
			new JAME.FX({duration:200,easing:JAME.FX.Transition.Sine.In}).Tween(JAME.$(me.container.id),{opacity:[1]});
			if(me.isSlideShow && !me.interval) me.startSlideShow(me.isSlideShow);
		});

	}

	var me = this;
	var goNextListener = function(e) {
		e = JAME.Events.Normalize(e);
		e.stopPropagation();
		e.preventDefault();
		if(me.animationInstance)
			return;
		if(me.interval)
			me.stopSlideShow();
		me.goNext();
	}

	var goPrevListener = function(e) {
		e = JAME.Events.Normalize(e);
		e.stopPropagation();
		e.preventDefault();
		if(me.animationInstance) 
			return;
		if(me.interval) 
			me.stopSlideShow();
		me.goPrev();
	}

	
	this.moveScrollBar = (topos) ? function(pos) {
		var upTo=0;
		for(var i = 0;i<pos;i++) upTo+=parseInt(JAME.CSS.getStyle(topos[i],'width'));		

		new JAME.FX({duration:600,easing:JAME.FX.Transition.Back.InOut}).Tween(JAME.$('scrollbar'),{
			left : [parseInt(JAME.CSS.getStyle(JAME.$('scrollbar'),'left')),upTo],
			width: [parseInt(JAME.CSS.getStyle(JAME.$('scrollbar'),'width')),parseInt(JAME.CSS.getStyle(topos[pos],'width'))]
		});
	} :function(){};

	this.go = function(e) {

		e = JAME.Events.Normalize(e);
		if(e) e.preventDefault();
		var a=e.target;
		while(a) {
			if(a.nodeName.toLowerCase()==='a' && a.id.match('counter_')) {
				pos = a.id;
				a=undefined;
			}
			if(a) a = a.parentNode;
		}


		var parts = pos.split('counter_');
		pos = parts[1];
		me.onNavigationClick(actualImg,pos);
		me.moveTo(pos);
	}
	this.moveTo = function(pos) {

		if(!me.isNavigationOff) {
			me.moveScrollBar(pos);
			deactivateStyle(actualImg);
			setActiveStyle(pos);
		}
		effectBase[options.to]=[-moveBy*actualImg,-moveBy*pos];
		me.animationInstance = new JAME.FX({duration:400}).Tween(JAME.$(me.container.id),effectBase);
		me.dispatch('movingTo',pos);

		me.animationInstance.addListener('onComplete',function() {
			me.animationInstance=undefined;
			new JAME.FX({duration:200,easing:JAME.FX.Transition.Sine.In}).Tween(JAME.$(me.container.id),{opacity:[1]});
		});
		actualImg = pos;
	}

	if(this.isNavigationOff) return;

	if(topos) {
		topos.each(function(lm) {
			lm.onclick=me.go;
		});
	}
	var next  = parse("#"+"jpanels-gallery-nav a.goNext");
	var prev  = parse("#"+"jpanels-gallery-nav a.goPrev");
	next.onclick = goNextListener;
	prev.onclick = goPrevListener;
	this.isSlideShow = false;
	this.startSlideShow = function(time) {
		me.isSlideShow = time;
		me.interval = setInterval(function() {
			me.goNext();
		},time);
	}
	this.stopSlideShow = function() {
		clearInterval(me.interval);
		me.interval=undefined;
	}


}
JAME.Components.Panels.counter=0;