var AxTabs = Class.create();

AxTabs.prototype = {
	initialize : function() {	  	
		/* Create de div loading layer 
		  <div id="axt_loading" style="position:absolute;">
		    <div id="loading_container" style="position:relative;">
		      <div id="loading_background" style="opacity:.5"></div>
		      <div id="loading_text">Loading..</div>
		    </div>
		  </div>
		*/
		var objBody = document.getElementsByTagName("body").item(0);
    var objLoading = document.createElement("div");
		objLoading.setAttribute('id','axt_loading');
		objLoading.className = "loading";
		objBody.appendChild(objLoading);
		
		var objLoadingContainer = document.createElement("div");
		objLoadingContainer.setAttribute('id','loading_container');
		objLoadingContainer.className = "loading_container";
		objLoading.appendChild(objLoadingContainer);
		
		var objLoadingBackground = document.createElement("div");
		objLoadingBackground.setAttribute('id','loading_background');
		objLoadingBackground.className = "loading_background";
		objLoadingContainer.appendChild(objLoadingBackground);
		
		var objLoadingText = document.createElement("div");
		objLoadingText.setAttribute('id','loading_text');
		objLoadingText.className = "loading_text";
		objLoadingContainer.appendChild(objLoadingText);
		
		
		this.file = null;
		this.tabs = $$('a[rel="tabs"]');
		this.tabs.each(this.setupTab.bind(this));		
		this.show(this.getInitialTab());
				
  },
  setupTab : function(elm){
    Event.observe(elm,'click',this.setFile.bindAsEventListener(this),false);
  },
  setFile : function(ev){
    var elm = Event.element(ev);
    Event.stop(ev);
    //this.file = $(elm).href;
    this.show($(elm));    
    //this.debug($(elm).href+"<br />");
  },
  show : function(elm){
    if(this.isString(elm))
      this.file = elm;
    else if(this.isObject(elm))
    {
      this.file = elm.href.replace('http://www.medioyforma.info/mayte/', '');
      this.file = this.file.replace('http://www.medioyforma.info/mayte/', '');
    }
    
    this.tabs.without(elm).each(this.deActivate.bind(this));  
    elm.addClassName('active-tab');
    if($('tab3c').getHeight() > 0)
    {
      if(activeContent != null || activeContent != undefined)
        activeContent = null;
      new Effect.BlindUp('tab3c', {afterFinish:function(){$('tab3_content').innerHTML = "";}});      
    }
    this.showTop();
    this.showMid();
  },
  deActivate : function(elm) {
		$(elm).removeClassName('active-tab');
	},
  showTop : function() {
    //$('debug').innerHTML = file.replace(ext, ext+'_middle');
    new Effect.Opacity($('tab1_content'), {duration:0.3, from:1, to:0});
  	var url = 'process.php';
  	var rand = Math.random(9999);
  	var pars = 'rand=' + rand + '&file=' + this.file;
  	var aj = new Ajax.Request( url, {method: 'get', parameters: pars, 
    	                                 onLoading: this.loading.bind(this), 
    	                                 onComplete:this.showContentTop.bind(this)});
  },
  showMid : function() {
    new Effect.Opacity($('tab2_content'), {duration:0.3, from:1, to:0});
    
    var f = this.file.split("/");
    var lf = f[f.length-1];
    var lastf = lf.split(".");
    var ext = lastf[lastf.length-2];
    file = this.file.replace(lf, ext+'_middle.'+lastf[lastf.length-1]);
    
  	var url = 'process.php';
  	var rand = Math.random(9999);
  	var pars = 'rand=' + rand + '&file=' + file;
  	var aj = new Ajax.Request( url, {method: 'get', parameters: pars, 
    	                                 onLoading: this.loading.bind(this), 
    	                                 onComplete:this.showContentMid.bind(this)});
  },
  showContentTop : function(originalRequest){
    this.showResponse(originalRequest, 'tab1_content');
  },
  showContentMid : function(originalRequest){
    this.showResponse(originalRequest, 'tab2_content');
  },
  showResponse : function(originalRequest, content_id) {
  	var newData = originalRequest.responseText;  	                                        	
    $(content_id).innerHTML = newData;
    $(content_id).setStyle({display:'block'});
    new Effect.Opacity($(content_id), {duration:0.5, from:0, to:1, afterFinish:this.getObjects.bind(this)});
    new Effect.Opacity($('axt_loading'), {duration:0.5, from:1, to:0, afterFinish:function(){$('axt_loading').setStyle({display:'none'});}});
  },
  getInitialTab : function(){
    return this.tabs.first();
  },
  loading : function(){        
    $('loading_text').innerHTML = 'Loading...';
    $('axt_loading').setStyle({width: '150px',height: '30px'});
    
    var objTop = (document.body.clientHeight - $('axt_loading').offsetHeight) / 2;
    var objLeft = (document.body.clientWidth - $('axt_loading').offsetWidth) / 2;        
        
    $('axt_loading').setStyle({
        left: (objLeft+document.body.scrollLeft)+'px', 
        top:  (objTop+document.body.scrollTop)+'px',
        width: '150px', height: '30px', 
        display:'block'});
               
    new Effect.Opacity('axt_loading', { duration: 0.5, from: 0.0, to: 1 });
  },
  isObject : function(a) {
    return (a && typeof a == 'object') || this.isFunction(a);
  },  
  isString : function(a) {
    return typeof a == 'string';
  },
  isFunction : function(a) {
    return typeof a == 'function';
  },
  getFlash : function(){
    var divs = document.getElementsByTagName('div');
    for(var i=0; i < divs.length; i++)
    {
      if(divs[i].id.indexOf('SWF') != -1)
      {
        var att = $(divs[i].id).readAttribute('widget').split(",");
        this.setFlash(divs[i].id, att[0], att[1], att[2], att[3])
      }
    }
  },
  setFlash : function(elm, swf, w, h, version)
  {
    var fname = swf.split("/");
    fname = fname[fname.length -1].split(".");
    
    var fo = new SWFObject(swf, fname[0], w, h, version, "#FFFFFF");
		fo.addParam("wmode", "transparent");
		fo.addParam("menu", "false");
		fo.addParam("quality", "high");
		fo.write(elm);
  },
	getJScript : function()
	{
		var scripts = $$('div.JScript');
		for(var i=0; i < scripts.length; i++)
			eval(scripts[i].innerHTML);
	},
	getObjects : function()
	{
		this.getFlash();
		this.getJScript();
	},
  debug : function(content)
  {
    if($('debug') == undefined)
    {
      var objBody = document.getElementsByTagName("body").item(0);
		
  		var objDebug = document.createElement("div");
  		objDebug.setAttribute('id','debug');
  		objDebug.style.position = 'absolute';
  		objDebug.style.top = '100px';
  		objDebug.style.left = '20px';
  		objDebug.style.width = '200px';
  		objBody.appendChild(objDebug);
    }    
    $('debug').innerHTML += content;
  }  
};



/* axContent */
var AxContent = Class.create();

AxContent.prototype = {
  initialize : function(container, root){
    this.container = container;
    this.root = root;
    this.file = null;
  },
  show : function(file) {
    this.file = file;
    this.loading();
    if($(this.root).getHeight() > 0)
    {
      new Effect.BlindUp(this.root, {afterFinish:this._show.bind(this)});
    }
    else
    {
    	this._show();
    }
  },
  _show : function(){
    var url = 'process.php';
  	var rand = Math.random(9999);
  	var pars = 'rand=' + rand + '&file=' + this.file;
  	var aj = new Ajax.Request( url, {method: 'get', parameters: pars, onComplete:this.showResponse.bind(this)});
  },
  showResponse : function(originalRequest) {
  	var newData = originalRequest.responseText;                                        	
    $(this.container).innerHTML = newData;
    var c = this.container;
    new Effect.BlindDown(this.root);
    new Effect.Opacity($(this.root), {duration:0.5, from:0, to:1, afterFinish:function(){new Effect.ScrollTo(c);}});
    new Effect.Opacity($('axt_loading'), {duration:0.5, from:1, to:0, afterFinish:function(){$('axt_loading').setStyle({display:'none'});}});
    //new Effect.ScrollTo(this.container);
  },	
  loading : function()
  {        
    $('loading_text').innerHTML = 'Loading...';        
    $('axt_loading').setStyle({display:'block'});
               
    new Effect.Opacity('axt_loading', { duration: 0.5, from: 0.0, to: 1 });
  }
  
};


var AxForm = Class.create();
AxForm.prototype = {
	initialize : function(formID, updateID, required){
	  this.required = required;
		this.form = formID;
		this.data = $(formID).serialize();
		this.action = $(formID).action;
		this.updateElement = $(updateID);
		this.html = this.updateElement.innerHTML.replace('<strong><span style="color: red; font-size: 11px;">There are required fields, please fill al fields before to send</span></strong>', '');
		//$('debug').innerHTML = "Data: "+this.data + "<br>Action: "+this.action;
	},
	send : function(){	  
		if(this.getRequired(this.required))
		{
		  var aj = new Ajax.Updater(this.updateElement, this.action, {method: 'post', parameters: this.data, onComplete:this.showResponse.bind(this)});
		  this.disableElements();		
		}
		else
		  this.updateElement.innerHTML = "<strong><span style=\"color:red; font-size:11px;\">There are required fields, please fill al fields before to send</span></strong>" + this.html;
	},
	showResponse : function(){
		new Effect.Opacity(this.updateElement, {from: 0, to: 1});
	},
	disableElements : function(){
		var f = $(this.form);
		var inputs = f.getElements();
		for(var i=0; i < inputs.length; i++)
			this.disableElement(inputs[i]);
		//inputs.each(this.disableElement.bind(this));		
	},
	disableElement : function(elm){
		elm.readOnly = true;
		elm.setStyle({opacity:'0.5', filter:'alpha(opacity=50)'});
		//new Effect.Opacity(elm, {from: 1, to: 0.5});
		
	},
	getRequired : function(req)
	{	  
	  var f = $(this.form);
	  //alert(typeof(req[0]) + " : Value: " + f.elements[req[0]].value);
	  if(req != undefined && req)
	  {
	    for(var i=0; i < req.length; i++)
	    {
	      if(f.elements[req[i]].value == undefined || f.elements[req[i]].value == "")
	        return false;
	    }
	  }
	  return true;
	}
}



var activeContent = null;
var tab3 = new AxContent('tab3_content', 'tab3c');
function show(content)
{
  if(activeContent != content)
  {    
    tab3.show(content);
    activeContent = content;
  }
}


function sendForm(formID, updateID, requiredElem)
{  
  var req = requiredElem.split(",");
	var f = new AxForm(formID, updateID, req);
	f.send();
}


function updateTopMid(tpage, mpage)
{
  var ctop = "tab1_content";
  var cmid = "tab2_content";
  var params1 = "file="+tpage;
  var params2 = "file="+mpage;
  
  tab3.loading();
  new Effect.BlindUp('tab3c', {afterFinish:function(){$('tab3_content').innerHTML = "";}});      
  
  new Effect.Opacity(ctop, { duration: 0.5, from: 1, to: 0, afterFinish:function(){
      new Ajax.Updater(ctop, "process.php", {method: 'get', parameters: params1, onComplete:function(){
          new Effect.Opacity(ctop, {duration: 0.5, from:0, to:1})
        }});
    }});
    
  new Effect.Opacity(cmid, { duration: 0.5, from: 1, to: 0, afterFinish:function(){
      new Ajax.Updater(cmid, "process.php", {method: 'get', parameters: params2, onComplete:function(){
          new Effect.Opacity(cmid, {duration: 0.5, from:0, to:1});
          new Effect.Opacity($('axt_loading'), {duration:0.5, from:1, to:0, afterFinish:function(){$('axt_loading').setStyle({display:'none'});}});
        }});
    }});      
}

var buttons = new Array();
function showSubItem(showObj, hideObj)
{
  var ho = hideObj.split(",");
  for(var i=0; i < ho.length; i++)
  {
    if(buttons[ho[i]] == undefined || !buttons[ho[i]])
      buttons[ho[i]] = $(ho[i]).innerHTML;
      
    if( Element.getOpacity( ho[i] ) > 0)
    {
      var el = ho[i];
      $(el).style.zIndex = 1;
      $(el).style.display = 'none';
      new Effect.Opacity(el, {duration: 0.5, from:Element.getOpacity(el), to:0, afterFinish:function(){$(el).innerHTML='';}});      
    }
  }
  if(buttons[showObj])
    $(showObj).innerHTML = buttons[showObj];
    
  $(showObj).style.display = 'block';
  $(showObj).style.zIndex = 50;
  new Effect.Opacity(showObj, {duration: 0.5, from:0, to:1});
}


function subasta(p)
{
	$('Producto').value = p;
	new Effect.ScrollTo('form_contact', {afterFinish:function(){$('Producto').focus();}});
}

var axt;
Event.observe(window,'load',function(){ axt = new AxTabs();},false);