Object.extend(String.prototype, {
    ensureEndsWith: function(str) {
      return this.endsWith(str) ? this : this + str;
    },
    px: function() {
      return this.ensureEndsWith("px");
    }
});

Object.extend(Number.prototype, {
    px: function() {
        return this.toString().px();
    }
});

(function() {
    UI = {};
    UI.Scroller = Class.create({
        area: {},
        container: {},
        options: {},
        width: 0,
        data: [],
        
        
        initialize: function(container, area, data, options){
            
            this.container = $(container);
            this.area = $(area);
            this.data = data;
            this.options = Object.extend({
                label: "цена:",
                width: false
            },options);
            
            if(!this.options.width){
                this.options.width = this.container.getDimensions().width;
            }else{
                this.container.setStyle({width: this.options.width.px()});
            }

            
            var placeholders = [];

            data.each(function(m, i){
                
                var model = Object.extend({
                    width: 200,
    		        model: "",
    		        placeholders: []
                }, m);
                
                var result = new Element("div", {className: "ui-model"});
                result.setStyle({backgroundImage: "url(" + model.model + ")", width: model.width.px() });
                result.setStyle({width: model.width.px() });
                
                if(Prototype.Browser.IE){
                    result.setStyle({
                        backgroundImage: "none",
                        filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + model.model + "', sizingMethod='crop')"
                    });
                }
                
                if(model.placeholders.size() > 0){
                    model.placeholders.each(function(p){
                        placeholders.push({p: p, w: this.width});
                    }.bind(this));
                }
                this.area.insert(result);
                this.width += result.getDimensions().width;
            }.bind(this));

            this.area.insert(new Element("div", {style: "clear: both;"}));
            
            placeholders.each(function(p){
                this.area.insert(this.placeholder(p.p, p.w));
            }.bind(this));
            
            this.area.setStyle({width: this.width.px()});
            this.scroll();
            
            $(window).onresize = function(){
                this.options.width = this.container.getDimensions().width;
            }.bind(this);
        },
        
        placeholder: function(p, offset){
            var placeholder = 
                new Element("div", 
                    {className: "ui-placeholder"}
                ).setStyle(
                    {top: p.y.px(), left: (p.x + offset).px()}
                ).insert(
                    new Element("div",
                        {className: "ui-name"}
                    ).insert(new Element("a",
                                {className: "ui-url", href: p.url}
                            ).update(p.name)
                    )
                ).insert(
                    new Element("div",
                        {className: "ui-price"}
                    ).update(this.options.label + " " + p.price)
                );
            if(p.color){
                placeholder.setStyle({backgroundColor: p.color});
            }
            return placeholder;
        },
        
        calculateScroll: function(e) {
            return ((this.width  / this.options.width)) * Math.abs(e.clientX - this.container.cumulativeOffset()[0]);
        },

        scroll: function(){
        	$(this.container).observe("mousemove", function(event){
                this.container.scrollLeft = this.calculateScroll(event);
        	}.bind(this));
        }
    });
})();