some css for textareas

build/css/ox.ui.classic.css

@@ -69,6 +69,7 @@ Forms
 .OxThemeClassic .OxButton,
 .OxThemeClassic input.OxCheckbox,
 .OxThemeClassic input.OxInput,
+.OxThemeClassic textarea,
 .OxThemeClassic .OxLabel,
 .OxThemeClassic .OxTrack {
     border: 1px solid rgb(176, 176, 176);
@@ -162,7 +163,9 @@ Forms
     background: rgb(224, 224, 224);
 }
 
-
+.OxThemeClassic textarea {
+    background: rgb(240, 240, 240);
+}
 
 /*
 ================================================================================
@@ -204,7 +207,7 @@ Lists
     -moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
     -webkit-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
 }
-.OxThemeModern .OxIconList .OxItem > .OxText > div > .OxInfo {
+.OxThemeClassic .OxIconList .OxItem > .OxText > div > .OxInfo {
     color: rgb(128, 128, 128);
 }
 

build/js/ox.ui.js

@@ -177,7 +177,6 @@ requires
             }
 
             function loadImages(callback) {
-                window.OxImageCache = [];
                 $.getJSON(oxui.path + 'json/ox.ui.images.json', function(data) {
                     var counter = 0,
                         length = data.length;
@@ -187,7 +186,6 @@ requires
                         image.onload = function() {
                             (++counter == length) && callback();
                         }
-                        window.OxImageCache.push(image);
                     });
                 });
             }
@@ -2993,7 +2991,7 @@ requires
                 width: self.inputWidth + 'px',
                 textAlign: self.options.textAlign
             }, self.options.type == 'textarea' ? {
-                height: self.options.height + 'px'
+                height: self.options.height + 'px',
             } : {}))
             .val(self.options.value)
             .blur(blur)
@@ -3001,6 +2999,34 @@ requires
             .focus(focus)
             .appendTo(that.$element);
 
+        // fixme: is there a better way than this one?
+        if (self.options.type == 'textarea') {
+            $.extend(self, {
+                colors: Ox.theme() == 'classic' ?
+                    [208, 232, 244] :
+                    [0, 16, 32],
+                colorstops: [8 / self.options.height, self.options.height - 8 / self.options.height]
+            });
+            self.$input.css({
+                background: '-moz-linear-gradient(top, rgb(' +
+                    [self.colors[0], self.colors[0], self.colors[0]].join(', ') + '), rgb(' +
+                    [self.colors[1], self.colors[1], self.colors[1]].join(', ') + ') ' + 
+                    Math.round(self.colorstops[0] * 100) + '%, rgb(' +
+                    [self.colors[1], self.colors[1], self.colors[1]].join(', ') + ') ' + 
+                    Math.round(self.colorstops[1] * 100) + '%, rgb(' +
+                    [self.colors[2], self.colors[2], self.colors[2]].join(', ') + '))' 
+            });
+            self.$input.css({
+                background: '-webkit-gradient(linear, left top, left bottom, from(rgb(' +
+                    [self.colors[0], self.colors[0], self.colors[0]].join(', ') + ')), color-stop(' +
+                    self.colorstops[0] + ', ' + 'rgb(' +
+                    [self.colors[1], self.colors[1], self.colors[1]].join(', ') + ')), color-stop( ' + 
+                    self.colorstops[1] + ', ' + 'rgb(' +
+                    [self.colors[1], self.colors[1], self.colors[1]].join(', ') + ')), to(rgb(' +
+                    [self.colors[2], self.colors[2], self.colors[2]].join(', ') + ')))'
+            });
+        }
+
         if (self.hasPasswordPlaceholder) {
             self.$input.hide();
             self.$placeholder = $('<input>')
@@ -10692,103 +10718,6 @@ requires
 
     };
 
-    Ox.Flipbook = function(options, self) {
-
-        var self = self || {},
-            frame = $('<img>').css({
-                                'position': 'absolute',
-                                'width': '100%',
-                                'height': 'auto'
-                               })
-                              .hide(),
-            icon = $('<img>').css({
-                                'position': 'absolute',
-                                'width': '100%',
-                                'height': 'auto'
-                             }),
-            frames = {},
-            timestamp = $('<div>').css({
-                                    'position': 'absolute',
-                                    'text-align': 'center',
-                                    'width': '100%',
-                                })
-                                .hide(),
-            that = new Ox.Element('div', self)
-                .defaults({
-                    frames: {},
-                    duration: 0,
-                    icon: '',
-                })
-                .options(options || {})
-                .append(icon)
-                .append(frame)
-                .append(timestamp)
-                .mouseover(function() {
-                    frame.show();
-                    timestamp.show();
-                    icon.hide();
-                })
-                .mousemove(function(event) {
-                    var position = getPosition(event),
-                        image = getFrame(position),
-                        frameHeight = image.height;
-                    frame.attr('src', image.src);
-                    timestamp.html(Ox.formatDuration(position, 'short'));
-                    
-                    var height = (that.height() - frameHeight)/2;
-                    frame.css({'top': height + 'px'});
-                    timestamp.css({'top': (frameHeight + height) + 'px'});
-                })
-                .mouseout(function() {
-                    frame.hide();
-                    timestamp.hide();
-                    icon.show();
-                })
-                .mousedown(function(event) {
-                    that.triggerEvent('click', {
-                        'position': getPosition(event)
-                    });
-                });
-        
-        function getPosition(event) {
-            var position = Math.floor(event.clientX - that.offset().left);
-            position = (position / that.width()) * self.options.duration;
-            return position;
-        }
-
-        function getFrame(position) {
-            var frame;
-            $.each(frames, function(i, img) {
-                if(!frame || i <= position)
-                    frame = img;
-            });
-            return frame;
-        }
-
-        function cacheFrames() {
-            $.each(self.options.frames, function(i, src) {
-                frames[i] = new Image();
-                frames[i].onload = function() {
-                    frameHeight = frames[i].height / frames[i].width * that.width();
-                }
-                frames[i].src = src;
-            });
-        }
-        
-        self.onChange = function(key, value) {
-            if (key == 'frames') {
-                cacheFrames();
-            } else if (key == 'icon') {
-                icon.attr('src', value);
-            }
-        }
-
-        if(options.icon)
-           icon.attr('src', options.icon); 
-        cacheFrames();
-        return that;
-    };
-
     Ox.LargeTimeline = function(options, self) {
 
         var self = self || {},