<?xml version="1.0"?>
<!--
  An extension of the Mozilla colorpicker that allows for a custom set of colors
-->
<bindings id="colorpickerBindings"
		xmlns="http://www.mozilla.org/xbl"
		xmlns:xbl="http://www.mozilla.org/xbl"
		xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	
	<binding id="custom-colorpicker" extends="chrome://global/content/bindings/colorpicker.xml#colorpicker">
		<resources>
			<stylesheet src="chrome://zotero/skin/bindings/customcolorpicker.css"/>
		</resources>
		
		<content>
			<vbox anonid="tiles" flex="1" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
				<hbox>
					<spacer class="colorpickertile" style="background-color: #000000" color="#000000"/>
				</hbox>
			</vbox>
		</content>
		
		<implementation implements="nsIDOMEventListener">
			<constructor><![CDATA[
				this.initialize();
				
				this._colors = this.getAttribute('colors');
				if (this._colors) {
					this._cols = this.getAttribute('cols');
				}
				this.redraw();
			]]></constructor>
			
			<!-- Defaults from the Mozilla colorpicker -->
			<field name="_defaultColors">
			[
				'L#FFFFFF','L#FFCCCC','L#FFCC99','L#FFFF99','L#FFFFCC','L#99FF99','L#99FFFF','L#CCFFFF','L#CCCCFF','L#FFCCFF',
				'#CCCCCC','#FF6666','#FF9966','L#FFFF66','L#FFFF33','L#66FF99','L#33FFFF','L#66FFFF','#9999FF','#FF99FF',
				'#C0C0C0','#FF0000','#FF9900','#FFCC66','L#FFFF00','L#33FF33','#66CCCC','#33CCFF','#6666CC','#CC66CC',
				'#999999','#CC0000','#FF6600','#FFCC33','#FFCC00','#33CC00','#00CCCC','#3366FF','#6633FF','#CC33CC',
				'#666666','#990000','#CC6600','#CC9933','#999900','#009900','#339999','#3333FF','#6600CC','#993399',
				'#333333','#660000','#993300','#996633','#666600','#006600','#336666','#000099','#333399','#663366',
				'#000000','#330000','#663300','#663333','#333300','#003300','#003333','#000066','#330099','#330033'
			]
			</field>
			<field name="_defaultCols">10</field>
			
			<property name="colors" onget="return this._colors ? this._colors : []">
				<setter><![CDATA[
					if (typeof val == 'string') {
						val = val ? val.split(',') : null;
					}
					this._colors = val;
					this.redraw();
				]]></setter>
			</property>
			
			<property name="cols" onget="return this.getAttribute('cols')">
				<setter><![CDATA[
					this.setAttribute('cols', val);
					this.redraw();
				]]></setter>
			</property>
			
			<method name="redraw">
				<body><![CDATA[
					//Zotero.debug("Redrawing color picker");
					
					var tiles = document.getAnonymousNodes(this)[0];
					
					var cols = this.getAttribute('cols') || this._defaultCols;
					var colors = this._colors.concat() || this._defaultColors.concat();
					
					while (tiles.hasChildNodes()) {
						tiles.removeChild(tiles.firstChild);
					}
					
					var rows = Math.ceil(colors.length / cols);
					
					var tileWidth = this.getAttribute('tileWidth');
					var tileHeight = this.getAttribute('tileHeight');
					
					for (let i=0; i<rows; i++) {
						var hbox = document.createElement('hbox');
						for (let j=0; j<cols; j++) {
							let color = colors.shift();
							if (!color) {
								break;
							}
							let light = color.charAt(0) == 'L';
							color = light ? color.substr(1) : color;
							
							var spacer = document.createElement('spacer');
							spacer.className = 'colorpickertile' + (light ? ' cp-light' : '');
							spacer.setAttribute('style', 'background-color: ' + color);
							spacer.setAttribute('color', color);
							if (tileWidth) {
								spacer.width = tileWidth;
							}
							if (tileHeight) {
								spacer.height = tileHeight;
							}
							hbox.appendChild(spacer);
						}
						tiles.appendChild(hbox);
					}
				]]></body>
			</method>
		</implementation>
	</binding>
	
	<!-- The content of the Mozilla colorpicker-button, but with a customcolorpicker
	     with some extra inherited attributes instead -->
	<binding id="custom-colorpicker-button" display="xul:menu"
			extends="chrome://global/content/bindings/colorpicker.xml#colorpicker-button">
		<resources>
			<stylesheet src="chrome://zotero/skin/bindings/customcolorpicker.css"/>
		</resources>
		<content>
			<xul:hbox class="colorpicker-button-colorbox" anonid="colorbox" flex="1" xbl:inherits="disabled"/>
			
			<xul:panel class="colorpicker-button-menupopup"
					anonid="colorpopup" noautofocus="true" level="top"
					onmousedown="event.stopPropagation()"
					onpopupshowing="this._colorPicker.onPopupShowing()"
					onpopuphiding="this._colorPicker.onPopupHiding()"
					onselect="this._colorPicker.pickerChange()">
				<xul:customcolorpicker xbl:inherits="palettename,disabled,cols,columns,tileWidth,tileHeight" allowevents="true" anonid="colorpicker"/>
			</xul:panel>
		</content>
		
		<implementation>
			<property name="colors" onget="return this.mPicker.colors" onset="this.mPicker.colors = val"/>
		</implementation>
	</binding>
</bindings>
