/*
Script: 	
	JVHotNews - Display hot news.

License:
	Proprietary - JoomlaVi Club members only

Copyright:
	Copyright (C) JoomlaVi. All rights reserved.
*/

var JVHotNews = new Class({
	Implements: [Options, Events],
	options:{
		arrows: 1,
		autoHideArrows: 1,
		autoPlay: 1,
		display: 0,
		width: false,
		height: false,
		delay: 3000,
		duration: 1500,
		transition: Fx.Transitions.Sine.easeInOut,
		forceEffect: 1,
		fx: 'fade',
		linkTarget: '_blank',
		itemsClass: '.jv-hotnews-items',
		arrowsClass: '.jv-hotnews-arrows'
	},
	
	initialize: function(selector, data, options){
		this.setOptions(options);
		this.selector = $(selector);
		if(!this.selector) return;
		this.setup(data);		
	},	
	
	setup: function(data){
		var that = this;		  
		if(!this.selector) return;	
	//	console.log($type(data));
	//	if($type(data) != 'array') return;
		this.len = data.length;
		if(this.len < 1) return;
		that.options.display = Math.min(Math.max(0, that.options.display), that.len - 1);
		this.data = data;		
		this.items = this.selector.getElement(that.options.itemsClass);
		var selectorCoord = this.selector.getCoordinates();
		this.options.width = this.options.width || selectorCoord.width;
		this.options.height = this.options.height || selectorCoord.height;
		this.selector.setStyles({
			'width': that.options.width,
			'height': that.options.height
		});
		var itemElement = new Element('li', {
			'class': 'item'
		});
		new Element('a', {
			'target': this.options.linkTarget
		}).inject(itemElement);
		this.effectComplete = true;
		this.itemFirst = itemElement.inject(this.items, 'top');
		this.itemSecond = itemElement.clone().inject(this.items, 'top');
		this.itemFirst.fx = new Fx.Morph(this.itemFirst, {duration: that.options.duration, transition: that.options.transition}).set({opacity:0});
		this.itemSecond.fx = new Fx.Morph(this.itemSecond, {duration: that.options.duration, transition: that.options.transition, onComplete: function(){that.effectComplete = true;}}).set({opacity:0});
		this.itemLoader = this.items.getElement('.loader');
		this.itemLoader.fx = new Fx.Morph(this.itemLoader).set({opacity:1});		
		if(that.options.arrows == 1){
			this.arrows = this.selector.getElement(that.options.arrowsClass);	
			this.initArrows();
		}
		if(that.options.autoPlay == 1){		
			this.initAutoPlay();
		}
		this.counter = 0;
		this.paused = false;		
		this.load(that.options.display);
	},
		
	initArrows: function(){
		var that = this;
		if(this.options.autoHideArrows == 1){
			this.arrows.fx = new Fx.Morph(this.arrows, {wait: false}).set({opacity:0});
			this.selector.addEvents({
				'mouseenter': function(){
					this.arrows.fx.cancel().start({opacity: 1});
				}.bind(this),
				'mouseleave': function(){
					this.arrows.fx.cancel().start({opacity: 0});
				}.bind(this)			
			});
		}
		else{
			this.arrows.fx = new Fx.Morph(this.arrows, {wait: false}).set({opacity:1});
		}
		
		['prev', 'next'].each(function(func, index){
			if(that.arrows.getElement('.' + func)){
				that.arrows.getElement('.' + func).addEvent('click', function(){
					that[func].call(that);
				});
			}
		});
		if(this.arrows.getElement('.pause')){
			this.arrows.getElement('.pause').addEvent('click', function(){
				if(this.hasClass('play')){
					this.removeClass('play');
					that.paused = false;
					console.log(that.paused);
					if(that.options.autoPlay == 1){
						that.initAutoPlay();
					}
				}
				else{
					this.addClass('play');
					that.paused = true;
					clearInterval(that.autoTimer);				
				}
			});	
		}
	},
	
	initAutoPlay: function(){
		var that = this;
		if(that.len <= 1) return;
		clearInterval(this.autoTimer);
		this.autoTimer = setInterval(function(){
			that.load(that.options.display < that.len - 1 ? that.options.display + 1 : 0);
		}, that.options.delay);
	},
	
	load: function(index){
		this.options.display = index;
		if(!this.paused && this.options.autoPlay == 1) this.initAutoPlay();
		this.show();								
	},
		
	prev: function(){
		this.load(this.options.display > 0 ? this.options.display - 1: this.len - 1);
	},	
	
	next: function(){
		this.load(this.options.display < this.len - 1 ? this.options.display + 1 : 0);	
	},	
		
	show: function(fx){			
		var fxType = this.options.fx.split(',').getRandom();
		this.start(fxType);		
	},
	
	start: function(fx){
		var effect = fx ? fx : this.options.fx,
			data = this.data[this.options.display];
		if(!this.effectComplete && this.options.forceEffect){
			return;
		}		
		if(this.counter % 2){
			this.image = this.itemSecond;
			this.oldImage = this.itemFirst;	
		}
		else{
			this.image = this.itemFirst;
			this.oldImage = this.itemSecond;
			this.counter = 0;
		}
		this.counter++;		
		this.oldImage.setStyles({			
			'zIndex': 0
		});
		this.image.setStyles({
			'display': 'block', 
			'width': 'auto', 
			'height': 'auto', 
			//'visibility': 'hidden',
			'zIndex': 1
		});
		this.image.getElement('a').set('html', data.title + (this.options.showDate ? ' - ' + data.modified : ''));
		this.image.getElement('a').setProperty('title', data.title + (this.options.showDate ? ' - ' + data.modified : ''));
		this.image.getElement('a').setProperty('href', data.link);
		
		
		this.itemLoader.fx.cancel().start({opacity:0});
		this.effectComplete = false;
		this[effect].call(this);		
	},
	
	reset: function(){
		this.oldImage.fx.cancel().set({left: 0, top: 0});
		this.image.fx.cancel().set({left: 0, top: 0});
	},
	
	fade: function(){
		this.reset();			
		this.image.fx.set({opacity: 0});
		this.oldImage.fx.start({opacity: 0});
		this.image.fx.start({opacity: 1});
	},
	
	slideLeft: function(){
		this.reset();				
		this.oldImage.fx.set({opacity: 1});
		this.image.fx.set({opacity: 1});
		this.oldImage.fx.set({'left':0});
		this.image.fx.set({'left':this.options.width});
		
		this.oldImage.fx.start({'left':-this.options.width});
		this.image.fx.start({'left':0});		
	},
	
	slideRight: function(){
		this.reset();				
		this.oldImage.fx.set({opacity: 1});
		this.image.fx.set({opacity: 1});
		this.oldImage.fx.set({'left':0});
		this.image.fx.set({'left':-this.options.width});
		
		this.oldImage.fx.start({'left':this.options.width});
		this.image.fx.start({'left':0});		
	},
	
	slideTop: function(){
		this.reset();				
		this.oldImage.fx.set({opacity: 1});
		this.image.fx.set({opacity: 1});
		this.oldImage.fx.set({'top':0});
		this.image.fx.set({'top':this.options.height});
		
		this.oldImage.fx.start({'top':-this.options.height});
		this.image.fx.start({'top':0});		
	},
	
	slideBottom: function(){
		this.reset();				
		this.oldImage.fx.set({opacity: 1});
		this.image.fx.set({opacity: 1});
		this.oldImage.fx.set({'top':0});
		this.image.fx.set({'top':-this.options.height});
		
		this.oldImage.fx.start({'top':this.options.height});
		this.image.fx.start({'top':0});		
	},
	
	fadeLeft: function(){	
		this.reset();		
		this.oldImage.fx.set({opacity: 1});		
		this.image.fx.set({opacity: 1, left: this.options.width});	
		this.oldImage.fx.start({left: 0, opacity: 0});				
		this.image.fx.start({left: 0});
	},
	
	fadeRight: function(){
		this.reset();
		this.oldImage.fx.set({opacity: 1});		
		this.image.fx.set({opacity: 1, left: -this.options.width});	
		this.oldImage.fx.start({left: 0, opacity: 0});				
		this.image.fx.start({left: 0});
	},
	
	fadeTop: function(){	
		this.reset();
		this.oldImage.fx.set({opacity: 1});		
		this.image.fx.set({opacity: 1, top: this.options.height});	
		this.oldImage.fx.start({top: 0, opacity: 0});				
		this.image.fx.start({top: 0});
	},
	
	fadeBottom: function(){
		this.reset();
		this.oldImage.fx.set({opacity: 1});		
		this.image.fx.set({opacity: 1, top: -this.options.height});	
		this.oldImage.fx.start({top: 0, opacity: 0});				
		this.image.fx.start({top: 0});
	},
	crossFadeLeft: function(){
		this.reset();				
		this.image.fx.set({opacity: 0, left: this.options.width/2});	
		this.oldImage.fx.start({left: this.options.width/2, opacity: 0});				
		this.image.fx.start({left: 0, opacity: 1});
	},
	crossFadeRight: function(){
		this.reset();				
		this.image.fx.set({opacity: 0, left: -this.options.width/2});	
		this.oldImage.fx.start({left: -this.options.width/2, opacity: 0});				
		this.image.fx.start({left: 0, opacity: 1});
	},
	crossFadeTop: function(){
		this.reset();				
		this.image.fx.set({opacity: 0, top: this.options.height/2});	
		this.oldImage.fx.start({top: this.options.height/2, opacity: 0});				
		this.image.fx.start({top: 0, opacity: 1});
	},
	crossFadeBottom: function(){
		this.reset();				
		this.image.fx.set({opacity: 0, top: -this.options.height/2});	
		this.oldImage.fx.start({top: -this.options.height/2, opacity: 0});				
		this.image.fx.start({top: 0, opacity: 1});
	}
});