/**
 * New style of "Favorites"
 */

(function () {

    var assets;
    // hardcoded width of favorite item
    var itemWidth = 263;

    TRAVEL.Favorites = function (target) {

        var self = TRAVEL.Observable2(this);
        var root = target;

        assets = TRAVEL.Assets.Favorites;


        function itemGetter(obj) {

            var collections = ['products', 'producers', 'destinations', 'sweetspots'];
            var cur, pos;

            obj.reset = function () {
                pos = 0;
                for (cur = 0; cur < collections.length; cur++) {
                    var temp = obj[collections[cur]];
                    if (temp && temp.length > 0) {
                        break;
                    }
                }
            };

            obj.next = function () {
                var type, col;
                var item = null;
                var entity;

                if (cur < collections.length) {

                    type = collections[cur];
                    col = obj[type];

                    if (col && col.length > 0) {
                        item = col[pos];
                        pos++;
                        entity = {'item': item, 'type': type};
                    }

                    while (cur < collections.length && ((col && pos >= col.length) || !col)) {
                        cur++;
                        pos = 0;
                        type = collections[cur];
                        col = obj[type];
                    }
                }

                return (item ? entity : null);
            };

            return obj;
        }

        function renderFavorites (model) {
            var width, xCount, yCount, total;
            var i, j;
            var obj = [], entity;

            // extend favorites model with iterator
            model = itemGetter(model);

            $(root).empty();
            width = $(root).width();

            total = 0;
            if (model.products) {
                total += model.products.length;
            }
            if (model.producers) {
                total += model.producers.length;
            }
            if (model.destinations) {
                total += model.destinations.length;
            }
            if (model.sweetspots) {
                total += model.sweetspots.length;
            }

            obj.push('<h1 class="title">', assets.title, '</h1>');

            if (total > 0) {
                xCount = Math.floor(width / itemWidth);
                xCount = (xCount < 1) ? 1 : xCount;
                yCount = Math.ceil(total / xCount);

                obj.push('<table class="grid"><tbody>');

                model.reset();
                for (j = 0; j < yCount; j++) {
                    obj.push('<tr>');
                    for (i = 0; i < xCount; i++) {
                        entity = model.next();
                        obj.push('<td class="cell">');
                        if (entity) {

                            obj.push('<div class="cell ', entity.type, '" id="', entity.type + '-' + entity.item.id, '">',
                                    '<div class="cell-wrapper" >',
                                        '<a href="', entity.item.link, '">',
                                            '<img alt="" src="', entity.item.picSrc.replace('hitlist', 'favorites'), '" />',
                                        '</a>',
                                        '<div class="remove-cell"></div>',
                                    '</div>',
                                    '<h1><a href="', entity.item.link, '">', entity.item.name, '</a></h1>',
                                    (entity.type === 'producers' ? '<h3>' + assets.producertip + '<h3>' : ''),
                                    (entity.type === 'sweetspots' ? '<h3>' + assets.sweetspottip + '<h3>' : ''),
                                    (entity.type === 'destinations' ? '<h3>' + assets.destinationtip + '<h3>' : ''),
                                '</div>'
                            );

                        } else {
                            obj.push('&nbsp;');
                        }
                        obj.push('</td>');
                    }
                    obj.push('</tr>');
                }

                obj.push('</tbody></table>');

            } else {
                obj.push('<p>', assets.nofavorites, '</p>');
            }

            $(root).append(obj.join(''));

            $('div.remove-cell', root).click(function () {
                var type = {'products': 'prdct', 'producers': 'prdc', 'destinations': 'dest', 'sweetspots': 'spot'};
                var data = this.parentNode.parentNode.id.split('-');

                if (type[data[0]] && data[1] > 0) {
                    var ajax = baseUrl + "ajaxCommand.service?command=travel.DeleteFavoriteCommand";
                    TRAVEL.getJSON(ajax, {"type": type[data[0]], "id": data[1]}, function (m) {
                        self.notify('refreshList', m);
                    });
                }
            });

            if (typeof model.count !== 'undefined') {
                $('#favCounter').text(model.count);
            }
        }

        this.create = function (model) {
            // shedule render on document ready
            $(document).ready(function () {
                renderFavorites(model);
            });

            self.attachObserver('refreshList', function (m) {
                renderFavorites(m);
            });

        };
    };
})();