var scroll = Array();
var counter = Array();
var count = Array();
var items = Array();

function setScroll(id, it, len)
{
    if ( $('scroll-'+id) == null ) return;    
    if ( $('scroll-content-'+id) == null ) return;
    counter[id] = 0;
    items[id] = it;
    count[id] = $$('div.scroll-item-'+id).length;

    if (len != 0) $('scroll-content-'+id).setStyle('width', (len*count[id])+'px')

    scroll[id] = new Fx.Scroll('scroll-'+id);
}

function scrollNext(id)
{
	counter[id]++;
    
	if ( counter[id] > count[id] - items[id])
        counter[id] = 0;

	scroll[id].toElement('scroll-item-'+id+'-'+counter[id]);
}

function scrollPrev(id)
{
    counter[id]--;
    
	if ( counter[id] < 0 )
        counter[id] = count[id] - items[id];

    if ( counter[id] < 0 )
        counter[id] = 0;

	scroll[id].toElement('scroll-item-'+id+'-'+counter[id]);
}

/**
 * Płynnie zmienia zawartość elementu o id równym "id" ze starej zawartości na nową
 * o wartości "html". Opcjonalnie możliwość ustawienia szybkości zmiany zawartości "duration" [ms].
 * 
 * Wymagana biblioteka mootools.js 
 * 
 * @param {int} id
 * @param {sting} html
 * @param {int} duration
 */
function slowlyChangeHtml(id, html, duration) {
	
	defaultDuration = 250;
	duration = !$defined(duration) ? defaultDuration : duration;
	
	$(id).set('tween', {
		onComplete: function() {
			$(id).set('html', html);
			$(id).tween('opacity', 1);	
		},
		duration: duration,
		link: 'chain'
	});
	
	$(id).tween('opacity', 0);
}

var myScroller = {
	init: function(settings) {
				
		this.windowID = settings.windowID;
		this.tapeID = settings.tapeID;
		this.prevArrowID1 = $defined(settings.prevArrowID1) ? settings.prevArrowID1 : '';
		this.nextArrowID1 = $defined(settings.nextArrowID1) ? settings.nextArrowID1 : '';
		this.prevArrowID2 = $defined(settings.prevArrowID2) ? settings.prevArrowID2 : '';
		this.nextArrowID2 = $defined(settings.nextArrowID2) ? settings.nextArrowID2 : '';
		this.navInput = $defined(settings.navInput) ? settings.navInput : '';
		
		this.itemsName = settings.itemsName;
		this.itemsSelector = settings.itemsSelector;
		this.step = $defined(settings.step) ? settings.step : 1;
		this.actItem = 0; 
		
		if($defined(this.itemsName)) {
			this.itemsArr = $(this.tapeID).getElements('[name=' + this.itemsName + ']');
		}else if($defined(this.itemsSelector)) {
			this.itemsArr = $$(itemsSelector);
		}
		
		this.idArr = new Array();
		
		var i;
		for(i = 0; i < this.itemsArr.length; i++) {
			this.idArr.push(this.itemsArr[i].id);
		}
		
		this.fx = new Fx.Scroll(this.windowID, {
			duration: 500,
			link: 'chain'
		});
		
		$(this.prevArrowID1).addEvent('click', this.goPrev.pass(this));
		$(this.nextArrowID1).addEvent('click', this.goNext.pass(this));
		$(this.prevArrowID2).addEvent('click', this.goPrev.pass(this));
		$(this.nextArrowID2).addEvent('click', this.goNext.pass(this));
		
		$(this.navInput).addEvent('click', (function(){
			$(this.navInput).set('value', '');
		}).bind(this));
		
		$(this.navInput).addEvent('blur', (function(){
			$(this.navInput).set('value', this.oldInputValue);
		}).bind(this));
		
		$(this.navInput).addEvent('keydown', (function(event){
			if (event.key == 'enter') {
		    	this.goToPage(this);
		    }
		}).bind(this));
		
		$(this.navInput).set('value', '1/' + this.itemsArr.length);
		this.oldInputValue = $(this.navInput).get('value');
		
		
		$(this.prevArrowID1).setStyle('display', 'none');
		$(this.prevArrowID2).setStyle('display', 'none');
	
		if(this.itemsArr.length < 2) {
			$(this.nextArrowID1).setStyle('display', 'none');
			$(this.nextArrowID2).setStyle('display', 'none');
			$(this.navInput).setStyle('display', 'none');
		}
		
	},
	goPrev: function (ptr) {
		ptr.actItem -= ptr.step;
		if(ptr.actItem < 0) {
			ptr.actItem = ptr.itemsArr.length - (ptr.itemsArr.length % ptr.step);
		}

		ptr.fx.toElement(ptr.idArr[ptr.actItem]);
		$(ptr.navInput).set('value', (ptr.actItem + 1) + '/' + ptr.itemsArr.length);
		ptr.oldInputValue = $(ptr.navInput).get('value');
		
		ptr.updateArrows(ptr);	
				
	},
	
	goNext: function (ptr) {
		ptr.actItem += ptr.step;
		if(ptr.actItem >= ptr.itemsArr.length) {
			ptr.actItem = 0;
		}
		ptr.fx.toElement(ptr.idArr[ptr.actItem]);
		$(ptr.navInput).set('value', (ptr.actItem + 1) + '/' + ptr.itemsArr.length);
		ptr.oldInputValue = $(ptr.navInput).get('value');
		
		ptr.updateArrows(ptr);	
	},
	
	goToPage: function(ptr) {
		
		var inputValue = new Number( parseFloat($(ptr.navInput).get('value')));
		
		if(inputValue <= 0) inputValue = 1;
		if(inputValue > ptr.itemsArr.length) inputValue = ptr.itemsArr.length;
		
		ptr.actItem = inputValue - 1;
		ptr.fx.toElement(ptr.idArr[ptr.actItem]);
		
		$(ptr.navInput).set('value', (ptr.actItem + 1) + '/' + ptr.itemsArr.length);
		ptr.oldInputValue = $(ptr.navInput).get('value');
		ptr.updateArrows(ptr);			
	},
	
	updateArrows: function (ptr) {
		if (ptr.itemsArr.length > 1) {
			
			if (ptr.actItem > 0) {
				$(this.prevArrowID1).setStyle('display', 'block');
				$(this.prevArrowID2).setStyle('display', 'block');
			}else {
				$(this.prevArrowID1).setStyle('display', 'none');
				$(this.prevArrowID2).setStyle('display', 'none');
			}
			
			if (ptr.actItem < ptr.itemsArr.length -1) {
				$(this.nextArrowID1).setStyle('display', 'block');
				$(this.nextArrowID2).setStyle('display', 'block');
			}else{
				$(this.nextArrowID1).setStyle('display', 'none');
				$(this.nextArrowID2).setStyle('display', 'none');
			}
			
		}
	}	
};


var proScroller = {
	init: function(settings) {
				
		this.windowID = settings.windowID;
		this.tapeID = settings.tapeID;
		this.navID = settings.navID;
		
		this.itemsName = settings.itemsName;
		this.buttonsName = settings.buttonsName;
		this.actItem = 0; 
		
		if($defined(this.itemsName)) {
			this.itemsArr = $(this.tapeID).getElements('[name=' + this.itemsName + ']');
		}
		
		if($defined(this.buttonsName)) {
			this.buttonsArr = $(this.navID).getElements('[name=' + this.buttonsName + ']');
		}
		this.idArr = new Array();
		
		var i;
		for(i = 0; i < this.itemsArr.length; i++) {
			this.idArr.push(this.itemsArr[i].id);
		}
		for(i = 0; i < this.buttonsArr.length; i++) {
			if( i==0 ) this.buttonsArr[i].className = 'product-photos-navigation-active';
			this.buttonsArr[i].addEvent('click', this.goToPage.pass( i ));
		}
		
		this.fx = new Fx.Scroll(this.windowID, {
			duration: 500,
			link: 'chain'
		});
		
	},
	
	goToPage: function(inputValue) {
		
		if(inputValue <= 0) inputValue = 0;
		if(inputValue > proScroller.itemsArr.length) inputValue = proScroller.itemsArr.length-1;
		
		proScroller.actItem = inputValue;
		proScroller.fx.toElement(proScroller.idArr[proScroller.actItem]);
		
		for(i = 0; i < proScroller.buttonsArr.length; i++) {
			if( i==inputValue ) proScroller.buttonsArr[i].className = 'product-photos-navigation-active';
			else  proScroller.buttonsArr[i].className = '';
		}
	}
};