PageRenderTime 82ms CodeModel.GetById 24ms app.highlight 50ms RepoModel.GetById 1ms app.codeStats 1ms

/public/jscolor/jscolor.js

http://github.com/mtravers/wuwei
JavaScript | 830 lines | 668 code | 128 blank | 34 comment | 185 complexity | 48cfbe492f6d59b0b21e634d25f189cd MD5 | raw file
  1/**
  2 * jscolor, JavaScript Color Picker
  3 *
  4 * @version 1.2.3
  5 * @license http://www.gnu.org/copyleft/lesser.html  GNU Lesser General Public License
  6 * @author  Honza Odvarko <honza@odvarko.cz>
  7 * @created 2008-06-15
  8 * @updated 2009-02-25
  9 * @link    http://jscolor.com
 10 */
 11
 12
 13var jscolor = {
 14
 15
 16	dir : '', // location of jscolor directory (leave empty to autodetect)
 17	bindClass : 'color', // class name
 18	binding : true, // automatic binding via <input class="...">
 19	preloading : true, // use image preloading?
 20
 21
 22	install : function() {
 23		jscolor.addEvent(window, 'load', jscolor.init)
 24	},
 25
 26
 27	init : function() {
 28		if(jscolor.binding) {
 29			jscolor.bind()
 30		}
 31		if(jscolor.preloading) {
 32			jscolor.preload()
 33		}
 34	},
 35
 36
 37	getDir : function() {
 38		if(!jscolor.dir) {
 39			var detected = jscolor.detectDir()
 40			jscolor.dir = detected!=false ? detected : 'jscolor/'
 41		}
 42		return jscolor.dir
 43	},
 44
 45
 46	detectDir : function() {
 47		var base = location.href
 48
 49		var e = document.getElementsByTagName('base')
 50		for(var i=0; i<e.length; i++) {
 51			if(e[i].href) base = e[i].href
 52		}
 53
 54		var e = document.getElementsByTagName('script')
 55		for(var i=0; i<e.length; i++) {
 56			if(e[i].src && /(^|\/)jscolor\.js([?#].*)?$/i.test(e[i].src)) {
 57				var src = new jscolor.URI(e[i].src)
 58				var srcAbs = src.toAbsolute(base)
 59				srcAbs.path = srcAbs.path.replace(/[^\/]+$/, '') // remove filename
 60				delete srcAbs.query
 61				delete srcAbs.fragment
 62				return srcAbs.toString()
 63			}
 64		}
 65		return false
 66	},
 67
 68
 69	bind : function() {
 70		var matchClass = new RegExp('(^|\\s)('+jscolor.bindClass+')\\s*(\\{[^}]*\\})?', 'i')
 71		var e = document.getElementsByTagName('input')
 72		for(var i=0; i<e.length; i++) {
 73			var m
 74			if(!e[i].color && e[i].className && (m = e[i].className.match(matchClass))) {
 75				var prop = {}
 76				if(m[3]) {
 77					try {
 78						eval('prop='+m[3])
 79					} catch(eInvalidProp) {}
 80				}
 81				e[i].color = new jscolor.color(e[i], prop)
 82			}
 83		}
 84	},
 85
 86
 87	preload : function() {
 88		for(var fn in jscolor.imgRequire) {
 89			jscolor.loadImage(fn)
 90		}
 91	},
 92
 93
 94	images : {
 95		pad : [ 181, 101 ],
 96		sld : [ 16, 101 ],
 97		cross : [ 15, 15 ],
 98		arrow : [ 7, 11 ]
 99	},
100
101
102	imgRequire : {},
103	imgLoaded : {},
104
105
106	requireImage : function(filename) {
107		jscolor.imgRequire[filename] = true
108	},
109
110
111	loadImage : function(filename) {
112		if(!jscolor.imgLoaded[filename]) {
113			jscolor.imgLoaded[filename] = new Image()
114			jscolor.imgLoaded[filename].src = jscolor.getDir()+filename
115		}
116	},
117
118
119	fetchElement : function(mixed) {
120		return typeof(mixed) == 'string' ? document.getElementById(mixed) : mixed
121	},
122
123
124	addEvent : function(el, evnt, func) {
125		if(el.addEventListener) {
126			return el.addEventListener(evnt, func, false)
127		} else if(el.attachEvent) {
128			return el.attachEvent('on'+evnt, func)
129		} else {
130			return false
131		}
132	},
133
134
135	fireEvent : function(el, evnt) {
136		if(!el) {
137			return false
138		} else if(document.createEventObject) {
139			var ev = document.createEventObject()
140			return el.fireEvent('on'+evnt, ev)
141		} else if(document.createEvent) {
142			var ev = document.createEvent('HTMLEvents')
143			ev.initEvent(evnt, true, true)
144			return el.dispatchEvent(ev)
145		} else if(el['on'+evnt]) { // alternatively use the traditional event model (IE5)
146			return el['on'+evnt]()
147		} else {
148			return false
149		}
150	},
151
152
153	getElementPos : function(e) {
154		var e1=e, e2=e
155		var x=0, y=0
156		if(e1.offsetParent) {
157			do {
158				x += e1.offsetLeft
159				y += e1.offsetTop
160			} while(e1 = e1.offsetParent)
161		}
162		while((e2 = e2.parentNode) && e2.nodeName != 'BODY') {
163			x -= e2.scrollLeft
164			y -= e2.scrollTop
165		}
166		return [x, y]
167	},
168
169
170	getElementSize : function(e) {
171		return [e.offsetWidth, e.offsetHeight]
172	},
173
174
175	getMousePos : function(e) {
176		if(!e) e = window.event
177		if(typeof e.pageX == 'number') {
178			return [e.pageX, e.pageY]
179		} else if(typeof e.clientX == 'number') {
180			return [
181				e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
182				e.clientY + document.body.scrollTop + document.documentElement.scrollTop
183			]
184		}
185	},
186
187
188	getViewPos : function() {
189		if(typeof window.pageYOffset == 'number') {
190			return [window.pageXOffset, window.pageYOffset]
191		} else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) {
192			return [document.body.scrollLeft, document.body.scrollTop]
193		} else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
194			return [document.documentElement.scrollLeft, document.documentElement.scrollTop]
195		} else {
196			return [0, 0]
197		}
198	},
199
200
201	getViewSize : function() {
202		if(typeof window.innerWidth == 'number') {
203			return [window.innerWidth, window.innerHeight]
204		} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
205			return [document.body.clientWidth, document.body.clientHeight]
206		} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
207			return [document.documentElement.clientWidth, document.documentElement.clientHeight]
208		} else {
209			return [0, 0]
210		}
211	},
212
213
214	URI : function(uri) { // See RFC3986
215
216		this.scheme = null
217		this.authority = null
218		this.path = ''
219		this.query = null
220		this.fragment = null
221
222		this.parse = function(uri) {
223			var m = uri.match(/^(([A-Za-z][0-9A-Za-z+.-]*)(:))?((\/\/)([^\/?#]*))?([^?#]*)((\?)([^#]*))?((#)(.*))?/)
224			this.scheme = m[3] ? m[2] : null
225			this.authority = m[5] ? m[6] : null
226			this.path = m[7]
227			this.query = m[9] ? m[10] : null
228			this.fragment = m[12] ? m[13] : null
229			return this
230		}
231
232		this.toString = function() {
233			var result = ''
234			if(this.scheme != null) result = result + this.scheme + ':'
235			if(this.authority != null) result = result + '//' + this.authority
236			if(this.path != null) result = result + this.path
237			if(this.query != null) result = result + '?' + this.query
238			if(this.fragment != null) result = result + '#' + this.fragment
239			return result
240		}
241
242		this.toAbsolute = function(base) {
243			var base = new jscolor.URI(base)
244			var r = this
245			var t = new jscolor.URI
246
247			if(base.scheme == null) return false
248
249			if(r.scheme != null && r.scheme.toLowerCase() == base.scheme.toLowerCase()) {
250				r.scheme = null
251			}
252
253			if(r.scheme != null) {
254				t.scheme = r.scheme
255				t.authority = r.authority
256				t.path = removeDotSegments(r.path)
257				t.query = r.query
258			} else {
259				if(r.authority != null) {
260					t.authority = r.authority
261					t.path = removeDotSegments(r.path)
262					t.query = r.query
263				} else {
264					if(r.path == '') {
265						t.path = base.path
266						if(r.query != null) {
267							t.query = r.query
268						} else {
269							t.query = base.query
270						}
271					} else {
272						if(r.path.substr(0,1) == '/') {
273							t.path = removeDotSegments(r.path)
274						} else {
275							if(base.authority != null && base.path == '') {
276								t.path = '/'+r.path
277							} else {
278								t.path = base.path.replace(/[^\/]+$/,'')+r.path
279							}
280							t.path = removeDotSegments(t.path)
281						}
282						t.query = r.query
283					}
284					t.authority = base.authority
285				}
286				t.scheme = base.scheme
287			}
288			t.fragment = r.fragment
289
290			return t
291		}
292
293		function removeDotSegments(path) {
294			var out = ''
295			while(path) {
296				if(path.substr(0,3)=='../' || path.substr(0,2)=='./') {
297					path = path.replace(/^\.+/,'').substr(1)
298				} else if(path.substr(0,3)=='/./' || path=='/.') {
299					path = '/'+path.substr(3)
300				} else if(path.substr(0,4)=='/../' || path=='/..') {
301					path = '/'+path.substr(4)
302					out = out.replace(/\/?[^\/]*$/, '')
303				} else if(path=='.' || path=='..') {
304					path = ''
305				} else {
306					var rm = path.match(/^\/?[^\/]*/)[0]
307					path = path.substr(rm.length)
308					out = out + rm
309				}
310			}
311			return out
312		}
313
314		if(uri) {
315			this.parse(uri)
316		}
317
318	},
319
320
321	/*
322	 * Usage example:
323	 * var myColor = new jscolor.color(myInputElement)
324	 */
325
326	color : function(target, prop) {
327
328
329		this.required = true // refuse empty values?
330		this.adjust = true // adjust value to uniform notation?
331		this.hash = false // prefix color with # symbol?
332		this.caps = true // uppercase?
333		this.valueElement = target // value holder
334		this.styleElement = target // where to reflect current color
335		this.hsv = [0, 0, 1] // read-only  0-6, 0-1, 0-1
336		this.rgb = [1, 1, 1] // read-only  0-1, 0-1, 0-1
337
338		this.pickerOnfocus = true // display picker on focus?
339		this.pickerMode = 'HSV' // HSV | HVS
340		this.pickerPosition = 'bottom' // left | right | top | bottom
341		this.pickerFace = 10 // px
342		this.pickerFaceColor = 'ThreeDFace' // CSS color
343		this.pickerBorder = 1 // px
344		this.pickerBorderColor = 'ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight' // CSS color
345		this.pickerInset = 1 // px
346		this.pickerInsetColor = 'ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow' // CSS color
347		this.pickerZIndex = 10000
348
349
350		for(var p in prop) this[p] = prop[p]
351
352
353		this.hidePicker = function() {
354			if(isPickerOwner()) {
355				removePicker()
356			}
357		}
358
359
360		this.showPicker = function() {
361			if(!isPickerOwner()) {
362				var tp = jscolor.getElementPos(target) // target pos
363				var ts = jscolor.getElementSize(target) // target size
364				var vp = jscolor.getViewPos() // view pos
365				var vs = jscolor.getViewSize() // view size
366				var ps = [ // picker size
367					2*this.pickerBorder + 4*this.pickerInset + 2*this.pickerFace + jscolor.images.pad[0] + 2*jscolor.images.arrow[0] + jscolor.images.sld[0],
368					2*this.pickerBorder + 2*this.pickerInset + 2*this.pickerFace + jscolor.images.pad[1]
369				]
370				var a, b, c
371				switch(this.pickerPosition.toLowerCase()) {
372					case 'left': a=1; b=0; c=-1; break
373					case 'right':a=1; b=0; c=1; break
374					case 'top':  a=0; b=1; c=-1; break
375					default:     a=0; b=1; c=1; break
376				}
377				var l = (ts[b]+ps[b])/2
378				var pp = [ // picker pos
379					-vp[a]+tp[a]+ps[a] > vs[a] ?
380						(-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
381						tp[a],
382					-vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
383						(-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
384						(tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
385				]
386				drawPicker(pp[a], pp[b])
387			}
388		}
389
390
391		this.importColor = function() {
392			if(!valueElement) {
393				this.exportColor()
394			} else {
395				if(!this.adjust) {
396					if(!this.fromString(valueElement.value, leaveValue)) {
397						styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor
398						styleElement.style.color = styleElement.jscStyle.color
399						this.exportColor(leaveValue | leaveStyle)
400					}
401				} else if(!this.required && /^\s*$/.test(valueElement.value)) {
402					valueElement.value = ''
403					styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor
404					styleElement.style.color = styleElement.jscStyle.color
405					this.exportColor(leaveValue | leaveStyle)
406
407				} else if(this.fromString(valueElement.value)) {
408					// OK
409				} else {
410					this.exportColor()
411				}
412			}
413		}
414
415
416		this.exportColor = function(flags) {
417			if(!(flags & leaveValue) && valueElement) {
418				var value = this.toString()
419				if(this.caps) value = value.toUpperCase()
420				if(this.hash) value = '#'+value
421				valueElement.value = value
422			}
423			if(!(flags & leaveStyle) && styleElement) {
424				styleElement.style.backgroundColor = '#'+this.toString()
425				styleElement.style.color =
426					0.213 * this.rgb[0] +
427					0.715 * this.rgb[1] +
428					0.072 * this.rgb[2]
429					< 0.5 ? '#FFF' : '#000'
430			}
431			if(!(flags & leavePad) && isPickerOwner()) {
432				redrawPad()
433			}
434			if(!(flags & leaveSld) && isPickerOwner()) {
435				redrawSld()
436			}
437		}
438
439
440		this.fromHSV = function(h, s, v, flags) { // null = don't change
441			h<0 && (h=0) || h>6 && (h=6)
442			s<0 && (s=0) || s>1 && (s=1)
443			v<0 && (v=0) || v>1 && (v=1)
444			this.rgb = HSV_RGB(
445				h==null ? this.hsv[0] : (this.hsv[0]=h),
446				s==null ? this.hsv[1] : (this.hsv[1]=s),
447				v==null ? this.hsv[2] : (this.hsv[2]=v)
448			)
449			this.exportColor(flags)
450		}
451
452
453		this.fromRGB = function(r, g, b, flags) { // null = don't change
454			r<0 && (r=0) || r>1 && (r=1)
455			g<0 && (g=0) || g>1 && (g=1)
456			b<0 && (b=0) || b>1 && (b=1)
457			var hsv = RGB_HSV(
458				r==null ? this.rgb[0] : (this.rgb[0]=r),
459				g==null ? this.rgb[1] : (this.rgb[1]=g),
460				b==null ? this.rgb[2] : (this.rgb[2]=b)
461			)
462			if(hsv[0] != null) {
463				this.hsv[0] = hsv[0]
464			}
465			if(hsv[2] != 0) {
466				this.hsv[1] = hsv[1]
467			}
468			this.hsv[2] = hsv[2]
469			this.exportColor(flags)
470		}
471
472
473		this.fromString = function(hex, flags) {
474			var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i)
475			if(!m) {
476				return false
477			} else {
478				if(m[1].length == 6) { // 6-char notation
479					this.fromRGB(
480						parseInt(m[1].substr(0,2),16) / 255,
481						parseInt(m[1].substr(2,2),16) / 255,
482						parseInt(m[1].substr(4,2),16) / 255,
483						flags
484					)
485				} else { // 3-char notation
486					this.fromRGB(
487						parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255,
488						parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255,
489						parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255,
490						flags
491					)
492				}
493				return true
494			}
495		}
496
497
498		this.toString = function() {
499			return (
500				(0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) +
501				(0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) +
502				(0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1)
503			)
504		}
505
506
507		function RGB_HSV(r, g, b) {
508			var n = Math.min(Math.min(r,g),b)
509			var v = Math.max(Math.max(r,g),b)
510			var m = v - n
511			if(m == 0) return [ null, 0, v ]
512			var h = r==n ? 3+(b-g)/m : (g==n ? 5+(r-b)/m : 1+(g-r)/m)
513			return [ h==6?0:h, m/v, v ]
514		}
515
516
517		function HSV_RGB(h, s, v) {
518			if(h == null) return [ v, v, v ]
519			var i = Math.floor(h)
520			var f = i%2 ? h-i : 1-(h-i)
521			var m = v * (1 - s)
522			var n = v * (1 - s*f)
523			switch(i) {
524				case 6:
525				case 0: return [v,n,m]
526				case 1: return [n,v,m]
527				case 2: return [m,v,n]
528				case 3: return [m,n,v]
529				case 4: return [n,m,v]
530				case 5: return [v,m,n]
531			}
532		}
533
534
535		function removePicker() {
536			delete jscolor.picker.owner
537			document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB)
538		}
539
540
541		function drawPicker(x, y) {
542			if(!jscolor.picker) {
543				jscolor.picker = {
544					box : document.createElement('div'),
545					boxB : document.createElement('div'),
546					pad : document.createElement('div'),
547					padB : document.createElement('div'),
548					padM : document.createElement('div'),
549					sld : document.createElement('div'),
550					sldB : document.createElement('div'),
551					sldM : document.createElement('div')
552				}
553				for(var i=0,segSize=4; i<jscolor.images.sld[1]; i+=segSize) {
554					var seg = document.createElement('div')
555					seg.style.height = segSize+'px'
556					seg.style.fontSize = '1px'
557					seg.style.lineHeight = '0'
558					jscolor.picker.sld.appendChild(seg)
559				}
560				jscolor.picker.sldB.appendChild(jscolor.picker.sld)
561				jscolor.picker.box.appendChild(jscolor.picker.sldB)
562				jscolor.picker.box.appendChild(jscolor.picker.sldM)
563				jscolor.picker.padB.appendChild(jscolor.picker.pad)
564				jscolor.picker.box.appendChild(jscolor.picker.padB)
565				jscolor.picker.box.appendChild(jscolor.picker.padM)
566				jscolor.picker.boxB.appendChild(jscolor.picker.box)
567			}
568
569			var p = jscolor.picker
570
571			// recompute controls positions
572			posPad = [
573				x+THIS.pickerBorder+THIS.pickerFace+THIS.pickerInset,
574				y+THIS.pickerBorder+THIS.pickerFace+THIS.pickerInset ]
575			posSld = [
576				null,
577				y+THIS.pickerBorder+THIS.pickerFace+THIS.pickerInset ]
578
579			// controls interaction
580			p.box.onmouseup =
581			p.box.onmouseout = function() { target.focus() }
582			p.box.onmousedown = function() { abortBlur=true }
583			p.box.onmousemove = function(e) { holdPad && setPad(e); holdSld && setSld(e) }
584			p.padM.onmouseup =
585			p.padM.onmouseout = function() { if(holdPad) { holdPad=false; jscolor.fireEvent(valueElement,'change') } }
586			p.padM.onmousedown = function(e) { holdPad=true; setPad(e) }
587			p.sldM.onmouseup =
588			p.sldM.onmouseout = function() { if(holdSld) { holdSld=false; jscolor.fireEvent(valueElement,'change') } }
589			p.sldM.onmousedown = function(e) { holdSld=true; setSld(e) }
590
591			// picker
592			p.box.style.width = 4*THIS.pickerInset + 2*THIS.pickerFace + jscolor.images.pad[0] + 2*jscolor.images.arrow[0] + jscolor.images.sld[0] + 'px'
593			p.box.style.height = 2*THIS.pickerInset + 2*THIS.pickerFace + jscolor.images.pad[1] + 'px'
594
595			// picker border
596			p.boxB.style.position = 'absolute'
597			p.boxB.style.clear = 'both'
598			p.boxB.style.left = x+'px'
599			p.boxB.style.top = y+'px'
600			p.boxB.style.zIndex = THIS.pickerZIndex
601			p.boxB.style.border = THIS.pickerBorder+'px solid'
602			p.boxB.style.borderColor = THIS.pickerBorderColor
603			p.boxB.style.background = THIS.pickerFaceColor
604
605			// pad image
606			p.pad.style.width = jscolor.images.pad[0]+'px'
607			p.pad.style.height = jscolor.images.pad[1]+'px'
608
609			// pad border
610			p.padB.style.position = 'absolute'
611			p.padB.style.left = THIS.pickerFace+'px'
612			p.padB.style.top = THIS.pickerFace+'px'
613			p.padB.style.border = THIS.pickerInset+'px solid'
614			p.padB.style.borderColor = THIS.pickerInsetColor
615
616			// pad mouse area
617			p.padM.style.position = 'absolute'
618			p.padM.style.left = '0'
619			p.padM.style.top = '0'
620			p.padM.style.width = THIS.pickerFace + 2*THIS.pickerInset + jscolor.images.pad[0] + jscolor.images.arrow[0] + 'px'
621			p.padM.style.height = p.box.style.height
622			p.padM.style.cursor = 'crosshair'
623
624			// slider image
625			p.sld.style.overflow = 'hidden'
626			p.sld.style.width = jscolor.images.sld[0]+'px'
627			p.sld.style.height = jscolor.images.sld[1]+'px'
628
629			// slider border
630			p.sldB.style.position = 'absolute'
631			p.sldB.style.right = THIS.pickerFace+'px'
632			p.sldB.style.top = THIS.pickerFace+'px'
633			p.sldB.style.border = THIS.pickerInset+'px solid'
634			p.sldB.style.borderColor = THIS.pickerInsetColor
635
636			// slider mouse area
637			p.sldM.style.position = 'absolute'
638			p.sldM.style.right = '0'
639			p.sldM.style.top = '0'
640			p.sldM.style.width = jscolor.images.sld[0] + jscolor.images.arrow[0] + THIS.pickerFace + 2*THIS.pickerInset + 'px'
641			p.sldM.style.height = p.box.style.height
642			try {
643				p.sldM.style.cursor = 'pointer'
644			} catch(eOldIE) {
645				p.sldM.style.cursor = 'hand'
646			}
647
648			// load images in optimal order
649			switch(modeID) {
650				case 0: var padImg = 'hs.png'; break
651				case 1: var padImg = 'hv.png'; break
652			}
653			p.padM.style.background = "url('"+jscolor.getDir()+"cross.gif') no-repeat"
654			p.sldM.style.background = "url('"+jscolor.getDir()+"arrow.gif') no-repeat"
655			p.pad.style.background = "url('"+jscolor.getDir()+padImg+"') 0 0 no-repeat"
656
657			// place pointers
658			redrawPad()
659			redrawSld()
660
661			jscolor.picker.owner = THIS
662			document.getElementsByTagName('body')[0].appendChild(p.boxB)
663		}
664
665
666		function redrawPad() {
667			// redraw the pad pointer
668			switch(modeID) {
669				case 0: var yComponent = 1; break
670				case 1: var yComponent = 2; break
671			}
672			var x = Math.round((THIS.hsv[0]/6) * (jscolor.images.pad[0]-1))
673			var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.pad[1]-1))
674			jscolor.picker.padM.style.backgroundPosition =
675				(THIS.pickerFace+THIS.pickerInset+x - Math.floor(jscolor.images.cross[0]/2)) + 'px ' +
676				(THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.cross[1]/2)) + 'px'
677
678			// redraw the slider image
679			var seg = jscolor.picker.sld.childNodes
680
681			switch(modeID) {
682				case 0:
683					var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 1)
684					for(var i=0; i<seg.length; i++) {
685						seg[i].style.backgroundColor = 'rgb('+
686							(rgb[0]*(1-i/seg.length)*100)+'%,'+
687							(rgb[1]*(1-i/seg.length)*100)+'%,'+
688							(rgb[2]*(1-i/seg.length)*100)+'%)'
689					}
690					break
691				case 1:
692					var rgb, s, c = [ THIS.hsv[2], 0, 0 ]
693					var i = Math.floor(THIS.hsv[0])
694					var f = i%2 ? THIS.hsv[0]-i : 1-(THIS.hsv[0]-i)
695					switch(i) {
696						case 6:
697						case 0: rgb=[0,1,2]; break
698						case 1: rgb=[1,0,2]; break
699						case 2: rgb=[2,0,1]; break
700						case 3: rgb=[2,1,0]; break
701						case 4: rgb=[1,2,0]; break
702						case 5: rgb=[0,2,1]; break
703					}
704					for(var i=0; i<seg.length; i++) {
705						s = 1 - 1/(seg.length-1)*i
706						c[1] = c[0] * (1 - s*f)
707						c[2] = c[0] * (1 - s)
708						seg[i].style.backgroundColor = 'rgb('+
709							(c[rgb[0]]*100)+'%,'+
710							(c[rgb[1]]*100)+'%,'+
711							(c[rgb[2]]*100)+'%)'
712					}
713					break
714			}
715		}
716
717
718		function redrawSld() {
719			// redraw the slider pointer
720			switch(modeID) {
721				case 0: var yComponent = 2; break
722				case 1: var yComponent = 1; break
723			}
724			var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.sld[1]-1))
725			jscolor.picker.sldM.style.backgroundPosition =
726				'0 ' + (THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.arrow[1]/2)) + 'px'
727		}
728
729
730		function isPickerOwner() {
731			return jscolor.picker && jscolor.picker.owner == THIS
732		}
733
734
735		function blurTarget() {
736			if(valueElement == target) THIS.importColor()
737			if(THIS.pickerOnfocus) THIS.hidePicker()
738		}
739
740
741		function blurValue() {
742			if(valueElement != target) THIS.importColor()
743		}
744
745
746		function setPad(e) {
747			var posM = jscolor.getMousePos(e)
748			var x = posM[0]-posPad[0]
749			var y = posM[1]-posPad[1]
750			switch(modeID) {
751				case 0: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), 1 - y/(jscolor.images.pad[1]-1), null, leaveSld); break
752				case 1: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), null, 1 - y/(jscolor.images.pad[1]-1), leaveSld); break
753			}
754		}
755
756
757		function setSld(e) {
758			var posM = jscolor.getMousePos(e)
759			var y = posM[1]-posPad[1]
760			switch(modeID) {
761				case 0: THIS.fromHSV(null, null, 1 - y/(jscolor.images.sld[1]-1), leavePad); break
762				case 1: THIS.fromHSV(null, 1 - y/(jscolor.images.sld[1]-1), null, leavePad); break
763			}
764		}
765
766
767		var THIS = this
768		var modeID = this.pickerMode.toLowerCase()=='hvs' ? 1 : 0
769		var abortBlur = false
770		var
771			valueElement = jscolor.fetchElement(this.valueElement),
772			styleElement = jscolor.fetchElement(this.styleElement)
773		var
774			holdPad = false,
775			holdSld = false
776		var
777			posPad,
778			posSld
779		var
780			leaveValue = 1<<0,
781			leaveStyle = 1<<1,
782			leavePad = 1<<2,
783			leaveSld = 1<<3
784
785		// target
786		jscolor.addEvent(target, 'focus', function() {
787			if(THIS.pickerOnfocus) THIS.showPicker()
788		})
789		jscolor.addEvent(target, 'blur', function() {
790			if(!abortBlur) {
791				setTimeout(function(){ abortBlur || blurTarget(); abortBlur=false }, 0)
792			} else {
793				abortBlur = false
794			}
795		})
796
797		// valueElement
798		if(valueElement) {
799			var updateField = function() {
800				THIS.fromString(valueElement.value, leaveValue)
801			}
802			jscolor.addEvent(valueElement, 'keyup', updateField)
803			jscolor.addEvent(valueElement, 'input', updateField)
804			jscolor.addEvent(valueElement, 'blur', blurValue)
805			valueElement.setAttribute('autocomplete', 'off')
806		}
807
808		// styleElement
809		if(styleElement) {
810			styleElement.jscStyle = {
811				backgroundColor : styleElement.style.backgroundColor,
812				color : styleElement.style.color
813			}
814		}
815
816		// require images
817		switch(modeID) {
818			case 0: jscolor.requireImage('hs.png'); break
819			case 1: jscolor.requireImage('hv.png'); break
820		}
821		jscolor.requireImage('cross.gif');
822		jscolor.requireImage('arrow.gif');
823
824		this.importColor()
825	}
826
827}
828
829
830jscolor.install()