
//########################################################
var cmsJsTabs = new Class({
    
    //########################################################
    initialize: function(outerElement) {
	this.outerElement = outerElement;
	this.slideBox = outerElement.getElement("div.cmsJsTabs");
	this.slideBox.setStyle('height', 70);

	crOptions = new Hash();
	crOptions.set('transitionTime', 1000);
	crOptions.set('pad', 5);
	var opts = this.slideBox.getProperty('crOpts');
	if (opts) {
	    opts.split(',').each(function(item) { 
		var kv = item.split(':');
		crOptions.set(kv[0], kv[1]);
	    });
	}

	this.transitionTime = crOptions.get('transitionTime').toInt();
	this.padding = crOptions.get('pad').toInt();

	var tabClass = crOptions.get('tabClass');
	if (tabClass) this.slideBox.addClass(tabClass);

	this.initialTab = crOptions.get('showTab');
	if (this.initialTab) this.initialTab = this.initialTab.toInt();
	else this.initialTab = 0;
    },

    //########################################################
    setup: function() {
	var thisObj = this;

	this.outerElement.cmsJsTabs = this;

	this.innerBox = this.slideBox.getElement(".cmsJsTabs_inner");

	this.innerBox.setStyle("padding", this.padding+"px");

	this.elements = this.innerBox.getElements("div.cmsJsTabs_elem_outer");
	this.elements.each(function(elem) {
	    elem.setStyle('opacity', '0');
	    elem.setStyle("display", "");
            elem.setStyle("width", elem.getParent().getSize().x-(thisObj.padding*2)); 

	    if (elem.getElements("object,form,input,select,textarea").length) $(elem).isProblem = true;	    
	    thisObj.hideProblems(elem);
	});

	this.elementLinks = this.outerElement.getElements("div.cmsJsTabs_nav_tab_base");
	this.elementLinks.each(function(elem, index) {
	    var refreshEl = elem.getElement("div.cmsJsTabs_refresh");
	    refreshEl.addEvent("click", function() { thisObj.fetchContent(index); });

	    elem.addEvent("click", function() { thisObj.swapSlide(index); });
	    elem.addEvent("mouseenter", function(evt) { 
		if (elem.hasClass("cmsJsTabs_navActive")) return;
		elem.addClass("cmsJsTabs_navOver");

		var overEl = elem.getElement("div.cmsJsTabs_tabOver");
		if (overEl) {
		    elem.getElement("div.cmsJsTabs_tabUp").setStyle("display", "none");
		    overEl.setStyle("display", "");
		}
	    });
	    elem.addEvent("mouseleave", function(evt) { 
		if (elem.hasClass("cmsJsTabs_navActive")) return;
		elem.removeClass("cmsJsTabs_navOver");

		var overEl = elem.getElement("div.cmsJsTabs_tabOver");
		if (overEl) {
		    elem.getElement("div.cmsJsTabs_tabUp").setStyle("display", "");
		    overEl.setStyle("display", "none");
		}

	    });
	});

	this.currElem = -1;

	this.swapSlide(this.initialTab);
    },

    //########################################################
    setTabActive: function(slideNum, isOn) {
	var elem = this.elementLinks[slideNum];
	var upEl = elem.getElement("div.cmsJsTabs_tabUp")
	var overEl = elem.getElement("div.cmsJsTabs_tabOver");
	var onEl = elem.getElement("div.cmsJsTabs_tabOn");
	var refreshEl = elem.getElement("div.cmsJsTabs_refresh");

	elem.removeClass("cmsJsTabs_navOver");

	if (overEl) overEl.setStyle("display", "none");
	if (onEl) onEl.setStyle("display", "none");

	if (isOn) {
	    elem.addClass("cmsJsTabs_navActive");

	    upEl.setStyle("display", "none");
	    if (onEl) onEl.setStyle("display", "");
	    else if (overEl) overEl.setStyle("display", "");
	    else upEl.setStyle("display", "");

	    var contentUrl = elem.getProperty('crContent');
	    if (contentUrl) {
		refreshEl.setStyle("display", "");
	    }

	    return;
	}
	else {
	    upEl.setStyle("display", "");
	}

	elem.removeClass("cmsJsTabs_navActive");
	if (onEl) onEl.setStyle("display", "none");
	upEl.setStyle("display", "");
	refreshEl.setStyle("display", "none");
    },
    
    //########################################################
    showProblems: function(elem) {
	if (! elem.isProblem) return;
	elem.getElements(".cmsJsTabs_elem_innerBlock").each(function(problemElem) {
	    problemElem.removeClass('cmsJsTabs_hide_problems');
	});
    },

    //########################################################
    hideProblems: function(elem) {
	if (! elem.isProblem) return;
	elem.getElements(".cmsJsTabs_elem_innerBlock").each(function(problemElem) {
	    problemElem.addClass('cmsJsTabs_hide_problems');
	});
    },

    //########################################################
    fixCurrentSlideDimensions: function(newSlideNum) {
	    this.fixSlideDimensions(this.currElem);
    },

    //########################################################
    fixSlideDimensions: function(newSlideNum) {
        //Stop any existing transition
	if (this.transitionFx) this.transitionFx.cancel();

        var thisObj = this;
	var slideObj = this.elements[newSlideNum];
	var innerBlock = slideObj.getElement(".cmsJsTabs_elem_innerBlock");
	var inner = slideObj.getElement(".cmsJsTabs_elem_inner");
	var currSlide = this.elements[this.currElem];

	var oldHeight = this.slideBox.offsetHeight - 2;
        var newHeight = innerBlock.offsetHeight + (this.padding * 2);

	//Set all elements to absolute positioning for the swap.
	this.elements.each(function(elem) { elem.setStyle("position", "absolute"); } );

	var duration;
	if (oldHeight != newHeight) {
	    if (Math.abs(newHeight - oldHeight) <= 10) {
		//Would be too slow with such a small change.
		//this.slideBox.setStyle('height', newHeight);
		duration = 5;
	    }
	    else {
		duration = 500;
	    }

	    //Transition the height.
	    this.transitionFx = new Fx.Tween(this.slideBox, {duration:duration, transition:Fx.Transitions.Sine.easeInOut});
	    this.transitionFx.start('height', oldHeight, newHeight);
	    this.transitionFx.addEvent('complete', function() { 
					   //Set the now active slide to relative position and clear the hard-specified height so it will change with the content.
					   //thisObj.slideBox.setStyle("height", "auto"); 
					   thisObj.slideBox.height = "auto";
					   slideObj.setStyle("position", "relative");
					   slideObj.setStyle("display", "");
				       });
	}

	var slideWidth = this.slideBox.offsetWidth - (this.padding*2);
	if (innerBlock.offsetWidth && (innerBlock.offsetWidth < slideWidth)) slideWidth = innerBlock.offsetWidth;
	inner.setStyle('width', slideWidth);
    },

    //########################################################
    fetchContent: function(slideNum, newUrl) {
	    var thisObj = this;
	    var newSlideObj = this.elements[slideNum];
	    var currSlideObj = this.elements[this.currElem];
	    if (! currSlideObj) currSlideObj = newSlideObj;

	    var innerBlock = newSlideObj.getElement(".cmsJsTabs_elem_innerBlock");

	    if (newUrl) newSlideObj.setProperty('crContent', newUrl);

	    var contentUrl = newSlideObj.getProperty('crContent');
	    if (contentUrl) {
		var contentReq = new Request.HTML({ url: contentUrl, update: innerBlock, evalScripts: true, useAssets: true });
	    
		//Fix the height to what it currently is
		this.slideBox.setStyle("height", currSlideObj.offsetHeight+"px");
		innerBlock.set("html", "Fetching content...");

		contentReq.addEvent("success", function(responseText, responseXML) { 
		    thisObj.fixSlideDimensions(slideNum);
		    newSlideObj.store('contentFetched', true);
					
		    //Init any control links.
		    innerBlock.getElements("a.cmsJsTabs_controlLink, .cmsJsTabs_controlLink a").each(function(elem) {
		        elem.addEvent("click", function(evt) {
			    this.stopEvent(evt);
			    
			    var newSlideNum = this.getAttribute("cmsJsTabs_index");
			    if (! newSlideNum) newSlideNum = slideNum;
			    thisObj.swapSlide(newSlideNum, this.getAttribute("href"));
			});
		    });
		});
		contentReq.addEvent("failure", function() { 
                    innerBlock.set("html", "Could not load content");
		    thisObj.fixSlideDimensions(slideNum);
                });
		contentReq.send();
	    }
	    else {
		thisObj.fixSlideDimensions(slideNum);
	    }
    },

    //########################################################
    swapSlide: function(nextSlideNum, newUrl) {
	var thisObj = this;

	var currSlideNum = this.currElem;
	if (currSlideNum == nextSlideNum) {
	    if (newUrl) this.fetchContent(nextSlideNum, newUrl);
	    return;
	}

	var currSlide = this.elements[currSlideNum];
	var nextSlide = this.elements[nextSlideNum];
	
	var contentFetched = nextSlide.retrieve('contentFetched');
	if (newUrl || (! contentFetched)) this.fetchContent(nextSlideNum, newUrl);
	else this.fixSlideDimensions(nextSlideNum);

	var moveOpts = {duration:this.transitionTime, transition:Fx.Transitions.Back.easeInOut};

	if (currSlide) {
	    this.hideProblems(currSlide);
	    this.setTabActive(currSlideNum, false);
	    var myFx = new Fx.Tween(currSlide, moveOpts);
	    myFx.start('opacity', 1, 0);
	}
	
	var myFx = new Fx.Tween(nextSlide, moveOpts);
	myFx.addEvent('onComplete', function() { thisObj.showProblems(nextSlide); });
	myFx.start('opacity', 0, 1);

	var nextColor = nextSlide.getStyle("backgroundColor");
	if (nextColor == 'transparent') nextColor = null;
	var myFx = new Fx.Morph(this.slideBox, moveOpts);
	myFx.start({ backgroundColor: nextColor });

	this.setTabActive(nextSlideNum, true);
	
	this.currElem = nextSlideNum;
    }
    
});

//########################################################
$(window).addEvent('domready', function() { 
    $$(".cmsJsTabs_outer").each(function(elem) {
	var obj = new cmsJsTabs(elem);
	obj.setup();
    });
});
$(window).addEvent('domchanged', function(container) { 
    $$(".cmsJsTabs_outer").each(function(elem) {
        if (elem.cmsJsTabs) elem.cmsJsTabs.fixCurrentSlideDimensions();
    });

    container.getElements(".cmsJsTabs_outer").each(function(elem) {
	var obj = new cmsJsTabs(elem);
	obj.setup();
    });
});
