define(
    [
        'scripts/knockout-3.3.0','scripts/ACTComponent.js', 'scripts/CallWebObject.js',
        'scripts/ACTUtils', 'jqx/jqxbuttons', 'jqx/jqxlistbox', 'jqx/jqxdropdownlist',
        'jqx/jqxscrollbar', 'jqx/jqxtooltip', 'jqx/jqxtoolbar',
    ],
       function(ko, ACTComponent, InvokeCallback, ACTUtils) {

    function ToolbarComponentViewModel(params, element) {
        //********************************************************************************
        //---------------------------------INIT-------------------------------------------
        //******************************************************************************** 
        var _this = this;
        _this.base = new ACTComponent($(element), params);
        var $toolbar = $(element).find('#jqxToolbar');
        _this.tools = params.Model.Tools;
        _this.toolTypes = params.Model.ToolTypes;

        _this.createTooltip = function(element, content) {
            if (content && content !== "") {
                ACTUtils.CreateTooltip(element, content, false);
            }
        };

        $toolbar.jqxToolBar({height: 35, width:500, minimizeWidth:100, tools: _this.toolTypes,
                             initTools: function(type, index,  tool, menuToolInitialization){
                             }
                            });

        _this.base.onRefresh = function(obj) {
            _this.tools = obj.Tools;
            _this.toolTypes = obj.ToolTypes;

            //destroy toolbar
            while($toolbar.jqxToolBar('getTools').length > 0){
                $toolbar.jqxToolBar('destroyTool', 0);
            }

            //create toolbar
            for(var i = 0; i<_this.tools.length; i++){
                var currentTool = _this.tools[i];
                var toolType = currentTool.Type;
                var toolId = currentTool.ToolId;
                $toolbar.jqxToolBar("addTool", toolType, "last", currentTool.Separator, function(type, tool, menuToolInitialization){
                    switch(toolType){
                    case "button":
                        var label = currentTool.Label;
                        var icon = currentTool.Icon;
                        if(icon){
                            tool.css('background-image', 'url('+encodeURI(icon)+')');
                            tool.css('background-repeat', 'no-repeat');
                            tool.css('background-position', 'center center');
                            tool.jqxButton({'width': 25});
                        }else{
                            tool.text(label);
                        }
                        tool.on('click', function(e){
                            var toolIndex = parseInt(tool.attr('toolIndex'));
                            InvokeCallback(params.Model.Id, _this.tools[toolIndex].ButtonClicked, []);
                        });
                        break;
                    case "toggleButton":
                        var label = currentTool.Label;
                        var icon = currentTool.Icon;
                        tool.jqxToggleButton({toggled: currentTool.isChecked});
                        if(icon){
                            tool.css('background-image', 'url('+encodeURI(icon)+')');
                            tool.css('background-repeat', 'no-repeat');
                            tool.css('background-position', 'center center');
                            tool.addClass("jqx-editor-toolbar-icon jqx-editor-toolbar-icon-base");
                        }else{
                            tool.text(label);
                        }
                        tool.attr('toggledOnLabel',
                         currentTool.ToggledOnLabel === null ? label : currentTool.ToggledOnLabel);
                        tool.attr('toggledOffLabel',
                            currentTool.ToggledOffLabel === null ? label : currentTool.ToggledOffLabel);
                        tool.UpdateLabel = function() {
                            var toggled = tool.jqxToggleButton("toggled");
                            var newLabel = toggled ? tool.attr('toggledOnLabel') :
                                tool.attr('toggledOffLabel');
                            tool.text(newLabel);
                        }
                        tool.RaiseToggledEvent = function () {
                            var toolIndex = parseInt(tool.attr('toolIndex'));
                            var toggled = tool.jqxToggleButton("toggled");
                            InvokeCallback(params.Model.Id, _this.tools[toolIndex].Toggled, [toggled, 
                                tool.text()]);
                        }
                        tool.on('click', function(e){
                            //Updates label only if it is not only an icon.
                            if(tool.text() !== ""){
                                tool.UpdateLabel();
                            }
                            tool.RaiseToggledEvent();
                        });
                        break;
                    case "dropdownlist":
                        var comboBoxWidth;
                        if (menuToolInitialization) {
                            // specific setting for minimized tool
                            comboBoxWidth = "100%";
                        }else {
                            comboBoxWidth = currentTool.Width;
                        }
                        if(currentTool)
                            tool.jqxDropDownList({
                                placeHolder: currentTool.PlaceHolder,
                                width: comboBoxWidth,
                                source: currentTool.Items,
                                selectedIndex: currentTool.SelectedIndex,
                                checkboxes: currentTool.UseCheckboxes,
                                dropDownVerticalAlignment: currentTool.OpenUpward === true ? "top" : "bottom",
                                closeDelay: 50,
                                openDelay: 50
                            });
                        tool.on('select', function(event){
                            var toolIndex = parseInt(tool.attr('toolIndex'));
                            var args = event.args;
                            if (args) {
                                // index represents the item's index.
                                var index = args.index;
                                InvokeCallback(params.Model.Id, _this.tools[toolIndex].ItemSelected, [index]);
                            }
                        });
                        tool.on('checkChange', function(event){
                            var toolIndex = parseInt(tool.attr('toolIndex'));
                            var args = event.args;
                            if (args) {
                                // index represents the item's index.
                                var item = args.item;
                                InvokeCallback(params.Model.Id, _this.tools[toolIndex].CheckChanged,
                                    [item.index, item.value, item.checked]);
                            }
                        });
                        break;
                    }
                    tool.attr('toolIndex', i);//store tool index in order to retrieve it for events.
                    tool.attr('toolId', toolId);
                    if(currentTool.ToolTip){
                        _this.createTooltip(tool, currentTool.ToolTip);
                    }
                });
            }

        };

        this.base.onMessage = function(name, obj) {
            if (obj == null || obj.ToolId == undefined) {
                return true;
            }
            var targetedTool = null;
            var toolList = $toolbar.jqxToolBar("getTools");
            for (var i = 0; i < toolList.length; i++) {
                if (toolList[i].tool.attr('toolId') == obj.ToolId){
                    targetedTool = toolList[i].tool;
                }
            }
            if (targetedTool == null) {
                return true;
            }
            if (name === "CheckAll"){
                targetedTool.jqxDropDownList('checkAll');
            }
            else if (name === "UncheckAll"){                
                targetedTool.jqxDropDownList('uncheckAll');
            }
            else if (name === "CheckItem" && obj.Args.length > 0){
                targetedTool.jqxDropDownList('checkIndex', obj.Args[0]);
            }
            else if (name === "UncheckItem" && obj.Args.length > 0) {
                targetedTool.jqxDropDownList('uncheckIndex', obj.Args[0]);
            }
            else if (name === "Toggle") {
                targetedTool.jqxToggleButton('toggle');
                targetedTool.UpdateLabel();
                targetedTool.RaiseToggledEvent();
            }
        }.bind(this)

        params.ready(true);
        params.baseModel.resizeFunctions[params.baseModel.resizeFunctions.length] = function(height,width) {
            if (width > 0){$toolbar.jqxToolBar({'width': width});}
            $toolbar.css('width', '100%');
        };
        _this.base.initialize();
    }

    return {
        createViewModel: function(params, componentInfo) {
            return new ToolbarComponentViewModel(params, componentInfo.element);
        }
    };
});
