(function () {

    TRAVEL.BookingExtras = function (target, bookingModel) {

        var root = target;
        var self = this;

        var assets = TRAVEL.Assets.Booking;

        var model = bookingModel;

        this.create = function () {

            var arr = [
                '<div id="#root" class="extras-body">',
                    '<h3>', assets.extrastitle, '</h3>',
                    '<div id="#extras" class="extra-items">', '</div>',
                '</div>'
            ];

            var h = $.template(arr.join(''), root, 'append');

            for (var i = 0; i < model.data.extras.length; i++) {
                var extraArr = [
                    '<div class="extra-item clearer">',
                        '<div class="extra-item-wrapper">',
                            '<div class="extra-item-body">',
                                '<div class="extra-item-info">',
                                    '<h4>', model.data.extras[i].name, '</h4>',
                                    TRAVEL.para(model.data.extras[i].info.descrWhat),
                                '</div>',
                                '<div class="extra-item-quantity">',
                                    '<input type="text" id="#q" class="incdec" />',
                                '</div>',
                                '<div class="extra-item-price">',
                                    '<span id="#price"></span>',
                                '</div>',
                            '</div>',
                        '</div>',
                        '<div class="extra-item-image">',
                            '<img src="',
                                model.data.extras[i].pic !== undefined ? model.data.extras[i].pic : baseUrl + 'new-i/s.gif',
                                '" alt="' + model.data.extras[i].name + '" />',
                        '</div>',
                    '</div>'
                ];

                var hrow = $.template(extraArr.join(''), h.extras, 'append');

                $(hrow.q).incdec({min: 0, max: model.data.extras[i].quantity});

                (function (i) {
                    hrow.q.onchange = function () {
                        var value = parseInt(this.value, 10);
                        if (isNaN(value))
                            value = 0;
                        if (value < 0)
                            value = 0;
                        if (value > model.data.extras[i].quantity)
                            value = model.data.extras[i].quantity;
                        //value = (isNaN(value)) ? 0 : ((value < 0) ? 0 : ((value > model.data.extras[i].quantity) ? model.data.extras[i].quantity : value));
                        this.value = value;

                        model.extras[i].q = value;
                        model.notify("modelChanged");
                    };

                    model.attachObserver("displayModel", function (model) {
                        hrow.q.value = model.extras[i].q;
                        hrow.price.innerHTML = TRAVEL.formatMoney(model.extras[i].p, true, true);
                    });
                })(i);
            }

            if (model.data.extras.length == 0)
                $(h.root).hide();
        };

        TRAVEL.Observable2(this);

        return self;
    };
    
})();