/* background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.21, rgb(7,200,54)),
    color-stop(0.64, rgb(20,125,43)),
    color-stop(0.91, rgb(17,92,37)),
    color-stop(1, rgb(13,64,25))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(7,200,54) 21%,
    rgb(20,125,43) 64%,
    rgb(17,92,37) 91%,
    rgb(13,64,25) 100%
); */



function GradientStop(r, g, b,stop) {
    this.r = r;
    this.g = g;
    this.b = b;
    this.stop = stop;
    this.constructForMozilla = function(){
        return "rgb(" + r + "," + g + "," + b + ") " + stop + "%";
    }
    this.constructForWebKit = function(){
        return "color-stop(" + stop/100 + ", rgb(" + r + "," + g + "," + b + "))";
    }
}
function TabGrouping(width,height) {
    this.rootElement = $("<div></div>");
    this._gradientStart = "";
    this._gradientStop = "";
    this.Tabs = new Array();
    this.Gradient = function (start, stop) {
        this._gradientStart = start;
        this._gradientStop = stop;
        return this;
    }
    this.Add = function (tab) {
        this.Tabs.push(tab);
    }
    this.AddGroup = function () {
        var that = this;
        $.each(arguments, function (i, v) {
            var tab = new Tab(v);
            that.Add(tab);
        });
    }
    this.Height = height;
    this.Width = width;
    this.Render = function () {
        var that = this;
        $.each(this.Tabs, function (i, v) {
            var gradient = new Gradient();
            var count = that.Tabs.length;
            var perc = 100 / count;
            var _tab = v.Render(perc - 0.32 + "%", that.Height);
            $(_tab).css("borderRight", "1px solid white");
            gradient.ApplyBasic(_tab, that._gradientStart, that._gradientStop);
            $(that.rootElement).append(_tab);
        });
        return that.rootElement;
    }

}
function Tab(text) {
    this.rootElement = $("<div style='float:left'>" + text + "</div>");
    this.Background = function (start, stop) {
        var gradient = new Gradient();
        gradient.ApplyBasic(this.rootElement, start, stop);
        return this;
    }
    this.Css = function (css, value) {
        var element = this.rootElement;
        $(element).css(css, value);
        return this;
    }
    this.Render = function (width, height) {
        var element = this.rootElement;
        $(element).css("width", width);
        $(element).css("height", height);
        return $(element);
    }

}
function Gradient() {
    this._stops = new Array();
    this.Stop = function (r, g, b, stop) {
        var stop = new GradientStop(r, g, b, stop);
        this._stops.push(stop);
        return this;
    }
    this.BasicWebKit = function (start, stop) {
        var that = this;
        var _start = "-webkit-gradient(   linear, left bottom, left top,";
        _start += start + "," + stop + ");";
        return _start;
    }
    this.BasicMozilla = function (start, stop) {
        var that = this;
        var _start = "-moz-linear-gradient( top,";
        _start += start + "," + stop + ");";
        return _start;
    }
    this.BasicOpera = function (start, stop) {
        return "-o-linear-gradient(top," + start + "," + stop + ");";
    }
    this.ApplyBasic = function (selector, start, stop) {
        var that = this;
        var style = $(selector).attr("style");
        if (style == undefined) { style = ""; } else { style = style + ";"; }
        $(selector).attr("style", style + "background-image: " + that.BasicMozilla(start,stop) + "background-image:" + that.BasicWebKit(start,stop) + "background-image:" + that.BasicOpera(start,stop));
    }
    this.Apply = function (selector) {
        var that = this;
        var style = $(selector).attr("style");
        $(selector).attr("style", "color:blue");
        if (style == undefined) { style = ""; } else { style = style + ";"; }
        $(selector).attr("style", style + "background-image: " + that.constructForMozilla() + "background-image:" + that.constructForWebKit());
        return this;
    }
    this.constructForMozilla = function () {
        var that = this;
        var _start = "-moz-linear-gradient(   linear, left bottom, left top,";
        var _end = " );";
        var stops = "";
        for (var i = 0, len = that._stops.length; i < len; i++) {
            stops += that._stops[i].constructForMozilla() + ",";
        }
        stops = new String(stops).substring(0, stops.length - 1);
        alert(_start + stops + _end);
        return _start + stops + _end;
    }
    this.constructForWebKit = function () {
        var that = this;
        var _start = "-webkit-gradient( center bottom, ";
        var _end = " );";
        var stops = "";
        for (var i = 0, len = that._stops.length; i < len; i++) {
            stops += that._stops[i].constructForWebKit() + ",";
        }
        stops = new String(stops).substring(0, stops.length - 1);
        alert(_start + stops + _end);
        return _start + stops + _end;
    }
  
}