//JavaScript Document
//Place functions within this document
//Call functions within the dom ready in the html page

//////////////////////////////////////////////////////////////////

//this is the function we use on mouse enter, tweens width to 700px
var enterFunction = function() {
	this.start('top', '0');
}
 
//this is the function we use on mouse leave, tweens width back to 300px
var leaveFunction = function() {
	
	this.start('top', '80%');
}
function addFunc(el){
	// get div to tween
	//var div = el.get('id').replace('boxprod_','box_')
	quadIn = new Fx.Tween(el, {
	link: 'cancel',
	duration: 500,
	transition: Fx.Transitions.Quad.easeOut,
	onStart: function(passes_tween_element){
		passes_tween_element.fade(0.8);
	},
	onComplete: function(passes_tween_element){
		//passes_tween_element.highlight('#00ff00');
	}	
    });
	
	el.fade(0.8);
	
	el.addEvents({
		
        //first, you say what kind of event, place event type inside 'single quotes'
        //then place a :
        //finally you state your function
        //in this case, its a function that binds to the tween
        'mouseenter': enterFunction.bind(quadIn),
        'mouseleave': leaveFunction.bind(quadIn)
    })

	return;
}

function showPrev(){
	
	this.start({
		
		'opacity':  [0, 1]
	});
	
/* 	alert( this.get('morph') );
	var myURI = new URI(  this.toString() );
	var li = document.id( "med" + myURI.getData( 'id' ) );
 */
	
}

function hidePrev(){
	
	this.start({
		
		'opacity': [1, 0]
	});
	
}

function addTip( el ){

	var myURI = new URI(  el.toString() );
	var li = document.id( "med" + myURI.getData( 'id' ) );
	var x = el.getPosition( 'right' ).x;
	var y = el.getPosition( 'right').y;
	// get div to tween
	var myEffects = new Fx.Morph( li , {
		duration: 400, 
		transition: Fx.Transitions.Sine.easeOut,
		link: 'cancel',
		onStart: function(passes_tween_element){
			passes_tween_element.setStyles({
				'display': 'block'
				});
			
		},
		onComplete: function(passes_tween_element){
		//passes_tween_element.highlight('#00ff00');
		
		}
	});
	 el.addEvent('mouseenter', function(){
		
		li.setStyles({
				'display': 'block',
				'top' : ( y - 100 ) + 'px',
				'left' : ( x + 40 ) + 'px',
			});
	})
	
	el.addEvent('mouseleave', function(){
		//hidePrev.bind( myEffects );
	}) 
/**/
	el.addEvents({
		
        //first, you say what kind of event, place event type inside 'single quotes'
        //then place a :
        //finally you state your function
        //in this case, its a function that binds to the tween
        'mouseenter': showPrev.bind( myEffects ),
        'mouseleave': hidePrev.bind( myEffects )
    })
	li.addEvents({
		
        //first, you say what kind of event, place event type inside 'single quotes'
        //then place a :
        //finally you state your function
        //in this case, its a function that binds to the tween
        'mouseenter': showPrev.bind( myEffects ),
        'mouseleave': hidePrev.bind( myEffects )
    })

	

	return;
}

/*
Author:
	luistar15, <leo020588 [at] gmail.com>
License:
	MIT License

Class
	viewer v0.9 (rev.08-12-08)

Arguments:
	items: dom collection | required
	parameters - see Parameters below

Parameters:
	sizes: obj | item sizes (px) | default: {w:480,h:240}
	mode: string OR array | 'rand','top','right','bottom','left','alpha' | default: 'rand'
	modes: array | default: ['top','right','bottom','left','alpha']
	fxOptions: object | Fx.Tween options | default: {duration:500}
	interval: int | for periodical | default: 5000

Methods:
	previous(manual): walk to previous item
		manual: bolean | default:false
	next(manual): walk to next item
		manual: bolean | default:false
	play(wait): auto walk items
		wait: boolean | required
	stop(): stop auto walk
	walk(item,manual): walk to item
		item: int | required
		manual: bolean | default:false

Requires:
	mootools 1.2 core
*/

var viewer = new Class({

	mode: 'rand',
	modes: ['top','right','bottom','left','alpha'],
	sizes: {w:480,h:240},
	fxOptions: {duration:500},
	interval: 5000,

	initialize: function(items,options){
		if(options) for(var o in options) this[o]=options[o];
		//
		if(this.buttons){
			this.buttons.previous.addEvent('click',this.previous.bind(this,[true]));
			this.buttons.next.addEvent('click',this.next.bind(this,[true]));
		}
		this.__current = 0;
		this.__previous = null;
		this.items = items.setStyle('display','none');
		this.items[this.__current].setStyle('display','block');
		this.disabled = false;
		this.attrs = {
			left: ['left',-this.sizes.w,0,'px'],
			top: ['top',-this.sizes.h,0,'px'],
			right: ['left',this.sizes.w,0,'px'],
			bottom: ['top',this.sizes.h,0,'px'],
			alpha: ['opacity',0,1,'']
		};
		this.rand = this.mode=='rand';
		this.sequence = typeof(this.mode)=='object' ? this.mode : false;
		this.curseq = 0;
		this.timer = null;
	},

	walk: function(n,manual){
		if(this.__current!==n && !this.disabled){
			this.disabled = true;
			if(manual){
				this.stop();
			}
			if(this.rand){
				this.mode = this.modes.getRandom();
			}else if(this.sequence){
				this.mode = this.sequence[this.curseq];
				this.curseq += this.curseq+1<this.sequence.length ? 1 : -this.curseq;
			}
			this.__previous = this.__current;
			this.__current = n;
			var a = this.attrs[this.mode].associate(['p','f','t','u']);
			for(var i=0;i<this.items.length;i++){
				if(this.__current===i){
					this.items[i].setStyles($extend({'display':'block','z-index':'2'},JSON.decode('{"'+a.p+'":"'+a.f+a.u+'"}')));
				}else if(this.__previous===i){
					this.items[i].setStyles({'z-index':'1'});
				}else{
					this.items[i].setStyles({'display':'none','z-index':'0'});
				}
			}
			this.items[n].set('tween',$merge(this.fxOptions,{onComplete:this.onComplete.bind(this)})).tween(a.p,a.f,a.t);
		}
	},

	play: function(wait){
		this.stop();
		if(!wait){
			this.next();
		}
		this.timer = this.next.periodical(this.interval,this,[false]);
	},

	stop: function(){
		$clear(this.timer);
	},

	next: function(manual){
		this.walk(this.__current+1<this.items.length ? this.__current+1 : 0,manual);
	},

	previous: function(manual){
		this.walk(this.__current>0 ? this.__current-1 : this.items.length-1,manual);
	},

	onComplete: function(){
		this.disabled = false;
		this.items[this.__previous].setStyle('display','none');
		if(this.onWalk) this.onWalk(this.__current);
	}
});