var AttractionsView = Class.create({
    initialize: function() {
        this.numItems = 10;
        this.sortType = 'name';
        this.sortDirection = 'asc';
        this.isShowResults = false;
        this.curItemTypeFlag = false;
        this.pageContent = '';
    },
    assign: function(key, value) {
        this[key] = value;
        return this;
    },
    updateTitle: function() {
        return this;
    },
    updateHeader: function(params) {
        console.log('AttractionsView::updateHeader');
        $('sortType').enable();
        $('num-rows').update(this.numItems);
        this.updateActivityFilter();
        return this;
    },
    drawPage: function() {
        console.log('AttractionsView::drawPage');
        table = '<table id="accom_results" cellpadding=0 cellspacing=0 border=0 width="100%">'
              + this.pageContent
              + '</table>';
        $('results-container').update(table);
        PrimaryLayout.getInstance().renderBottomLinks();
    },
    buildItem: function() {
        console.log('AttractionsView::buildItem');

        var params = new Hash({image: this.image, description: this.description});

        params.set('location', this.location.replace(/[^a-zA-Z0-9]+/g, '-').toLowerCase());
        
        params.set('section', $F('section'));

        breakLine = '<tr><td colspan="2" style="width: 460px;"><center>'
                  + $('other_products').innerHTML
                  + '</center></td></tr>';
    
        itemLayout = '<tr><td class="h" style="padding: 3 5; width: 332px;">';
        
        if (this.image) {
            itemLayout += '<a href="#{ppc_url}" target="_blank" style="float: left; margin:0 10px 0 0;">'
                        + '<div class="atraction_pic" style="background-image: url(/publicMedia#{image})"></div>'
                        + '</a>';
        } else {
            itemLayout += '<div class="atraction_pic" style="float: left; margin:0 10px 0 0; background-image: url(/common/i/attractions/no_pic.gif)"></div>'; 
        }
        
        var descriptionWidth = '232';
        
        params.set('descriptionWidth', descriptionWidth);
        
        itemLayout += '<div style="float: left; width: #{descriptionWidth}px;">'
                    + '<a href="#{ppc_url}" target="_blank"><strong>#{name}</strong></a>'
                    + '<span class="city"></span>'
                    + '#{description}..... '
                    + '<a href="/#{section}-in-#{location}/#{linkToDetails}" class="attraction_more">more</a>'
                    + '</div></td><td class=price style="width: 128px;">'
                    + '<span class=pr1>';
        if (this.isCommercial) {
            if (this.vendor) {
                params.set('logo', this.getVendorLogoByAlias(this.vendor.alias));
                params.set('vendorName', this.vendor.caption);
                itemLayout += '<div class="logo_link">'
                            + '<a href="#{ppc_url}" target="_blank">'
                            + '<img src="#{logo}" border=0 alt="#{vendorName}">';
            } else {
                itemLayout += '<div class="direct_link">'
                            + '<a href="#{ppc_url}" target="_blank">'
                            + 'DIRECT';
            }
            itemLayout += '</a></div>';
 
        } else {
            if (this.url.blank()) {
                this.url = 'http://atdw.com.au';    
            }
            itemLayout += '<div class="atdw_link">'
                        + '<a target="_blank" href="#{ppc_url}">ATDW</a>'
                        + '</div>'; 
        }
             
        itemLayout += '<div><a href="#{ppc_url}" target="_blank">'
                    + '<img src="/images/home/bt_go.gif" width=42 height=17 border=0 alt="GO">'
                    + '</a>'
                    + '<br>'
                    + '<span style="price_link">'
                    + '<a href="#{ppc_url}" target="_blank">#{price}</a>'
                    + '</span>'
                    + '</div>';              
                    + '</span><br></td></tr>';

        if (this.price != '0.00') {
            var price = this.currencySymbol + this.price;
        } else {
            var price = 'N/A'; 
        }
        
        params.set('price', price);
        
        var ppcVars = {area: $F('section'), supplier_id: this.vendorId, 
                       redirect: this.url};
        params.set('ppc_url', '/ppc.php?' + $H(ppcVars).toQueryString());

        var linkToDetails = this.name.replace(/[-]+/g, 'd')
                                     .replace(/[^a-zA-Z0-9]+/g, '-')
                                     .toLowerCase() + '.html';
        params.set('linkToDetails', linkToDetails);
        
        params.set('name', this.name.replace(/[^a-zA-Z0-9\s/'/&-]+/g, ''));
        
        if (!this.isCommercial) {
            if (this.curItemTypeFlag == true) {
                this.pageContent += breakLine;
            }
        }
        
        this.curItemTypeFlag = this.isCommercial;
                
        this.pageContent += new Template(itemLayout).evaluate(params);
    },
    clearPage: function() {
        console.log('AttractionsView::clearPage');
        this.pageContent = '';
        $('results-container').update('');
    },
    showResults: function() {
        console.log('AttractionsView::showResults');
        if (this.isShowResults) {
            return;
        }
        this.isShowResults = true;
        
        $('results').show();
        $('searching_page').hide();
        
        clearTimeout(this.switchLogoTimeoutHandler);
        
        return this;
    },
    showSortDirectionDropdown: function() {
        $('sortDirection').show();
    },
    hideSortDirectionDropdown: function() {
        $('sortDirection').hide();
    },
    updatePaging: function() {
        console.log('AttractionsView::updatePaging');
        
        var itemsInRow = 10;
        var intervalsNum = Math.ceil(this.numPages / itemsInRow);
        var curInterval = Math.ceil(this.curPage / itemsInRow);
        var intervalStart = ((curInterval - 1) * itemsInRow) + 1;
        var intervalEnd = curInterval == intervalsNum ? this.numPages : curInterval * itemsInRow;
        
        ['top', 'bottom'].each(function(alias) {
            if (this.numItems > this.itemsPerPage * itemsInRow) {
                if (curInterval == 1) {
                    $(alias + 'PrevNav').hide();
                    $(alias + 'NextNav').show();
                } else if (curInterval == intervalsNum) {
                    $(alias + 'PrevNav').show();
                    $(alias + 'NextNav').hide();
                } else {
                    $(alias + 'PrevNav').show();
                    $(alias + 'NextNav').show();
                }
                
                var nextPage = intervalEnd + 1;
                var prevPage = intervalStart - itemsInRow;
                
                $(alias + 'NextNav').stopObserving('click');
                $(alias + 'PrevNav').stopObserving('click');
                
                goToNextPage = window.atFront.setPage.bind(window.atFront, nextPage);
                goToPrevPage = window.atFront.setPage.bind(window.atFront, prevPage);
                
                $(alias + 'NextNav').observe('click', goToNextPage);
                $(alias + 'PrevNav').observe('click', goToPrevPage);
            } 
            
            $(alias + 'Pages').update('');

            if (this.numPages > 1) {
                $R(intervalStart, intervalEnd).each(function(index) {
                    link = new Element('a').update(index);
                    if (this.curPage == index) {
                        link.addClassName('active');
                    } else {
                        link.setStyle({cursor: 'pointer'});
                        link.observe('click', window.atFront.setPage.bind(window.atFront, index));
                    }
                    $(alias + 'Pages').insert(link);
                    if (index != intervalEnd) {
                        $(alias + 'Pages').insert('&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;');
                    }
                }, this);
            } else {
                $(alias + 'PrevNav').hide();
                $(alias + 'NextNav').hide();
            }            
        }, this);
    },
    updateActivityFilter: function() {
        console.log('AttractionsView::updateActivityFilter');
        try {
        var selector = new Element('select', { id: 'activityFilter' });
        selector.setStyle({width: '171px'});
        $('activityFilterContainer').update('');
        var activities = this.activities;
        
        var option = new Element('option', { value: 0 }).update('All activities');
        selector.appendChild(option);
        
        var searchActivityId = $('results').getAttribute('activityId');
        if (searchActivityId != 0) {
            var searchActivityName = $('results').getAttribute('activityName');
            activities.set(searchActivityId, searchActivityName);
        } 
        
        activities.each(function(pair) {
            var option = new Element('option', { value: pair.key }).update(pair.value);
            option.selected = pair.key == this.selectedActivityId;
            selector.appendChild(option);
        }, this); 
        selector.observe('change', window.atFront.changeActivityFilter.bind(window.atFront));
        $('activityFilterContainer').update(selector);
        } catch (e) {
            console.log(e);
        }
        
    },
    getVendorLogoByAlias: function(alias) {
        alias = alias.toLowerCase();
        if (alias == 'atdw') {
            return null;
        }
        return '/common/i/suppliers/' + alias + '.gif';
    },
    switchLogo: function() {
        if (++this.currentVendorLogoId == this.vendorAliases.length) {
            this.currentVendorLogoId = 0;
        }
        if (typeof (this.vendorAliases[this.currentVendorLogoId]) == 'undefined') {
            return;
        }
        $('hp-vendor-logo').src = this.getVendorLogoByAlias(this.vendorAliases[this.currentVendorLogoId]);  
        $('hp-indicator').src = $('hp-indicator').src;
        this.switchLogoTimeoutHandler = this.switchLogo.bind(this).delay(3);
    },
    hideSearchIndicator: function() {
        $('searching').hide();
    }    
});