if(!FX) var FX = {};
if(!FX.utils) FX.utils = {};

FX.utils.Carousel = function(){
    this.id = "";           // Carousel id
    this.type = "";         // Carousel type
    this.activeCols = 0;    // How many cols to show
    this.slideCols = 1;     // How many cols to slide
    this.colsWidth = 0;     // Col width, will be overridden later by te object
    this.animTime = 500;    // Animation duration
    this.colsCount = 0;     // Initial Cols count, will be overridden later by te object
    this.prev = 0;          // Initializing prev in nav to 0;
    this.next = 0;          // Initializing next in nav, will be overridden later by te object;
    this.leftPos = 0;       // Initializing Carousel left position to 0;
    this.marginsAndPaddings = 0;
    this.dropdownAction = "";
    this.animateCallback = null;
	this.loadCallback = null;
	

    this.init = function(carousel) {
        var _this = this;
        this.id = typeof carousel.id != "undefined" ? carousel.id: this.id;
        this.type = typeof carousel.type != "undefined" ? carousel.type: this.type;
        this.activeCols = typeof carousel.activeCols != "undefined" ? carousel.activeCols: this.activeCols;
        this.slideCols = typeof carousel.slideCols != "undefined" ? carousel.slideCols: this.slideCols;
        this.colsWidth = typeof carousel.colsWidth != "undefined" ? carousel.colsWidth: this.colsWidth;
        this.animTime = typeof carousel.animTime != "undefined" ? carousel.animTime: this.animTime;
        this.dropdownAction = typeof carousel.dropdownAction != "undefined" ? carousel.dropdownAction: this.dropdownAction;
        this.animateCallback = typeof carousel.animateCallback != "undefined" ? carousel.animateCallback: this.animateCallback;
		this.loadCallback = typeof carousel.loadCallback != "undefined" ? carousel.loadCallback: this.loadCallback;

        switch (_this.type) {
            case "table":
                //getting number of cols in table
                _this.colsCount = $("#" + _this.id).find("tr:first").children().length;
                break;
            case "ul":
            case "div":
                _this.colsCount = $("#" + _this.id).children().length;
                break;
            default:
        }

        // calling carousel wrapper
        this.wrapCarousel();
        // calling carousel navigation
        this.nav({
            prev: 0,
            next: _this.activeCols
        });
    }
    
    this.wrapCarousel = function() {
        var _this = this;
        // creating a wrapper with overflow : hidden to show only the number of selected cols
        $("#" + _this.id).before($("<div id=\"" + _this.id + "-wrapper\" class=\"carouselContent\"></div>").css({ "overflow": "hidden", "position": "relative", "z-index": "2"}));
        switch (_this.type) {
            case "table":
            	var marginsAndPaddings = FX.utils.getMarginsAndPaddings($("#" + _this.id).find("tr:first").children().first());
            	if(! isNaN(marginsAndPaddings)) {
            		_this.marginsAndPaddings = marginsAndPaddings;
            	}
                // resizing first row's cols width based on carousel.colsWidth, on tabular information the following lines will follow the same width
                _this.colsWidth = _this.colsWidth == 0 ? $("#" + _this.id).find("tr:first").children().first().width() : _this.colsWidth;
                $("#" + _this.id).find("tr:first").children().width(_this.colsWidth);
                break;
            case "ul":
            case "div":
            	var marginsAndPaddings = FX.utils.getMarginsAndPaddings($("#" + _this.id).children().first());
            	if(! isNaN(marginsAndPaddings)) {
            		_this.marginsAndPaddings = marginsAndPaddings;
            	}
            	_this.colsWidth = _this.colsWidth == 0 ? $("#" + _this.id).children().first().width() : _this.colsWidth;
                $("#" + _this.id).css({"overflow": "hidden"}).children().css({"width": _this.colsWidth + "px", "float": "left"});
                break;
            default:
        }

        // appending the carousel to the wrapper and making sure it's full with
        $("#" + _this.id + "-wrapper").css({"width": ( _this.colsWidth + _this.marginsAndPaddings ) * _this.activeCols}).append($("#" + _this.id).css({ "width": (_this.colsWidth + _this.marginsAndPaddings) * _this.colsCount , "position": "relative" }));

		if(this.loadCallback){
            this.loadCallback(this.id, this.colsWidth, this.animTime, this.activeCols);
        }
    }

    this.nav = function(nav) {
        var _this = this;
        this.prev = typeof nav.prev != "undefined" ? nav.prev: this.prev;
        this.next = typeof nav.next != "undefined" ? nav.next: this.next;
        $("." + _this.id + "-nav").find("a[rel=\"prev\"]").attr("href", "#" + _this.prev);
        $("." + _this.id + "-nav").find("a[rel=\"next\"]").attr("href", "#" + _this.next);

        $("." + _this.id + "-nav").change(function() {
            if($(this).hasClass("chiclets")){   // if chicklets
                var selected = $(this).find("option:selected");
                var optGroupOffset = selected.parents('optgroup').prevUntil('select').children('option').length;
                _this.leftPos = -((selected.index() + optGroupOffset) * (_this.colsWidth + _this.marginsAndPaddings));
            }
            // animating carousel
            _this.slideCarousel({fade: true, clickedNav: $(this)});
        });

        // change nave arrows state
        _this.navAvailability();

        /***** Main comparison Carousel *****/
        $("#comparisonCarouselMainNav a:eq(" + 0 + ")").addClass("hover");
        /***** End Main comparison Carousel *****/
        
        $("." + _this.id + "-nav a").die("click").live("click", function(e) {
            e.preventDefault();
            var navClicked = $(this);

            if($(this).parent().hasClass("chiclets")){// if chicklets

                var index = $(this).index();
                var items = $('#comparisonCarousel>div');
                // items.css({'visibility':'hidden'});
                items.eq(index).css({'visibility':'visible'});

                $(this).addClass("hover").siblings().removeClass("hover");
                _this.leftPos = -($(this).index() * (_this.colsWidth + _this.marginsAndPaddings));
            }else{
                // if prev | next
                // getting the requested col
                var colNum = eval($(navClicked).attr("href").split("#")[1]);

                if($(navClicked).attr("rel") == "next" && colNum < _this.colsCount){    // making sure not to change the leftPos if it's the end of the carousel
                    _this.next = ((colNum + _this.slideCols > _this.colsCount) ? _this.colsCount : colNum + _this.slideCols);
                    _this.leftPos = -((_this.next - _this.activeCols) * (_this.colsWidth + _this.marginsAndPaddings));
                    _this.prev = _this.next - _this.activeCols;
                }else if($(navClicked).attr("rel") == "prev" && colNum > 0){            // making sure not to change the leftPos if it's the beginning of the carousel
                    _this.prev = (colNum > _this.slideCols ? colNum - _this.slideCols : 0);
                    _this.leftPos = -(_this.prev * (_this.colsWidth + _this.marginsAndPaddings));
                    _this.next = _this.prev + _this.activeCols;
                }

                // reassigning values to navigation.
                $("." + _this.id + "-nav a[rel=\"next\"]").attr("href", "#" + _this.next);
                $("." + _this.id + "-nav a[rel=\"prev\"]").attr("href", "#" + _this.prev);
                
                // change nave arrows state
                _this.navAvailability();
            }

            // animating carousel
            _this.slideCarousel();
        });
    }
    
    this.navAvailability = function() {
        if(this.next == this.colsCount){
            $("." + this.id + "-nav a[rel=\"next\"]").addClass("edge");
        }else{
            $("." + this.id + "-nav a[rel=\"next\"]").removeClass("edge");
        }
                
        if(this.prev == 0){
            $("." + this.id + "-nav a[rel=\"prev\"]").addClass("edge");
        }else{
            $("." + this.id + "-nav a[rel=\"prev\"]").removeClass("edge");
        }
    }
    
    this.slideCarousel = function(action) {
        var _this = this, actionSpeed = _this.animTime;
        if(typeof action != "undefined"){
            // on update pagination we're fading the content in and out
            if(action.update){
                $("#" + _this.id).css("opacity", 0);
                actionSpeed = action.speed;
            }
            if(action.fade){
                $("#" + _this.id).fadeOut();
            }
        }
        
        if(this.animateCallback){
            this.animateCallback(_this.leftPos);
        }

        // animating carousel
        $("#" + _this.id).animate({
                left: _this.leftPos
            }, _this.animTime, function() {
            // Animation complete 
            // on update pagination we're fading the content in and out
            $("#" + _this.id).animate({
                opacity: 1
            }, actionSpeed, function() {
                // Animation complete 
                if(_this.dropdownAction != ""){
                    if(typeof action.clickedNav != "undefined"){
                        _this.dropdownAction(action.clickedNav, function(){ $("#" + _this.id).fadeIn(); });
                    }
                }else{
                    $("#" + _this.id).fadeIn();
                }
            });
        });
    }

    this.update = function() {
        var _this = this;
        // calling carousel wrapper
        this.wrapCarousel();

        // calling carousel navigation
        this.nav({
            prev: _this.prev,
            next: _this.next
        });

        // animating carousel
        _this.slideCarousel({update: true, speed: 250});
    }
}

FX.utils.getMarginsAndPaddings = function(obj){
    return parseInt($(obj).css("margin-left")) + parseInt($(obj).css("margin-right")) + parseInt($(obj).css("padding-left")) + parseInt($(obj).css("padding-right"));
}

$(window).load(function() {
   $('.va').vAlign();
});