right-rails 0.6.0 → 1.0.0

data/javascripts/right-calendar.js

@@ -1,9 +0,0 @@
-/**
- * The calendar widget implemented with RightJS
- *
- * Home page: http://rightjs.org/ui/calendar
- *
- * @copyright (C) 2009-2010 Nikolay V. Nemshilov
- */
-if (!RightJS) { throw "Gimme RightJS. Please." };
-eval((function(s,d){for(var i=d.length-1;i>-1;i--)if(d[i])s=s.replace(new RegExp(i,'g'),d[i]);return s})("19 28=68 Class(Observer,{extend:{EVENTS:$w('show 94 44 95'),169:{67:'ISO',101:70,178:false,min47:70,max47:70,138184:1,fx185:'fade',129:200,53:1,36:1,43:70,134:false,94OnPick:false,179:'[rel^=14]'},Formats:{ISO:'%Y-%m-%d',POSIX:'%Y/%m/%d',EUR:'%d-%m-%Y',US:'%m/%d/%Y'},57:{Done:'Done',Now:'Now',182:'182 173',186:'186ious 173',182180:'182 180',186180:'186ious 180',89:$w('Sun117 Mon117 Tues117 Wednes117 Thurs117 Fri117 Satur117'),89183:$w('Sun Mon Tue Wed Thu Fri Sat'),89Min:$w('Su Mo Tu We Th Fr Sa'),65181:$w('January February March April May June July August September October November December'),65181183:$w('Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec')},63:70,137:{},find:16(a){19 e=a.target;if(isElement(e)&&e.136(28.169.179)){19 u=$uid(e);21 28.137[u]=28.137[u]||68 28(eval('('+e.get('data-14-25')+')'))}},rescan:16(s){}},initialize:16(o){11.$super(o);11.31=$E('29',{'72':'17-14',14:11});11.build().150().set47(68 47())},set169:16(u){11.$super(u);19 a=11.constructor;19 o=11.25;with(11.25){o.57={};151(19 k in a.57)57[k]=isArray(a.57[k])?a.57[k].clone():a.57[k];$ext(57,(u||{}).57);o.89=57.89Min;if(138184)89.push(89.111());if(!isArray(53))53=[53,1];if(min47)min47=11.125(min47);if(max47){max47=11.125(max47);max47.set47(max47.get47()+1)}67=(a.Formats[67]||67).trim();if(101===70)101=67.search(/%[HkIl]/)>-1;if(43===70)43=67.search(/%[Il]/)<0;if(36>60&&12 %(36/60).139())43=162}21 11},set47:16(d){11.41=11.16347=11.125(d);21 11.up41()},get47:16(){21 11.41},94:16(){11.31.94(11.25.fx185,{duration:11.25.129});28.63=70;21 11},show:16(p){11.31.show(11.25.fx185,{duration:11.25.129});21 28.63=11},35:16(e,p){11.31.92('17-14-84').35(e,p);21 11},84d:16(){21 11.31.126('17-14-84')}});28.133({up41:16(d){19 d=68 47(d||11.41),o=11.25;19 a=11.31.44('29.17-14-65');19 b=a.length;151(19 i=-(b-b/2).139()+1;i<(b-b/2).floor()+1;i++){19 m=68 47(d);m.78(d.62()+i);11.up41173(a.111(),m)}11.up41182186173187s(d,b);if(o.101){11.100.75=o.36<60?d.159():(d.159()/(o.36/60)).round()*(o.36/60);11.114.75=(d.getMinutes()/(o.36 % 60)).round()*o.36}21 11},up41173:16(g,d){d.set47(32);19 f=32-d.get47();d.78(d.62()-1);19 b=(11.41.164()/86400000).139();19 r=g.44('74 tr');19 a=r.111().44('td');g.44('74 td').145(16(t){t.143='';t.72185='17-14-117-blank'});19 o=11.25;151(19 i=1;i<=f;i++){d.set47(i);19 e=d.get184();if(11.25.138184)e=e?e-1:6;a[e].143=''+i;a[e].72185=b==(d.164()/86400000).139()?'17-14-117-44ed':'';if((o.min47&&o.min47>d)||(o.max47&&o.max47<d))a[e].72185='17-14-117-61';a[e].41=68 47(d);if(e==6)a=r.111().44('td')}19 c=(o.134?o.57.65181183[d.62()]+',':o.57.65181[d.62()])+' '+d.81();g.138('29.17-14-65-177').up41(c)},up41182186173187s:16(a,f){19 o=11.25;if(o.min47){19 b=68 47(a.81(),0,1,0,0,0);19 c=68 47(o.min47.81(),0,1,0,0,0);11.124=b>c;b.78(a.62()-(f-f/2).139());c.78(o.min47.62());11.118=b>=c}93 11.118=11.124=162;if(o.max47){19 e=68 47(a);19 m=68 47(o.max47);[e,m].145(16(d){d.set47(32);d.78(d.62()-1);d.set47(32-d.get47());d.setHours(0);d.setMinutes(0);d.setSeconds(0);d.setMilliseconds(0)});11.119=e<m;[e,m].145('78',0);11.120=e<m}93 11.119=11.120=162;11.106[11.119?'82':'92']('17-ui-26-61');11.107[11.118?'82':'92']('17-ui-26-61');if(11.69){11.69[11.120?'82':'92']('17-ui-26-61');11.103[11.124?'82':'92']('17-ui-26-61')}},build:16(){11.buildSwaps();19 g=74=$E('42',{'72':'17-14-168'}).35(11.31);19 o=11.25;if(Browser.OLD)74=$E('74').35(g);151(19 y=0;y<o.53[1];y++){19 r=$E('tr').35(74);151(19 x=0;x<o.53[0];x++)$E('td').35(r).97(11.build173())}if(o.101)11.buildTime();11.160();21 11},buildSwaps:16(){19 i=11.25.57;11.107=$E('29',{'72':'17-ui-26 17-14-163-26',87:'&lsaquo;',167:i.186}).35(11.31);11.106=$E('29',{'72':'17-ui-26 17-14-140-26',87:'&rsaquo;',167:i.182}).35(11.31);if(11.25.134){11.103=$E('29',{'72':'17-ui-26 17-14-163-141-26',87:'&laquo;',167:i.186180}).35(11.107,'after');11.69=$E('29',{'72':'17-ui-26 17-14-140-141-26',87:'&raquo;',167:i.182180}).35(11.106,'be151e')}},build173:16(){21 $E('29',{'72':'17-14-65'}).97('<29 72=\"17-14-65-177\"></29>'+'<42><thead><tr>'+11.25.89.map(16(n){21 '<th>'+n+'</th>'}).join('')+'</tr></thead><74>'+'123456'.146('').map(16(){21 '<tr><td><td><td><td><td><td><td></tr>'}).join('')+'</74></42>')},buildTime:16(){19 o=11.25;19 t=$E('29',{'72':'17-14-time',87:':'}).35(11.31);11.100=$E('44').35(t,'113');11.114=$E('44').35(t);19 m=o.36<60?o.36:60;19 h=o.36<60?1:(o.36/60).139();(60).times(16(a){19 c=(a<10?'0':'')+a;if(a<24&&a % h==0){if(o.43)11.100.97($E('154',{75:a,87:c}));93 if(a<12)11.100.97($E('154',{75:a,87:a==0?12:a}))}if(a % m==0)11.114.97($E('154',{75:a,87:c}))},11);if(!o.43){11.121=$E('44').35(t);(o.67.133s(/%P/)?['am','pm']:['AM','PM']).145(16(v){11.121.97($E('154',{75:v.98(),87:v}))},11)}},160:16(){if(!11.25.178)21;11.116=$E('29',{'72':'17-ui-26 17-14-now-26',87:11.25.57.Now});11.95187=$E('29',{'72':'17-ui-26 17-14-95-26',87:11.25.57.Done});$E('29',{'72':'17-ui-26s 17-14-26s'}).97([11.95187,11.116]).35(11.31)}});28.133({44:16(d){11.fire('44',11.41=d);if(11.25.94OnPick)11.95();21 11},95:16(){if(!11.84d())11.94();21 11.fire('95',11.41)},140184:16(){21 11.change47({'47':1})},163184:16(){21 11.change47({'47':-1})},140Week:16(){21 11.change47({'47':7})},163Week:16(){21 11.change47({'47':-7})},135:16(){21 11.change47({173:1})},144:16(){21 11.change47({173:-1})},140180:16(){21 11.change47({Full180:1})},163180:16(){21 11.change47({Full180:-1})},change47:16(h){19 d=68 47(11.41),o=11.25;151(19 k in h)d['set'+k](d['get'+k]()+h[k]);if(o.min47&&o.min47>d)d=68 47(o.min47);if(o.max47&&o.max47<d){d=68 47(o.max47);d.set47(d.get47()-1)}21 11.up41(11.41=d)},150:16(){11.107.71(11.144.58(11));11.106.71(11.135.58(11));if(11.69){11.103.71(11.163180.58(11));11.69.71(11.140180.58(11))}11.31.44('29.17-14-65 42 74 td').145(16(c){c.71(16(){if(c.143!=''&&!c.126('17-14-117-61')){19 p=11.31.138('.17-14-117-44ed');if(p)p.82('17-14-117-44ed');c.92('17-14-117-44ed');11.115(c.41)}}.58(11))},11);if(11.100){11.100.157(11.115.58(11));11.114.157(11.115.58(11));if(!11.25.43)11.121.157(11.115.58(11))}if(11.116){11.116.71(11.set47.58(11,68 47()));11.95187.71(11.95.58(11))}11.31.onMousedown(16(a){a.s113Propagation()}).71(16(e){e.s113();if(11.175){11.175.cancel();11.175=70}}.58(11));21 11},115:16(d){if(d instanceof 47){11.41.set180(d.81());11.41.78(d.62());11.41.set47(d.get47())}if(11.100){11.41.setHours(11.100.75.toInt()+(!11.25.43&&11.121.75=='pm'?12:0));11.41.setMinutes(11.114.75)}21 11.44(11.41)}});28.133({assignTo:16(i,t){19 i=$(i),t=$(t);if(t)t.71(16(a){a.s113();11.110(i.focus())}.58(11));93 i.on({focus:11.110.58(11,i),click:16(a){a.s113();if(11.31.hidden())11.110(i)}.58(11),keyDown:16(a){if(a.keyCode==9&&11.31.visible())11.94()}.58(11)});21 11},110:16(e){19 e=$(e),d=e.dimensions();11.set47(11.125(e.75));11.31.setStyle({90:'122',109:'0',left:(d.left)+'px',113:(d.113+d.96)+'px'}).35(79.body);11.s113Observing('44').s113Observing('95');11.on(11.95187?'95':'44',16(){e.75=11.67()}.58(11));21 11.94Others().show()},toggleAt:16(i){if(11.31.parentNode&&11.31.visible())11.94();93 11.110(i);21 11},94Others:16(){$$('29.17-14').145(16(e){if(!e.126('17-14-84')){if(e!=11.31)e.94()}});21 11}});28.133({125:16(g){19 d;if(isString(g)&&g){19 t=RegExp.escape(11.25.67);19 h=t.136(/%[a-z]/ig).map('136',/[a-z]$/i).map('138').without('%');19 r=68 RegExp('^'+t.171(/%p/i,'(pm|PM|am|AM)').171(/(%[a-z])/ig,'(.+?)')+'$');19 m=g.trim().136(r);if(m){m.111();19 y=70,f=70,d=70,b=70,e=70,s=70,c;while(m.length){19 v=m.111();19 k=h.111();if(k.98()=='b')f=11.25.57[k=='b'?'65181183':'65181'].indexOf(v);93 if(k.98()=='p')c=v.98();93{v=v.toInt();switch(k){52 'd':52 'e':d=v;59;52 'm':f=v-1;59;52 'y':52 'Y':y=v;59;52 'H':52 'k':52 'I':52 'l':b=v;59;52 'M':e=v;59;52 'S':s=v;59}}}if(c){b=b==12?0:b;b=(c=='pm'?b+12:b)}d=68 47(y,f,d,b,e,s)}}93 if(g instanceof 47||47.125(g))d=68 47(g);21(!d||isNaN(d.164()))?68 47:d},67:16(g){19 j=11.25.57;19 f=11.41.get184();19 q=11.41.62();19 c=11.41.get47();19 t=11.41.81();19 h=11.41.159();19 o=11.41.getMinutes();19 s=11.41.getSeconds();19 i=(h==0?12:h<13?h:h-12);19 v={a:j.89183[f],A:j.89[f],b:j.65181183[q],B:j.65181[q],d:(c<10?'0':'')+c,e:''+c,m:(q<9?'0':'')+(q+1),y:(''+t).substring(2,4),Y:''+t,H:(h<10?'0':'')+h,k:''+h,I:(h>0&&(h<10||(h>12&&h<22))?'0':'')+i,l:''+i,p:h<12?'AM':'PM',P:h<12?'am':'pm',M:(o<10?'0':'')+o,S:(s<10?'0':'')+s,'%':'%'};19 r=g||11.25.67;151(19 n in v)r=r.171('%'+n,v[n]);21 r}});(16(){19 s=16(e){19 c=28.find(Event.ext(e));if(c&&28.63!=c){19 i=e.target;19 b=28.169.179.146('[').last();19 k=b.146('=').last().146(']').138();19 a=68 RegExp(k+'\\\\[(.+?)\\\\]');19 r=i.get(b.146('^=')[0]);if(r&&(r=r.136(a))){i=$(r[1]);e.s113()}c.110(i)}};19 h=16(e){s(e)};19 d=16(e){19 t=e.target;if(28.find(e)){if(t.tag185=='A')e.s113()}93 if(28.63){if(![t].concat(t.parents()).138('126','17-14'))28.63.94()}};19 f=16(e){s(e)};19 o=16(e){19 c=28.find(Event.ext(e));if(c)c.175=(16(){11.94()}.58(c)).delay(200)};19 g=16(e){if(28.63){19 n;switch(e.keyCode){52 27:n='94';59;52 37:n='163184';59;52 39:n='140184';59;52 38:n='163Week';59;52 40:n='140Week';59;52 34:n='135';59;52 33:n='144';59;52 13:28.63.44(28.63.41);n='95';59}if(n){28.63[n]();e.s113()}}};79.on({mousedown:h,click:d,keydown:g});if(Browser.IE){79.170('onfocusin',f);79.170('onfocusout',o)}93{79.128('focus',f,162);79.128('blur',o,162)}})();79.write(\"<style type=\\\"147/css\\\">29.17-14,29.17-14 42,29.17-14 42 tr,29.17-14 42 th,29.17-14 42 td,29.17-14 42 74,29.17-14 42 thead{48:161;30:161;width:auto;96:auto;109:0;73:0}*.17-ui-26{130:84-block;*130:84;*zoom:1;96:1em;line-96:1em;73:.85 .176;147-108:153;30:1px 166 #172;30-80:.85;-moz-30-80:.85;-127-30-80:.85;112:pointer;46:#555;48-46:#FFF}*.17-ui-26:hover{46:#222;30-46:#999;48-46:#172}*.17-ui-26-61,*.17-ui-26-61:hover{46:#888;48:#EEE;30-46:#172;112:132}*.17-ui-26s{109-113:.176}29.17-14{90:122;96:auto;30:1px 166 #BBB;90:relative;73:.176;30-80:.3em;-moz-30-80:.3em;-127-30-80:.3em;112:132;48-46:#EEE;-moz-box-149:.85 .4em .8em #666;-127-box-149:.85 .4em .8em #666}29.17-14-84{90:relative;130:84-block;vertical-108:113;*130:84;*zoom:1;-moz-box-149:161;-127-box-149:161}29.17-14-163-26,29.17-14-140-26,29.17-14-163-141-26,29.17-14-140-141-26{90:122;float:left;width:1em;73:.1176 .4em}29.17-14-140-26{17:.176}29.17-14-163-141-26{left:2.5176}29.17-14-140-141-26{17:2.5176}29.17-14-65-177{147-108:153;96:1.85;line-96:1.85}42.17-14-168{30-spacing:0px}42.17-14-168 td{vertical-108:113;73-17:.4em}42.17-14-168>74>td:last-child{73:0}29.17-14-65 42{109-113:.85;30-spacing:1px;30-collapse:separate}29.17-14-65 42 th{46:#777;147-108:153}29.17-14-65 42 td{147-108:17;73:.1em .3em;48-46:#FFF;30:1px 166 #172;112:pointer;46:#555;30-80:.85;-moz-30-80:.85;-127-30-80:.85}29.17-14-65 42 td:hover{48-46:#172;30-46:#AAA;46:#000}29.17-14-65 42 td.17-14-117-blank{48:transparent;112:132;30:161}29.17-14-65 42 td.17-14-117-44ed{48-46:#BBB;30-46:#AAA;46:#222;font-weight:bold;73:.1em .85}29.17-14-65 42 td.17-14-117-61{46:#888;48:#EEE;30-46:#172;112:132}29.17-14-time{30-113:1px 166 #ccc;109-113:.3em;73-113:.176;147-108:153}29.17-14-time 44{109:0 .4em}29.17-14-26s 29.17-ui-26{width:3.85}29.17-14-95-26{90:122;17:.176}</style>\");",",,,,,,,,,,,this,,,calendar,,function,right,,var,,return,,,,options,button,,Calendar,div,border,element,,,,insertTo,timePeriod,,,,,date,table,twentyFourHour,select,,color,Date,background,maxDate,changeDate,minDate,case,numberOfMonths,setDate,,,i18n,bind,break,,disabled,getMonth,current,,month,,format,new,nextYearButton,null,onClick,class,padding,tbody,value,monthNamesShort,,setMonth,document,radius,getFullYear,removeClass,getDate,inline,2em,,html,,dayNames,position,updateNextPrevMonthButtons,addClass,else,hide,done,height,insert,toLowerCase,,hours,showTime,selected,prevYearButton,doneButton,monthNames,nextButton,prevButton,align,margin,showAt,shift,cursor,top,minutes,setTime,nowButton,day,hasPrevMonth,hasNextMonth,hasNextYear,meridian,absolute,,hasPrevYear,parse,hasClass,webkit,addEventListener,fxDuration,display,buttons,default,include,listYears,nextMonth,match,instances,first,ceil,next,year,stop,innerHTML,prevMonth,each,split,text,className,shadow,connectEvents,for,update,center,option,dayNamesShort,stopObserving,onChange,firstDay,getHours,buildButtons,none,true,prev,getTime,updateMonth,solid,title,greed,Options,attachEvent,replace,CCC,Month,dayNamesMin,timer,5em,caption,showButtons,cssRule,Year,Names,Next,Short,Day,Name,Prev,Button".split(",")));

data/javascripts/right-colorpicker-src.js

@@ -1,635 +0,0 @@
-/**
- * RightJS UI Colorpicker widget
- *
- * See http://rightjs.org/ui/colorpicker
- *
- * Copyright (C) 2010 Nikolay Nemshilov
- */
-if (!self.RightJS) throw "Gimme RightJS";
-/**
- * The basic file for Colorpicker
- *
- * Copyright (C) 2010 Nikolay Nemshilov
- */
-var Colorpicker = new Class(Observer, {
-  extend: {
-    EVENTS: $w('change show hide done'),
-    
-    Options: {
-      format:     'hex',   // hex or rgb
-      
-      update:     null,    // an element to update with the color text
-      updateBg:   null,    // an element to update it's background color
-      
-      fxName:     'fade',  // popup displaying fx
-      fxDuration: 'short',
-      
-      cssRule:    '*[rel^=colorpicker]'
-    },
-    
-    i18n: {
-      Done: 'Done'
-    },
-    
-    // builds or finds a colorpicker for the target element
-    find: function(element) {
-      var uid = $uid(element), instances = Colorpicker.instances;
-      
-      if (!instances[uid]) {
-        var pick = instances[uid] = new Colorpicker(eval('('+ element.get('data-colorpicker-options') +')'));
-        
-        if (element.tagName == 'INPUT')
-          pick.assignTo(element);
-        else {
-          var attr = Colorpicker.Options.cssRule.split('[').last().split('^=').first(),
-              match = /\[(.+?)\]/.exec(element.get(attr)), input;
-          
-          if (match && (input = $(match[1]))) {
-            pick.assignTo(input, element);
-          }
-        }
-      }
-      
-      return instances[uid];
-    },
-    
-    instances: []
-  },
-  
-  /**
-   * basic constructor
-   *
-   * @param Object options
-   */
-  initialize: function(options) {
-    this.$super(options);
-    this.init();
-  },
-  
-  /**
-   * Sets the color of the widget
-   *
-   * @param mixed value, Array or HEX or RGB value
-   * @return Colorpicker this
-   */
-  setValue: function(value) {
-    var color = isArray(value) ? value : this.toColor(value);
-    if (color && color.length == 3) {
-      
-      // normalizing the data
-      color = color.map(function(value) {
-        return this.bound((''+value).toInt(), 0, 255);
-      }, this);
-      
-      this.color = color;
-      this.color2tint().update();
-    }
-    return this;
-  },
-  
-  /**
-   * Returns the value of the widget
-   * formatted according to the options
-   *
-   * @param Boolean if you need a clean RGB values array
-   * @return mixed value
-   */
-  getValue: function(array) {
-    return array ? this.color : this[this.options.format === 'rgb' ? 'toRgb' : 'toHex']();
-  },
-  
-  /**
-   * Inlines the widget into the given element
-   *
-   * @param Element reference
-   * @param String optional position
-   * @return Colorpicker this
-   */
-  insertTo: function(element, position) {
-    this.element
-      .addClass('right-colorpicker-inline')
-      .insertTo(element, position);
-      
-    return this;
-  },
-  
-// protected
-
-  // initializes the widget
-  init: function() {
-    this.build();
-    
-    // attaching the mouse-events to the fields
-    [this.field, this.colors].each(function(element) {
-      element.onMousedown(this.startTrack.bind(this));
-    }, this);
-    
-    // tracking the changes on the input fields
-    [this.display, this.rDisplay, this.gDisplay, this.bDisplay].each('on', {
-      keyup: this.recalc.bind(this),
-      blur:  this.update.bind(this),
-      focus: this.cancelTimer.bind(this)
-    });
-    
-    // attaching the done button
-    this.button.onClick(this.fire.bind(this, 'done'));
-    
-    // preventing the general body clicks
-    this.element.onMousedown(function(event) {
-      if (event.target.tagName !== 'INPUT') {
-        event.stop();
-        this.cancelTimer();
-      }
-    }.bind(this));
-    
-    // attaching the picker own events
-    this
-      .onDone('hide')
-      .onChange(function(color) {
-        if (this.target) {
-          this.target[this.target.tagName == 'INPUT' ? 'value' : 'innerHTML'] = 
-            this[this.options.format == 'rgb' ? 'toRgb' : 'toHex']();
-        }
-      }.bind(this));
-    
-    // hooking up the elements to update
-    if (this.options.update)   this.assignTo(this.options.update);
-    if (this.options.updateBg) this.updateBg(this.options.updateBg);
-    
-    // setting up the initial value
-    // NOTE: to speed the things up a bit we use params
-    //       for tint, saturation and brightness and 
-    //       normal RGB value to keep the current color
-    this.tint   = [1, 0, 0];
-    this.satur  = 0;
-    this.bright = 1;
-    this.color  = [255, 255, 255];
-    
-    this.recalc().update();
-  },
-  
-  // builds the widget
-  build: function() {
-    var base = this.element = $E('div', {'class': 'right-colorpicker right-ui-panel'});
-    
-    // the field block
-    this.field = $E('div', {'class': 'field'}).insertTo(base);
-    this.fieldPointer = $E('div', {'class': 'field-pointer'}).insertTo(this.field);
-    
-    // the tint block
-    this.colors = $E('div', {'class': 'colors'}).insertTo(base);
-    this.colorsPointer = $E('div', {'class': 'colors-pointer'}).insertTo(this.colors);
-    
-    // the controls block
-    $E('div', {'class': 'controls'}).insert([
-      this.preview = $E('div', {'class': 'preview', 'html': ' '}).insertTo(base),
-      this.display = $E('input', {'type': 'text', 'class': 'display', maxlength: 7}).insertTo(base),
-      $E('div', {'class': 'rgb-display'}).insert([
-        $E('div').insert([$E('label', {html: 'R:'}), this.rDisplay = $E('input', {maxlength: 3, cIndex: 0})]),
-        $E('div').insert([$E('label', {html: 'G:'}), this.gDisplay = $E('input', {maxlength: 3, cIndex: 1})]),
-        $E('div').insert([$E('label', {html: 'B:'}), this.bDisplay = $E('input', {maxlength: 3, cIndex: 2})])
-      ]),
-      this.button  = $E('input', {'type': 'button', 'class': 'right-ui-button', value: Colorpicker.i18n.Done})
-    ]).insertTo(base);
-  },
-  
-  // updates the preview and pointer positions
-  update: function() {
-    this.field.style.backgroundColor   = 'rgb('+ this.tint.map(function(c) { return (c*255).round(); }) +')';
-    this.preview.style.backgroundColor = this.display.value = this.toHex();
-    
-    // updating the input fields
-    var color = this.color;
-    this.rDisplay.value = color[0];
-    this.gDisplay.value = color[1];
-    this.bDisplay.value = color[2];
-    
-    // adjusting the field pointer position
-    var pointer = this.fieldPointer.style,
-      field = this.field.sizes(),
-      top  = field.y - this.bright * field.y - 2,
-      left = this.satur * field.x - 2;
-    
-    pointer.top  = this.bound(top,  0, field.y - 5) + 'px';
-    pointer.left = this.bound(left, 0, field.x - 5) + 'px';
-    
-    // adjusting the ting pointer position
-    var field = this.colors.sizes(), tint = this.tint, position;
-  
-    if (tint[1] == 0) { // the red-blue section
-      position = tint[0] == 1 ? tint[2] : (2 - tint[0]);
-    } else if (tint[0] == 0) { // the blue-green section
-      position = 2 + (tint[2] == 1 ? tint[1] : (2 - tint[2]));
-    } else { // the green-red section
-      position = 4 + (tint[1] == 1 ? tint[0] : (2 - tint[1]));
-    }
-    
-    position = position / 6 * field.y;
-    
-    this.colorsPointer.style.top = this.bound(position, 0, field.y - 4) + 'px';
-    
-    // tracking the color change events
-    if (this.prevColor !== ''+this.color) {
-      this.fire('change', this.color);
-      this.prevColor = ''+ this.color;
-    }
-    
-    return this;
-  },
-  
-  // recalculates the state after the input field changes
-  recalc: function(event) {
-    if (event) {
-      var field = event.target, value = field.value, color = this.color.clone(), changed=false;
-      
-      if (field == this.display && /#\w{6}/.test(value)) {
-        // using the hex values
-        changed = color = this.toColor(value);
-      } else if (/^\d+$/.test(value)) {
-        // using the rgb values
-        color[field.cIndex] = value;
-        changed  = true;
-      }
-      
-      if (changed) this.setValue(color);
-      
-    } else {
-      this.tint2color();
-    }
-    
-    return this;
-  },
-  
-  // starts the mousemoves tracking
-  startTrack: function(event) {
-    event.stop();
-    this.stopTrack();
-    this.cancelTimer();
-    Colorpicker.tracking = this;
-    event.target.tracking = true;
-    this.trackMove(event); // jumping over there
-  },
-  
-  // stops tracking the mousemoves
-  stopTrack: function() {
-    Colorpicker.tracking = false;
-    this.field.tracking  = false;
-    this.colors.tracking = false;
-  },
-  
-  // tracks the cursor moves over the fields
-  trackMove: function(event) {
-    var field, pos = event.position(), top, left;
-    
-    if (this.field.tracking) {
-      field   = this.field.dimensions();
-    } else if (this.colors.tracking) {
-      field   = this.colors.dimensions();
-    }
-    
-    if (field) {
-      top   = this.bound(pos.y - field.top,  0, field.height);
-      left  = this.bound(pos.x - field.left, 0, field.width);
-      
-      if (this.field.tracking) {
-        this.satur  = left / field.width;
-        this.bright = 1 - top / field.height;
-        
-      } else if (this.colors.tracking) {
-        // preventing it from jumping to the top
-        if (top == field.height) top = field.height - 0.1;
-        
-        var step = field.height / 6,
-            tint = this.tint = [0, 0, 0],
-            stright = top % step / step,
-            reverse = 1 - stright;
-        
-        if (top < step) {
-          tint[0] = 1;
-          tint[2] = stright;
-        } else if (top < step * 2) {
-          tint[0] = reverse;
-          tint[2] = 1;
-        } else if (top < step * 3) {
-          tint[2] = 1;
-          tint[1] = stright;
-        } else if (top < step * 4) {
-          tint[2] = reverse;
-          tint[1] = 1;
-        } else if (top < step * 5) {
-          tint[1] = 1;
-          tint[0] = stright;
-        } else {
-          tint[1] = reverse;
-          tint[0] = 1;
-        }
-      }
-      
-      this.recalc().update();
-    }
-  }
-});
-
-/**
- * This module contains various caluculations logic for 
- * the Colorpicker widget
- *
- * Copyright (C) 2010 Nikolay Nemshilov
- */
-Colorpicker.include({
-  /**
-   * Converts the color to a RGB string value
-   *
-   * @param Array optional color
-   * @return String RGB value
-   */
-  toRgb: function(color) {
-    return 'rgb('+ this.color.join(',') +')';
-  },
-  
-  /**
-   * Converts the color to a HEX string value
-   *
-   * @param Array optional color
-   * @return String HEX value
-   */
-  toHex: function(color) {
-    return '#'+ this.color.map(function(c) { return (c < 16 ? '0' : '') + c.toString(16); }).join('');
-  },
-  
-  /**
-   * Converts a string value into an Array of color
-   *
-   * @param String value
-   * @return Array of color or null
-   */
-  toColor: function(in_value) {
-    var value = in_value.toLowerCase(), match;
-    
-    if (match = /rgb\((\d+),(\d+),(\d+)\)/.exec(value)) {
-      return [match[1], match[2], match[3]].map('toInt');
-      
-    } else if (/#[\da-f]+/.test(value)) {
-      // converting the shortified hex in to the full-length version
-      if (match = /^#([\da-f])([\da-f])([\da-f])$/.exec(value))
-        value = '#'+match[1]+match[1]+match[2]+match[2]+match[3]+match[3];
-        
-      if (match = /#([\da-f]{2})([\da-f]{2})([\da-f]{2})/.exec(value)) {
-        return [match[1], match[2], match[3]].map('toInt', 16);
-      }
-    }
-  },
-  
-  /**
-   * converts color into the tint, saturation and brightness values
-   *
-   * @return Colorpicker this
-   */
-  color2tint: function() {
-    var color = this.color.clone().sort(function(a,b) { return a-b; }),
-        min = color[0], max = color[2];
-    
-    this.bright = max / 255;
-    this.satur  = 1 - min / (max || 1);
-    
-    this.tint.each(function(value, i) {
-      return this.tint[i] = ((!min && !max) || min == max) ? i == 0 ? 1 : 0 :
-        (this.color[i] - min) / (max - min);
-    }, this);
-    
-    return this;
-  },
-  
-  /**
-   * Converts tint, saturation and brightness into the actual RGB color
-   *
-   * @return Colorpicker this
-   */
-  tint2color: function() {
-    var tint = this.tint, color = this.color;
-    
-    for (var i=0; i < 3; i++) {
-      color[i] = 1 + this.satur * (tint[i] - 1);
-      color[i] = (255 * color[i] * this.bright).round();
-    }
-    
-    return this;
-  },
-  
-  /**
-   * bounds the value to the given limits
-   *
-   * @param Number value
-   * @param Number min value
-   * @param Number max value
-   * @return Number the value in bounds
-   */
-  bound: function(in_value, min, max) {
-    var value = in_value;
-    
-    if (min < max) {
-      value = value < min ? min : value > max ? max : value;
-    } else {
-      if (value > max) value = max;
-      if (value < min) value = min;
-    }
-    
-    return value;
-  }
-});
-
-/**
- * This module handles the colorpicker assignments
- * to input fields
- *
- * Copyright (C) 2010 Nikolay Nemshilov
- */
-Colorpicker.include({
-  /**
-   * Hides the pop up element
-   *
-   * @return Colorpicker this
-   */
-  hide: function() {
-    if (!this.element.hasClass('right-colorpicker-inline')) {
-      this.target = null;
-      Colorpicker.current = null;
-      this.element.hide(this.options.fxName, {
-        duration: this.options.fxDuration
-      });
-      
-      this.fire('hide');
-    }
-    
-    return this;
-  },
-  
-  /**
-   * Shows the element as a popup
-   *
-   * @param Element where to show the popup
-   * @return Colorpicker this
-   */
-  show: function(target) {
-    // moving into the target position
-    if (target) {
-      var element = $(target).dimensions(), style = this.element.style;
-      
-      if (element) {
-        style.left = element.left + 'px';
-        style.top  = element.top + element.height + 'px';
-        
-        this.target = $(target);
-      }
-    }
-    
-    // hide the others
-    if (Colorpicker.current && Colorpicker.current !== this) {
-      Colorpicker.current.element.hide();
-    }
-    
-    this.element.insertTo(document.body);
-    
-    if (!this.element.visible()) {
-      this.element.show(this.options.fxName, {
-        duration: this.options.fxDuration
-      });
-      
-      this.fire('show');
-    }
-    
-    if (this.target) {
-      this.setValue(this.target.value);
-    }
-    
-    return Colorpicker.current = this;
-  },
-  
-  /**
-   * Toggles the visibility status
-   *
-   * @param Element target
-   * @return Colorpicker this
-   */
-  toggle: function(target) {
-    return this[this.element.visible() ? 'hide' : 'show'](target);
-  },
-  
-  /**
-   * Assigns the colorpicer to work in pair with an input of a content element
-   *
-   * @param Element reference
-   * @param Element optional trigger element
-   * @return Colorpicker this
-   */
-  assignTo: function(input, trigger) {
-    var input = $(input), trigger = $(trigger);
-    
-    if (trigger) {
-      trigger.onClick(function(e) {
-        e.stop();
-        this.toggle(input.focus());
-      }.bind(this));
-    } else {
-      input.onFocus(this.show.bind(this, input));
-    }
-    
-    input.on({
-      blur:  function() {
-        this.timer = (function() {
-          this.hide();
-        }).bind(this).delay(100);
-      }.bind(this),
-      
-      keyUp: function() {
-        this.setValue(input.value);
-      }.bind(this)
-    });
-    
-    this.element.hide();
-    
-    return this;
-  },
-  
-  /**
-   * Assigns the colorpicer to automatically update
-   * given element's background on changes
-   *
-   * @param mixed element reference
-   * @return Colorpicker this
-   */
-  updateBg: function(element_ref) {
-    var element = $(element_ref);
-    if (element) {
-      this.onChange(function(color) {
-        element.style.backgroundColor = this.toRgb();
-      }.bind(this));
-    }
-    return this;
-  },
-  
-// protected
-
-  cancelTimer: function() {
-    (function() { // IE has a lack of sync in here
-      if (this.timer) {
-        this.timer.cancel();
-        this.timer = null;
-      }
-    }).bind(this).delay(10);
-  }
-});
-
-/**
- * The document level hooks for colorpicker
- *
- * Copyright (C) 2010 Nikolay Nemshilov
- */
-document.on({
-  mouseup: function() {
-    if (Colorpicker.tracking) {
-      Colorpicker.tracking.stopTrack();
-    }
-  },
-  
-  mousemove: function(event) {
-    if (Colorpicker.tracking) {
-      Colorpicker.tracking.trackMove(event);
-    }
-  },
-  
-  mousedown: function(event) {
-    var picker = Colorpicker.current, target = event.target;
-    
-    if (picker && target != picker.target && ![target].concat(target.parents()).include(picker.element)) {
-      picker.hide();
-    }
-  }
-});
-
-window.on('blur', function() {
-  if (Colorpicker.tracking) {
-    Colorpicker.tracking.stopTrack();
-  }
-});
-
-// colorpickers autodiscovery feature
-Colorpicker.Options.cssRule.on({
-  focus: function(event) {
-    if (this.tagName == 'INPUT') {
-      Colorpicker.find(this).show(this);
-    }
-  },
-  
-  click: function(event) {
-    var attr = Colorpicker.Options.cssRule.split('[').last().split('^=').first(),
-        match = /\[(.+?)\]/.exec(this.get(attr)), input;
-
-    if (match && (input = $(match[1]))) {
-      event.stop();
-      
-      Colorpicker.find(this).show(input);
-    }
-  }
-});
-document.write("<style type=\"text/css\">div.right-colorpicker,div.right-colorpicker*{border:none;background:none;width:auto;height:auto;position:static;float:none;top:none;left:none;right:none;bottom:none;margin:0;padding:0;display:block;font-weight:normal;vertical-align:center}div.right-colorpicker{position:absolute;padding:.6em;background:#EEE;border:1px solid #CCC;-moz-border-radius:.2em;-webkit-border-radius:.2em;-moz-box-shadow:#AAA .3em .3em .4em;-webkit-box-shadow:#AAA .3em .3em .4em;z-index:9999}div.right-colorpicker div.field,div.right-colorpicker div.field-pointer,div.right-colorpicker div.colors,div.right-colorpicker div.colors-pointer{background:url(/images/rightjs-ui/colorpicker.png) no-repeat 0 0}div.right-colorpicker div.field,div.right-colorpicker div.colors,div.right-colorpicker div.controls{display:inline-block;*display:inline;*zoom:1;position:relative;vertical-align:top;height:150px}div.right-colorpicker div.field-pointer,div.right-colorpicker div.colors-pointer{position:absolute;top:0px;left:0;width:9px;height:9px}div.right-colorpicker input.display,div.right-colorpicker div.preview,div.right-colorpicker div.rgb-display,div.right-colorpicker input.right-ui-button{font-size:100%;display:block;width:auto;padding:0 .2em}div.right-colorpicker input.display,div.right-colorpicker div.preview,div.right-colorpicker div.rgb-display input,div.right-colorpicker input.right-ui-button{border:1px solid #AAA;-moz-border-radius:.2em;-webkit-border-radius:.2em}div.right-colorpicker div.field{width:150px;background-color:red;cursor:crosshair;margin-right:1.2em}div.right-colorpicker div.field-pointer{background-position:-170px 0;margin-left:-2px;margin-top:-2px}div.right-colorpicker div.colors{width:16px;background-position:-150px 0;border-color:#EEE;cursor:pointer;margin-right:.6em}div.right-colorpicker div.colors-pointer{cursor:default;background-position:-170px -20px;margin-left:-8px;margin-top:-3px}div.right-colorpicker div.controls{width:5em}div.right-colorpicker div.preview{height:2em;background:white;border-color:#BBB}div.right-colorpicker input.display{margin-top:.5em;background:#FFF;width:4.5em}div.right-colorpicker div.rgb-display{padding:0;text-align:right;margin-top:.5em}div.right-colorpicker div.rgb-display label{display:inline}div.right-colorpicker div.rgb-display input{vertical-align:top;font-size:100%;width:2em;text-align:right;margin-left:.2em;padding:0 .2em;background:#FFF;margin-bottom:1px;display:inline}div.right-colorpicker input.right-ui-button{cursor:pointer;position:absolute;bottom:0;width:5em;background:#CCC}div.right-colorpicker-inline{display:inline-block;*display:inline;*zoom:1;position:relative;-moz-box-shadow:none;-webkit-box-shadow:none;z-index:auto}</style>");