var regions = [
    {name: 'San Francisco', container: 'SF', hotels: ['americania', 'carriage', 'galleria', 'adagio', 'carlton', 'delSol' ,'drisco', 'good', 'kabuki', 'rex', 'tomo', 'laurel', 'petite', 'phoenix', 'swan', 'vitale']},
    {name: 'Marin', container: 'Marin', hotels: ['acqua', 'millValley', 'watersEdge']},
    {name: 'Wine Country', container: 'Wine', hotels: ['gaige']},
    {name: 'San Francisco East Bay', container: 'SFEB', hotels: ['durant', 'waterfront']},
    {name: 'Sacramento', container: 'Sacramento', hotels: ['citizen']},
    {name: 'Silicon Valley', container: 'SiliconValley', hotels: ['domain', 'avante', 'moorpark', 'wildPalms', 'avatar', 'losGatos']},
    {name: 'Central Coast', container: 'CentralCoast', hotels: ['ventana', 'dreamInn']},
    {name: 'Los Angeles', container: 'LA', hotels: ['angeleno', 'maya', 'erwin']},
    {name: 'Orange County', container: 'OC', hotels: ['shorebreak']}
  ]

var HotelListing = new Class({
    Implements: [Options, Events],
    options:
    {
        container: null,
        regions: null,
        hotels: null,
        obj: '',
        sortProperty: 'price',        //property to sort default to 'name'
        sortList: {price: false, name: false, stars: false},
        imgPath: '/img/promos/joie/'
    },
    initialize: function(options)
    {
    
        this.setOptions(options);
        //this.sort(this.options.sortProperty);
        
        this._buildHotelList();
        
    },
    _buildHotelList: function()
    {
        var container = $(this.options.container);
        var imgPath = this.options.imgPath;
        container.empty();
        
        regions.each(function(region, index)
        {
            
            //sort div
            new Element('div', {
                id: region.container + 'Sort',
                html: '<a href="javascript:;" onclick="'+ this.options.obj +'.sort(\'price\', \''+ index +'\', false)"><span class="sort_roll">Sort By PRICE</span></a> | <a href="javascript:;" onclick="'+ this.options.obj +'.sort(\'stars\', \''+ index +'\', true)">Sort By RATING</a>'
            }).addClass('sort').inject(container);
            
            //region div
            new Element('div', {
                html: region.name
            }).addClass('find_region').inject(container);
            
            //spacer
            new Element('img', {
                src: this.options.imgPath + 'aspacer.gif',
                width: 1,
                height: 6,
                styles: { display: 'block' }
            }).inject(container);
        
            
            var tempHotel = [];    
            region.hotels.each(function(hotel){
                tempHotel.push(hotels[hotel]);
            });
            
            tempHotel = this._sort(tempHotel, 'price', true);
            
            var regionContainer = new Element('div', {id: region.container + 'Container'}).inject(container);
            
            this.buildHotelList(tempHotel, regionContainer, imgPath);
            
            //spacer
            new Element('img', {
                src: imgPath + 'aspacer.gif',
                width: 1,
                height: 12,
                styles: { display: 'block' }
            }).inject(container);
            
        }.bind(this));
        
        
    },
    buildHotelList: function(list, regionContainer, imgPath)
    {
        var isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
        list.each(function(item, index)
        {
        
            var boxDiv = new Element('div', {
                html: '<a name="'+ item.link +'" id="'+ item.link +'"></a>',
                styles: { width: 710 }
            }).addClass('find_hoteBox').inject(regionContainer);
            
            //hotel name, short description, and rating
            var hotelDiv = new Element('div', { html: item.name + ' - ' + item.location, styles: { position: 'relative' } }).addClass('find_hotel_name').inject(boxDiv);
            
            var stars = '';
            var isHalf = String(item.stars).indexOf(".") < 0 ? false : true;
            var length = parseInt(item.stars);
            for(var j = 0; j < length; j++)
                stars += '<img src="'+ imgPath +'star.gif" width="13" height="13" />';
            stars += isHalf ? '<img src="'+ imgPath +'star_half.gif" width="13" height="13" />' : ''
            
            new Element('div', {
                html: item.shortDesc + '&nbsp;&nbsp;&nbsp;' + stars,
                styles: { position: 'absolute', right: 0, top: 0, paddingRight: isIE6 ? 8 : 0 }
            }).addClass('find_hotel_fun').inject(hotelDiv);
            
            //image and description
            new Element('div', {
                html: '<img src="'+ imgPath +'hotels/'+ item.link +'.jpg" width="155" height="86" style="float:left;padding-right:10px;" />' + item.description,
                styles: { width: 530 }
            }).inject(boxDiv);
            
            
            //show amenities
            var amenities = '';
            item.amenities.each(function(item){
                amenities += '<img src="/img/promos/summer/amen_'+ item +'.gif" alt="'+ item +'" width="15" height="15" align="absmiddle" />&nbsp;&nbsp;';
            });
            
            //hotel map, rate, and reservation link
            var mapDiv = new Element('div', {
                html: '<a href="/img/promos/summer/maps/JDV_'+ item.imageName +'_Map.jpg" onclick="window.open(this.href, \'map\', \'width=380, height=360, scrollbars=no\');return false;">VIEW AREA MAP</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + amenities,
                styles: 
                {
                    clear: 'left',
                    marginLeft: 162,
                    position: 'relative'
                }
            }).addClass('find_hotel_map').inject(boxDiv);
        
            new Element('div', {
                html: 'Rates as low as $'+ item.price +'<br /><a href="'+ item.reserve +'"><img src="'+ imgPath +'reservenow.gif" width="112" height="26" /></a>',
                styles:
                {
                    position: 'absolute',
                    left: 400,
                    top: -26
                }
            }).addClass('find_hotel_fun').inject(mapDiv);
            
            
            
            if(index + 1 < list.length)
            {
                //spacer
                new Element('img', {
                    src: imgPath + 'aspacer.gif',
                    width: 1,
                    height: 6,
                    styles: { display: 'block' }
                }).inject(regionContainer);
            }
        });
    },
    sort: function(property, region, isDesc)
    {
        var list = [];
        var regionObj = this.options.regions[region];
        regionObj.hotels.each(function(hotel){
            list.push(hotels[hotel]);
        }.bind(this));
        
        list = this._sort(list, property, isDesc);
        var regionContainer = $(regionObj.container + 'Container');
        regionContainer.empty();
        
        
        for(key in this.options.sortList)
        {
            if(key != property)
                this.options.sortList[key] = true;
        }
        
        $(regionObj.container + 'Sort').set('html', '<a href="javascript:;" onclick="'+ this.options.obj +'.sort(\'price\', \''+ region +'\', '+ this.options.sortList['price'] +')"><span class="'+ (property == "price" ? "sort_roll" : "") +'">Sort By PRICE</span></a> | <a href="javascript:;" onclick="'+ this.options.obj +'.sort(\'stars\', \''+ region +'\', '+ this.options.sortList['stars'] +')"><span class="'+ (property == "stars" ? "sort_roll" : "") +'">Sort By RATING</span></a>');
        this.buildHotelList(list, regionContainer, this.options.imgPath);
        
        
    },
    _sort: function(list, property, isDesc)
    {
        this.options.sortProperty = property;
        if(!isDesc)
        {
            list.sort(this._sortAsc.bindWithEvent(this));
            this.options.sortList[property] = true;
        }
        else
        {
            list.sort(this._sortDesc.bindWithEvent(this));
            this.options.sortList[property] = false
        }
        
        for(key in this.options.sortList)
        {
            if(key != property)
                this.options.sortList[key] = false;
        }
        //this._buildHotelList();
        return list;
    },
    _sortAsc: function(a, b)
    {
        var result = 0;
	    if ( a[this.options.sortProperty] > b[this.options.sortProperty] ) { result = 1; }
	    if ( b[this.options.sortProperty] > a[this.options.sortProperty] ) { result = -1; }
	    return result;
    },
    _sortDesc: function(a, b)
    {
        var result = 0;
	    if ( a[this.options.sortProperty] < b[this.options.sortProperty] ) { result = 1; }
	    if ( b[this.options.sortProperty] < a[this.options.sortProperty] ) { result = -1; }
	    return result;
    }
});