// The Sliding Tabs mootools plugin is a creation of Jenna “Blueberry” Fox!
// This isn't free software, so don't forget to give me a gift of some sort!
// some idea's include poetry, drawings, songs, doodads, whosits, fuzzy things,
// software licenses, and general free stuff. Contact me at http://creativepony.com/#contact
// and let me know where you're using Sliding Tabs!
// Documentation: http://creativepony.com/journal/scripts/sliding-tabs/
// version: 1.8

/**************************************************************

	Modified	: Matus Matula (matula.m@gmail.com) - MooTools 1.2 support
	Desc		: prechod na verziu mootools-1.2
				: animateHeight robi problemy v IE, nepouzivam .. nerobi prechod, hned zobrazi content 
				: pridana ficura .. medzi buttonami moze byt oddelovac s triedou 'sep'	
				: kvoli IE v metode ChangeTo namiesto fx.toElement pouzivam fx.start

**************************************************************/

var SlidingTabs = new Class({
	Implements: [Events, Options],

	options: {
	    startingSlide: false, // sets the slide to start on, either an element or an id 
	    activeButtonClass: 'active', // class to add to selected button
	    activationEvent: 'click', // you can set this to ‘mouseover’ or whatever you like
	    wrap: true, // calls to previous() and next() should wrap around?
	    slideEffect: { // options for effect used to animate the sliding, see Fx.Base in mootools docs
	      duration: 400 // 0.4 of a second
	    },
	    animateHeight: true, // animate height of container...v IE to blbne, ak sa animuje vyska
	    rightOversized: 0 // how much of the next pane to show to the right of the current pane
  	},
  	current: null, // zero based current pane number, read only
  	buttons: false,	//	buttony na prechadzanie medzi jednotlivymi slidemy..malo by ich byt tolko, co panes
  	outerSlidesBox: null,	//	container pre aktualny slide [id=panes]
  	innerSlidesBox: null,	//	celkovy container vsetkych slidov..width = panes*pane_width [id=content]
  	panes: null,	//	tu sa ulozia jednotlive snimky
  	fx: null, // this one animates the scrolling inside
  	heightFx: null, // this one animates the height
  

  	initialize: function(buttonContainer, slideContainer, options) {

  		//	ak predame kontainer..nastavime si this.buttons  	
    	if (buttonContainer) { 
	    	this.buttons = [];
	    	//	medzi li mozu byt aj separatory ako >>, | apod .. tie tam nechcem..
	    	$(buttonContainer).getChildren().each(function(btn){
	    		//	cize ak to nema triedu 'sep', tak to pridame k this.buttons
	    		if (!btn.hasClass('sep')){
	    			this.buttons.push(btn);
	    		}
	    	}.bind(this)); 
    	}

	    this.outerSlidesBox = $(slideContainer);
	    this.innerSlidesBox = this.outerSlidesBox.getFirst();
	    this.panes = this.innerSlidesBox.getChildren();
    
	    this.setOptions(options);
	     
	    this.fx = new Fx.Scroll(this.outerSlidesBox, this.options.slideEffect);
	    this.heightFx = new Fx.Tween(this.outerSlidesBox, {
			property: 'height',
			duration: 400,
			link: 'chain'
//			link: 'cancel'
		});
    
	    // set up button highlight
	    this.current = this.options.startingSlide ? this.panes.indexOf($(this.options.startingSlide)) : 0;
	    if (this.buttons) { this.buttons[this.current].addClass(this.options.activeButtonClass); }
    
	    // add needed stylings
	    this.outerSlidesBox.setStyle('overflow', 'hidden');
	    this.panes.each(function(pane, index) {
	      	pane.setStyles({
		       'float': 'left',
		       'overflow': 'hidden'
	      	});
	    }.bind(this));
    
	    // stupidness to make IE work - it boggles the mind why this has any effect
	    // maybe it's something to do with giving it layout?
	    this.innerSlidesBox.setStyle('float', 'left');

        // set up all the right widths inside the panes
    	this.recalcWidths();
     
	    // add events to the buttons
	    if (this.buttons) {
	    	this.buttons.each(function(button) {
	      		button.addEvent(this.options.activationEvent, this.buttonEventHandler.bindWithEvent(this, button));
	    	}.bind(this));
	  	}
	    
	    if (this.options.animateHeight) {
	      	this.heightFx.set(this.panes[this.current].offsetHeight);
	    }
    

  	},
  
  // to change to a specific tab, call this, argument is the pane element you want to switch to.
  // v IE to zatial dobre nechodi..sposobene animate==true.. takze nejaky prechod v moo1.2 zly
  changeTo: function(element, animate) {
    if ($type(element) == 'number') {
    	element = this.panes[element - 1];
    }
    if (!$defined(animate)) {
    	animate = true;
    }
    
    var event = { cancel: false, target: $(element), animateChange: animate };
    this.fireEvent('change', event);
//    if (event.cancel == true) { return; };
    if (event.cancel === true) { return; }
    
    //	nastavenie aktualneho buttonu
    if (this.buttons) { this.buttons[this.current].removeClass(this.options.activeButtonClass); }
    this.current = this.panes.indexOf($(event.target));
    if (this.buttons) { this.buttons[this.current].addClass(this.options.activeButtonClass); }
    
    //	toto je tu na to, aby sa zastavil scroll ked kliknem na dalsi button a robil sa scroll aktualny
    this.fx.cancel();
    if (event.animateChange) {
    	//	kvoli fucking IE to musim vyratavat, toElement nefunguje tak ako ma..resp. nie vzdy..
//      this.fx.toElement(event.target);
      this.fx.start(this.panes.indexOf(event.target) * this.outerSlidesBox.offsetWidth.toInt());
    } else {
      this.outerSlidesBox.scrollTo(this.current * this.outerSlidesBox.offsetWidth.toInt(), 0);
    }
    
    if (this.options.animateHeight) {
      	this.heightFx.start(this.panes[this.current].offsetHeight);
    }
  },
  
  // Handles a click
  buttonEventHandler: function(event, button) {
    if (event.target == this.buttons[this.current]) {return;}
    this.changeTo(this.panes[this.buttons.indexOf($(button))]);
  },
  
  	// call this to go to the next tab
  	next: function() {
	    var next = this.current + 1;
	    if (next == this.panes.length) {
//      if (this.options.wrap == true) { next = 0 } else { return }
     		if (this.options.wrap === true) { 
     			next = 0; 
     		} else { 
     			return; 
     		}
    	}

    	this.changeTo(this.panes[next]);
  	},
  
	  // to go to the previous tab
	previous: function() {
   	 	var prev = this.current - 1;
	    if (prev < 0) {
//      if (this.options.wrap == true) { 
      		if (this.options.wrap === true) { 
      			prev = this.panes.length - 1;
      		} else { 
      			return;
      		}
    	}
    
    	this.changeTo(this.panes[prev]);
  	},
  
   	// to go to the last tab
  	last: function() {
    	this.changeTo(this.panes[this.panes.length-1]);
  	},
  
  	// call this if the width of the sliding tabs container changes to get everything in line again
	recalcWidths: function() {
// 	  	alert('dsa')
 		//	kazdemu slidu nastavime sirku podla vonkajsieho containeru
    	this.panes.each(function(pane, index) {
      		pane.setStyle('width', this.outerSlidesBox.offsetWidth.toInt() - this.options.rightOversized + 'px');
    	}.bind(this));
    
    	
    	//	vnutornemu containeru nastavime sirku ako pocet slidov * sirka vonk.containeru
    	//	tu ked nastavim sirku tak to v IE6 nejde.. je zobrazena cela sirka boxu
//    	this.innerSlidesBox.setStyle('width', (this.outerSlidesBox.offsetWidth.toInt() * this.panes.length) + 'px');
    	
		// IE6 bug.. ked nastavim sirku vnutorneho boxu, tak sa automaticky roztiahne vonkajsi..treba to takto obist..
		var tmpW = this.outerSlidesBox.offsetWidth.toInt();
    	this.innerSlidesBox.setStyle('width', (this.outerSlidesBox.offsetWidth.toInt() * this.panes.length));
    	this.outerSlidesBox.setStyle('width', tmpW);

//    	alert(this.outerSlidesBox.offsetWidth.toInt())

//    	this.outerSlidesBox.setStyle('overflow', 'auto');
//    	this.innerSlidesBox.setStyle('overflow', 'hidden');
//    	this.innerSlidesBox.setStyle('float', 'none');

    	// ak nie sme na 1.slide, tak sa presunieme..
    	if (this.current > 0) {
      		this.fx.cancel();
      		this.outerSlidesBox.scrollTo(this.current * this.outerSlidesBox.offsetWidth.toInt(), 0);
    	}
  	}
});

//SlidingTabs.implement(new Options(), new Events());