var IMG_PATH = '/_site/images/js/';

var hara = {
	load: function(module, options, callback) {
	  module = module.split(':');
		new Ajax.Request('/ajax.php?module='+module[0]+'&method='+module[1]+'&id=&params='+(options?'&'+Object.toQueryString(options):''), {
			method: 'get',
			onSuccess: function(transport) {
				var json = transport.responseText.evalJSON();
				callback(json);
    	}
  	});
	}
};

Event.observe(window, 'load', function() {
	cleanOldScripts();
	
	$$('ul.tabs').each(function(ul){new tabbox(ul)});
	$$('a.vergleich').each(frm_vergleich);
	$$('table.vergleich').each(function(tbl){new wizzard(tbl)});
});

function cleanOldScripts() {
	var emptyFunction = function(){};
	if (typeof(tabOn) == 'function') { // portrait.js
	  tabOn = tabOff = emptyFunction;
	}
}

function frm_vergleich(a) {
	$(a).observe('click',function(e){
		e.stop();
		frm = this.up('form');
		if (frm.companyOne)
		  self.location.href = frm.base.value+'/'+frm.companyOne.value+'/'+frm.companyTwo.value;
    else if (frm.productOne) {
      while (!frm.productOne.value)	frm.productOne.selectedIndex++
      while (!frm.productTwo.value)	frm.productTwo.selectedIndex++
		  self.location.href = frm.base.value+'/'+frm.productOne.value+'/'+frm.productTwo.value;
		}
	}.bindAsEventListener($(a)));
}

var tabboxes = {};

function buildTabs(container, id, tabs) {
	var tab_container = new Element('div',{'class':'tab-container'});
	var ul = new Element('ul',{'class':'tabs'});
	container = $(container).insert(tab_container.insert(ul));
	
	for (var tab_id in tabs) {
		ul.insert(new Element('li',Object.extend({id:id+'-lft-'+tab_id,'class':'lft'},tabs[tab_id].attr||{})).update(tabs[tab_id].name))
		  .insert(new Element('li',{id:id+'-rgt-'+tab_id,'class':'rgt'}));
    container.insert(new Element('div',{id:id+'-box-'+tab_id,'class':'tab-box',style:'display:none'}).insert(tabs[tab_id].content));
	}

	return new tabbox(ul);
}

var tabbox = Class.create({
	ul: null,
	id:'',
	selected: '',
	list: [],

	initialize: function(ul) {
	  this.ul = $(ul);
		var entries = $(ul).select('li');
		var first_id = entries[0].id.split('-');

		this.id = first_id[0];
		this.selected = first_id[2];
		this.list = [];

		for (var i=0, ln = entries.length; i < ln; i+=2) {
			var tab_id = entries[i].id.split('-')[2];
			if (entries[i].hasClassName('lft-on'))
			  this.selected = tab_id;
			  
			entries[i].observe('click',this.select.bindAsEventListener(this,tab_id));
			entries[i+1].observe('click',this.select.bindAsEventListener(this,tab_id));
			this.list.push(tab_id);
		}
		
		this.select(this.selected);
		tabboxes[this.id] = this;
		
		return this;
	},
	
	select: function(e, tab_id) {
	  if (!tab_id)
	    tab_id = e;
		else e.stop();

		$(this.id+'-box-'+this.selected).hide();
		$(this.id+'-lft-'+this.selected).removeClassName('lft-on').addClassName('lft');
		$(this.id+'-rgt-'+this.selected).removeClassName('rgt-on').addClassName('rgt');
		this.selected = tab_id;
		$(this.id+'-box-'+this.selected).setStyle({display:'block'});
		$(this.id+'-lft-'+this.selected).removeClassName('lft').addClassName('lft-on');
		$(this.id+'-rgt-'+this.selected).removeClassName('rgt').addClassName('rgt-on');
	},
	
	remove: function(tab_id) {
		if (tab_id == this.selected) {
      var li = this.ul.select('li');
      for (var i=0,ln=li.length;i<ln;i++) {
				if (li[i].id.split('-')[2] != tab_id) {
				  this.select(li[i].id.split('-')[2]);
				  break;
				}
			}
		}
		
		$(this.id+'-lft-'+tab_id).remove();
		$(this.id+'-rgt-'+tab_id).remove();
		$(this.id+'-box-'+tab_id).remove();
	},

	insert: function(pos, tab_id, name, content, attr) {
		var li1 = new Element('li',Object.extend({id:this.id+'-lft-'+tab_id,'class':'lft'},attr||{})).update(name)
			.observe('click',this.select.bindAsEventListener(this,tab_id));
	  var li2 = new Element('li',{id:this.id+'-rgt-'+tab_id,'class':'rgt'})
			.observe('click',this.select.bindAsEventListener(this,tab_id));
	  
	  var li_before = this.ul.down('li',pos*2);
	  if (li_before)
	    li_before.insert({before:li1}).insert({before:li2});
		else this.ul.insert(li1).insert(li2);

		this.ul.up('div').insert({after:new Element('div',{id:this.id+'-box-'+tab_id,'class':'tab-box',style:'display:none'}).insert(content)});
	}
});

var wizzard = Class.create({
	width: 488,
	
	step: 0,
	config: {},
	timer: null,
	dis_node: null,
	step_container: null,
	scroll_container: null,
	
	initialize: function(tbl) {
	  this.step = 1;
	  this.step_container = $(tbl).down('div.steps');
	  this.scroll_container = this.step_container.up('div');
	  $(tbl).select('div.buttonSArrowRgt a')[0].observe('click', this.step2.bindAsEventListener(this));

	  this.dis_node = new Element('div',{style:'position:relative;display:none'}).insert(
			new Element('div', {style:'position:absolute;width:488px;height:65px;background-image:url('+IMG_PATH+'wizzard_disable.gif)'})
		).insert(
			new Element('div', {style:'position:absolute;width:488px;height:65px;background:url('+IMG_PATH+'wizzard_loader.gif) no-repeat center center'})
		);
	  this.scroll_container.up().insert({top:this.dis_node});
	},
	step2: function(e) {
    e.stop();
    this.dis_node.show();
    
    var frm = this.step_container.down('div.step1').down('form');
    var step = this.step_container.down('div.step1').cloneNode(true);
    var config = frm.config.value.split('|');
    this.config = {
			c1:config[1],
			c2:config[2],
			pvQueryId:frm.select.value
		};
    
    step.removeClassName('step1').addClassName('step2');
    step.down('td').update(config[3]);

		var sel = step.down('td',1).down('select').update();
		for (var i=0, types=config[0].split(','), ln=types.length; i<ln; i++)
		  sel.insert(new Element('option',{value:types[i]}).update(types[i].capitalize()));
		  
    step.select('div.buttonSArrowRgt a')[0].observe('click', this.step3.bindAsEventListener(this));
		  
    this.step_container.insert(step);
		this.scroll((this.step-1)*this.width, this.step*this.width);
		this.step++;
	},
	step3: function(e) {
		e.stop();
		this.dis_node.show();
		
		var v = this.step_container.down('div.step2').down('form').select.value;
		hara.load('cb_vergleiche:ajax',Object.extend(this.config,{v:v}),this.step4.bind(this));
	},
	step4: function(html) {
		var step = this.step_container.down('div.step1').cloneNode(false);
		step.insert(html);
    this.step_container.insert(step);
    frm_vergleich(step.down('a.vergleich'));
		this.scroll((this.step-1)*this.width, this.step*this.width);
	},
	scroll: function(current, to) {
	  window.clearTimeout(this.timer);
	  if (current < to) {
      current += 8;
      this.scroll_container.scrollLeft = current;
      this.timer = window.setTimeout(this.scroll.bind(this, current, to), 5);
		} else {
      this.scroll_container.scrollLeft = to;
      this.dis_node.hide();
		}
	}
});