(function () {

    TRAVEL.ProducerHitListElement = function (target) {

        var assets = TRAVEL.Assets.ProducerList;

        var self;
        var root;
        var data;

        var element, divItembody;

        var showFull = function () {
            $(divItembody).removeClass("compact");
            $(divItembody).addClass("full");
        };

        var showShort = function () {
            $(divItembody).removeClass("full");
            $(divItembody).addClass("compact");
        };

        this.create = function (model) {

            data = model;

            var arr = [
                '<div class="item clearer">',
                    '<div class="item-wrapper">',
                        '<div class="item-body compact">',
                            '<div class="item-min-height">',
                                '<div class="column-text">',
                                    '<h2 class="item-name icons"><a href="', model.link, '">', model.name, '</a></h2>',
                                    '<div class="item-location">',
                                        '<a href="', model.citylink, '">', model.city, '</a>, <a href="', model.provincelink, '">', model.province, '</a>',
                                    '</div>',
                                    '<div class="item-description">', TRAVEL.para(data.info), '</div>',
                                '</div>',
                                '<div class="column"><div class="column-wrapper">',
                                    '<div class="common">',
                                        '<h3>', assets.contactinformation, ':</h3>',
                                        '<p>', model.zip, ', ', model.city, ', ', model.address ,'</p>',
                                        (model.phone? '<p>tel: '+model.phone+'</p>' : ''),
                                    '</div>',
                                    '<div class="item-product-link"><a href="', model.link, '#products"><span>', assets.products, '</span></a></div>',
                                '</div></div>',
                                '<div class="item-rating readonly"></div>',
                                '<div class="item-links clearer">',
                                    '<div class="item-description-mode">',
                                        '<div class="full-mode"><span>', assets.moreinfo, '</span>&nbsp;&darr;</div>',
                                        '<div class="compact-mode"><span>', assets.lessinfo, '</span>&nbsp;&uarr;</div>',
                                    '</div>',
                                '</div>',
                            '</div>',
                        '</div>',
                    '</div>',
                    '<div class="item-image">',
                        '<a href="', model.link, '">',
                            '<img src="', model.picSrc, '" alt="', model.name, '" />',
                        '</a>',
                    '</div>',
                '</div>'
            ];

            element = $(arr.join('')).get(0);

            divItembody = element.firstChild.firstChild;

            $('div.item-rating', element).starrating( { value: model.rating, voters: model.voters } );

            $('div.item-links .full-mode', element).click(showFull);
            $('div.item-links .compact-mode', element).click(showShort);

            showShort();

            root.appendChild(element);
        };

        self = this;
        root = target;
    };

})();