var PackageListing = new Class({
    Implements: [Options, Events],
    options:
    {
        container: null,
        package: 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._buildHotelList();
    },
    _buildHotelList: function()
    {
        var container = $(this.options.container);
        var imgPath = this.options.imgPath;
        
         //sort div
        new Element('div', {
            html: '<a href="javascript:;" onclick="'+ this.options.obj +'.sort(\'price\', false)"><span class="sort_roll">Sort By PRICE</span></a> | <a href="javascript:;" onclick="'+ this.options.obj +'.sort(\'stars\', true)">Sort By RATING</a>'
        }).addClass('sort').inject(container);
        
        var tempHotel = [];    
        this.options.package.hotels.each(function(hotel){
            var obj = hotels[hotel.name];
            obj.price = hotel.price;
            if(hotel.reserve != '')
                obj.reserve = hotel.reserve;
            if(hotel.description && hotel.description != '')
                obj.description = hotel.description;
            if(hotel.shortDesc && hotel.shortDesc != '')
                obj.shortDesc = hotel.shortDesc;                                
            tempHotel.push(obj);
        });
        
        tempHotel = this._sort(tempHotel, 'price', true);
        this.buildHotelList(tempHotel, container, imgPath);
        
    },
    buildHotelList: function(list, regionContainer, imgPath)
    {
        var isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
        list.each(function(item, index)
        {
        
            var boxDiv = new Element('div', {
                styles: { width: 562 }
            }).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', {
                styles: 
                {
                    clear: 'left',
                    marginLeft: 165,
                    marginTop: 10,
                    height: 35,
                    width: 400,
                    position: 'relative'
                }
            }).addClass('find_hotel_map').inject(boxDiv);
            
            
            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;' + amenities,
                styles:
                {
                    position: 'absolute',
                    left: 0,
                    top: 15
                }
            }).addClass('find_hotel_fun').inject(mapDiv);
            
            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: 250,
                    top: -5
                }
            }).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, isDesc)
    {
        var tempHotel = [];    
        this.options.package.hotels.each(function(hotel){
            var obj = hotels[hotel.name];
            obj.price = hotel.price;
            if(hotel.reserve != '')
                obj.reserve = hotel.reserve;
            tempHotel.push(obj);
        });
        
        tempHotel = this._sort(tempHotel, property, isDesc);
        var container = $(this.options.container);
        container.empty();
        
        
        for(key in this.options.sortList)
        {
            if(key != property)
                this.options.sortList[key] = true;
        }
        
         //sort div
        new Element('div', {
            html: '<a href="javascript:;" onclick="'+ this.options.obj +'.sort(\'price\', '+ this.options.sortList['price'] +')"><span class="'+ (property == "price" ? "sort_roll" : "") +'">Sort By PRICE</span></a> | <a href="javascript:;" onclick="'+ this.options.obj +'.sort(\'stars\', '+ this.options.sortList['stars'] +')"><span class="'+ (property == "stars" ? "sort_roll" : "") +'">Sort By RATING</span></a>'
        }).addClass('sort').inject(container);
        this.buildHotelList(tempHotel, container, 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;
    }
});