/// Javascript for dojo-compatible widget for picking stroke style
dojo.provide("dojo.widget.StrokePicker");
dojo.provide("dojo.widget.StrokePickerDialog");

dojo.provide("dojo.widget.HtmlStrokePicker");
dojo.provide("dojo.widget.HtmlStrokePickerDialog");

// dependencies
dojo.require("dojo.widget.*");

dojo.widget.HtmlStrokePicker = function(){
   // inheritance
    // see: http://www.cs.rit.edu/~atk/JavaScript/manuals/jsobj/
    // dojo.widget.HtmlWidget.call(this);
  dojo.widget.HtmlWidget.call(this);

    this.templatePath = 
      dojo.uri.dojoUri("src/widget/templates/HtmlStrokePicker.html");

    this.templateCSSPath = 
      dojo.uri.dojoUri("src/widget/templates/HtmlStrokePicker.css");

    this.widgetType = "StrokePicker";

  this._canvas = null;
  this._currentTopMargin = 0;
  this._currentLeftMargin = 2;
  this._currentItem = null;
  this._sampleLineAttributes = new Array();
  var widths = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20];
  var sampleAttr = this._sampleLineAttributes;
  var myWidth = 100;
  dojo.lang.map(widths, function(aWidth) {
                  sampleAttr.push({
                    strokeWidth: aWidth,
                    lineWidth: myWidth
                    });
                });
}
// complete the inheritance process
dojo.inherits(dojo.widget.HtmlStrokePicker, dojo.widget.HtmlWidget);

// make it a tag
dojo.widget.tags.addParseTreeHandler("dojo:strokepicker");

dojo.lang.extend(dojo.widget.HtmlStrokePicker, {

	hide: function (){
		this.domNode.parentNode.removeChild(this.domNode);
		if(this.bgIframe){
			this.bgIframe.style.display = "none";
		}
	},
        addSampleLine: function(lineAttr) {
         var gap = 10;
         var lineWidth = lineAttr['lineWidth'];
         var strokeWidth = lineAttr['strokeWidth'];
         var theLine = new xdh.Line();
         var buttonHeight = strokeWidth + gap;
         var buttonPad = 20;
         var lineY = (buttonHeight / 2);
         theLine._points[0].x = buttonPad / 2;
         theLine._points[0].y = lineY;
         theLine._points[1].x = lineWidth;
         theLine._points[1].y = lineY;
         theLine.setStrokeWidth(strokeWidth);
         theLine.updatePath();
         var button = new xdh.Button();
         button.reshape(this._currentLeftMargin,
                        this._currentTopMargin,
                        this._currentLeftMargin + lineWidth + buttonPad,
                        buttonHeight);
         var buttonRect = new xdh.Rectangle();
         buttonRect.reshape(0, 0, button.width(), button.height());
         buttonRect.setAttribute('fill-opacity', '0');
         buttonRect.setFillColor('#222244');
         // buttonRect.setStrokeColor('#bbbbbb');
         button.addFigure(buttonRect);
         button.addFigure(theLine);
         this.appendFigure(button);
         var picker = this;
         dojo.event.connect(button._node, 
                            'onmousemove', function(e) {picker.setCurrent(button);});
         this._currentTopMargin += (strokeWidth + gap);
         button.setCommand(function(){picker.onSetStrokeAttributes(lineAttr);});
        },
        selectedFigure: function() {
                     return this._currentItem.firstChild().nextSibling();
        },
        setCurrent: function(anItem) {
                     // xdh.log('setCurrent, anItem: ' + anItem.getAttribute('id'));
                     if (this._currentItem == anItem) {
                       return;
                     }
                     if (this._currentItem) {
                       this._currentItem.firstChild().setAttribute('fill-opacity', 0);
                     }
                     this._currentItem = anItem;
                     this._currentItem.firstChild().setAttribute('fill-opacity', 0.5);
        },
        onSetStrokeAttributes: function(lineAttr) {
        },
	fillInTemplate: function (args, frag) {
         this._canvas = xdh.Graphics.init(this.domNode.childNodes[1]);
         for (var i = 0; i < this._sampleLineAttributes.length; ++i) {
           this.addSampleLine(this._sampleLineAttributes[i]);
         }
         dojo.event.connect(this.domNode, 
                            'onmousedown', function(e) {e.preventDefault(); return true;});
        },
        appendFigure: function(aFigure) {
           aFigure.appendToNode(this._canvas);
        },
	showAt: function (x, y) {
		with(this.domNode.style){
			top = y + "px";
			left = x + "px";
			zIndex = 999;
		}
		dojo.html.body().appendChild(this.domNode);
		if(this.bgIframe){
			with(this.bgIframe.style){
				display = "block";
				top = y + "px";
				left = x + "px";
				zIndex = 998;
				width = dojo.html.getOuterWidth(this.domNode) + "px";
				height = dojo.html.getOuterHeight(this.domNode) + "px";
			}

		}
	}
  });

dojo.widget.HtmlStrokePickerDialog = function(){
  dojo.widget.html.ToolbarDialog.call(this);
    for (var method in this.constructor.prototype) {
      this[method] = this.constructor.prototype[method];
    }
    this.widgetType = "StrokePickerDialog";
}
dojo.inherits(dojo.widget.HtmlStrokePickerDialog, 
              dojo.widget.html.ToolbarDialog);

dojo.lang.extend(dojo.widget.HtmlStrokePickerDialog, {

	fillInTemplate: function (args, frag) {
		dojo.widget.HtmlStrokePickerDialog.superclass.fillInTemplate.call(this, args, frag);
		this.dialog = dojo.widget.createWidget("StrokePicker");
		this.dialog.domNode.style.position = "absolute";
		dojo.event.connect(this.dialog, "onSetStrokeAttributes", this, "_setValue");
	},
	_setValue: function(attr) {
		this._value = attr;
		this._fireEvent("onSetValue", attr);
	},
                     selectedFigure: function () {
                     return this.dialog.selectedFigure();
                   },
	showDialog: function (e) {
		dojo.widget.HtmlStrokePickerDialog.superclass.showDialog.call(this, e);
		var x = dojo.html.getAbsoluteX(this.domNode);
		var y = dojo.html.getAbsoluteY(this.domNode) + dojo.html.getInnerHeight(this.domNode);
		this.dialog.showAt(x, y);
	},
	
	hideDialog: function (e) {
		dojo.widget.HtmlStrokePickerDialog.superclass.hideDialog.call(this, e);
		this.dialog.hide();
                   },
                     onSetStrokeAttributes: function(attr) {
                     this.dialog.onSetStrokeAttributes(attr);
                   }
  });

// make it a tag
dojo.widget.tags.addParseTreeHandler("dojo:strokepickerdialog");