var Badge = new Class({
options: {
icon: false,
iconOptions: {},
action: false,
className: 'badge',
extraClassName: false,
size: 16,
dir: false,
adopt: false,
replaces: false,
tip: true,
tipId: 'buttonTip',
properties: {}
},
Implements: [Options],
initialize: function(options){
if($type(options) == 'string'){
if($(options).get('tag') == 'a')
this.options.adopt = options;
else
this.options.replaces = options;
}
else
this.setOptions(options);

if(!this.options.adopt)
this.element = new Element('a');
else if(this.options.adopt)
this.element = $(this.options.adopt);//.set(this.options.properties);
if(this.options.replaces){
var props = $(this.options.replaces).getProperties('id', 'class', 'html');
this.element.replaces($(this.options.replaces)).set(props);
}
this.element.set(this.options.properties);
if(this.options.icon){
icon = this.options.icon;
this.element.addClass(icon);
}
else icon = this.element.className.split(' ')[0];
this.setIcon(icon);
if(this.options.extraClassName)
this.element.addClass(this.options.extraClassName);
this.text = this.options.properties.text || this.element.get('text') || this.element.title;
this.setTip();
this.setButton();
['inject', 'replaces', 'injectTop', 'injectBefore', 'injectAfter', 'dispose'].each(function(method){
this[method] = this.element[method].bind(this.element);
}, this);
},
setIcon: function(icon){
this.icon = new Icon($merge({
icon: icon,
size: this.options.size
}, this.options.iconOptions));
if(this.element.retrieve('icon'))
this.icon.replaces(this.element.retrieve('icon'));
else
this.icon.injectTop(this.element);
this.element.store('icon', this.icon);
},
setButton: function(){
this.element.set({
events: {
'focus': function(){ this.blur(); }
},
styles: {
width: this.options.size,// + 8,
height: this.options.size// + 8
}
});
if(this.options.action)
this.element.addEvent('click', (function(e){
e.preventDefault();
this.options.action();
}).bind(this));
this.element.addClass(this.options.className + ' ' + this.options.className + this.options.size);
},
setTip: function(){
if(this.options.tip){
if(this.options.dir && this.options.dir == 'Bottom')
return this.element.tip({
x: -18 + (this.options.size / 2),
dir: this.options.dir,
id: this.options.tipId,
msg: this.text
});
else
return this.element.tip({
x: -18 + (this.options.size / 2),
y: 5,
id: this.options.tipId,
msg: this.text
});
}
else $empty;
}
});
var Button = new Class({
Extends: Badge,
options: {
extraClassName: 'flat',
className: 'button',
tip: false
},
initialize: function(options){
this.parent(options);
this.element.setStyles({
width: 'auto',
height: this.options.size + 8
});
},
setLabel: function(icon, txt){
this.setIcon(icon);
var txt = document.createTextNode(txt);
this.element.replaceChild(txt, this.element.lastChild);
this.element.appendChild(txt);
}
});
var Icon = new Class({
Implements: [Options, Events],
options: {
file: '/asset/img/icon/{size}.png',
size: 16,
auto: true,
icons: [
['tag', 'close', 'onair', 'tool', 'save', 'search', 'home', 'up', 'down', 'move', 'back', 'copy', 'edit', 'new', 'basket', 'today', 'order', 'maximize', 'restore', 'trash', 'recycle', 'colorpicker', 'zoom', 'fullscreen'],
['image', 'video', 'geo', 'text', 'richtext', 'audio', 't3d', 'multimedia', 'unknown', 'cal', 'pdf', 'list', 'calc'],
['bus', 'smoke', 'eco', 'health', 'kids', 'service', 'gas', 'parking', 'post', 'food', 'restaurant', 'coffee', 'bar', 'park', 'pet', 'wildlife', 'camp', 'fire', 'accessible', 'shop'],
['share', 'phone', 'mail', 'people', 'friend', 'forum', 'comment', 'facebook', 'yahoo', 'youtube', 'picassa', 'myspace', 'technorati', 'digg', 'flickr', 'dailymotion', 'twitter'],
['warning', 'error', 'info', 'idea', 'bug']
],
tip: false,
color: false
},
initialize: function(options){
this.setOptions(options);
this.file = this.options.file.substitute(this.options);
this.options.icons.each(function(line, i){
var iconIndex = line.indexOf(this.options.icon);
if(iconIndex != -1){
this.j = iconIndex;
this.i = i;
}
}, this);
this.element = this.options.adopt || new Element('span');
this.element.set($merge({
'class': 'icon icon-' + this.options.size,
styles: {
display: 'block',
width: this.options.size,
height: this.options.size
}
}, this.options.properties));
if(this.options.auto){
this.setSrc(this.file);
this.setPosition('-' + (this.j * this.options.size) + 'px -' + (this.i * this.options.size) + 'px');
}
this.options.color ? this.element.setStyle('background-color', this.options.color) : '';
['inject', 'replaces', 'injectTop', 'injectBefore', 'injectAfter'].each(function(method){
this[method] = this.element[method].bind(this.element);
}, this);
},
toElement: function(){
return this.element;
},
setSrc: function(url){
new Asset.image(url, {
onload: (function(){
this.element.setStyle('background-image', 'url(' + url + ')');
this.fireEvent('iconLoad', this.element);

}).bind(this)
});
},
setPosition: function(pos){
this.element.setStyle('background-position', pos);
}
});
var ThumbNail = new Class({
Extends: Icon,
options: {
size: 40
},
initialize: function(filename, options){
this.setOptions(options);
this.filename = filename;
var tmpSize = this.options.size;
this.filetype = getFileType(filename).type;
this.extension = getFileType(filename).extension;
var auto = this.filetype != 'image' && this.filetype != 'video';
this.setOptions({
auto: auto,
icon: this.filetype
});
if(!$defined(options)) options = {
size: this.options.size
};
if(this.filetype != 'video' && this.filetype != 'image'){
options.size = options.size > 40 ? 40 : options.size;
}
this.parent(options);
this.setIcon();
if(this.filetype != 'video' && this.filetype != 'image'){
var el = new Element('span', {
'class': 'icon icon-' + tmpSize,
styles: {
display: 'block',
width: tmpSize,
height: tmpSize
}
}).adopt(this.element.setStyle('margin',  (tmpSize - options.size) / 2));
el.addClass('type-' + this.filetype);
['inject', 'replaces', 'injectTop', 'injectBefore', 'injectAfter'].each(function(method){
this[method] = el[method].bind(el);
}, this);
}
this.element.addClass('type-' + this.filetype);
},
setIcon: function(){
this.filename = this.filename.split('?')[0];
switch(this.filetype){
case 'image':
this.setSrc(this.filename.replace(eval('/\.' + this.extension + '$/'), '_' + this.options.size + 'x' + this.options.size + '.' + this.extension));
break;
case 'video':
this.setSrc(this.filename.replace(eval('/\.' + this.extension + '$/'), '_' + this.options.size + 'x' + this.options.size + '.jpg'));
break;
default:break;
}
}
});