var BrowseHotels = new Class({
    Implements: [Options, Events],
    options:
    {
        container: '',
        url: '',
        hotelList: [],
        isIE6: /msie|MSIE 6/.test(navigator.userAgent),
        flashId: '',
        flashObj: null,
        popupW: 255,
        popupH: 196
    },
    initialize: function(options)
    {
        this.setOptions(options);
        this._init();
        this._initPopup();
        
        new Request.JSON({
            url: this.options.url,
            onComplete: function(response)
            {
                if(response)
                {
                    this.options.hotelList = response.list;
                    this._initListing();
                    this._preloadImages();
                    
                }
            }.bind(this)
        }).post();
        
        this.fadeIn = new Fx.Morph('hotelPopupContent', {duration: 700, transition: Fx.Transitions.Sine.easeOut});
        
        this.openEffect = new Fx.Morph('hotelPopup', {duration: 700, transition: Fx.Transitions.Sine.easeOut,
            onComplete: function()
            {
                this.fadeIn.start({opacity: 1});
                if(this.options.isIE6)
                {
                    $('hotelPopupFrame').setStyles({
                        left: $('hotelPopup').getPosition().x,
                        top: $('hotelPopup').getPosition().y,
                        display: 'inline'
                    });
                }
            }.bind(this)
        });
        this.closeEffect = new Fx.Morph('hotelPopup', {duration: 700, transition: Fx.Transitions.Sine.easeOut,
            onStart: function()
            {
                if(this.options.isIE6)
                {
                    $('hotelPopupFrame').setStyles({
                        left: $('hotelPopup').getPosition().x,
                        top: $('hotelPopup').getPosition().y,
                        display: 'none'
                    });
                }
            }.bind(this)
        });
    },
    _init: function()
    {
        var container = $(this.options.container);
        new Element('div', {
            id: 'browseHotelBtn',
            html: 'BROWSE OUR HOTELS', 
            styles:
            {
              textAlign: 'right',
              position: 'absolute',
              left: 0,
              bottom: 0,
              width: 770,
              height: 25,
              zIndex: 3,
              backgroundColor: '#fff',
              opacity: .5,
              color: '#000',
              lineHeight: 25,
              paddingRight: 16,
              fontSize: 11,
              opacity: 0,
              cursor: 'pointer'
            },
            events:
            {
                click: function()
                {
                    this.getFlash(this.options.flashId).setBusy(true);
                    this._showHotels();
                }.bind(this)
            }
        }).inject(container).fade(0.5);
    },
    
    _initListing: function()
    {
        var container = $(this.options.container);
        var div = new Element('div', {
            id: 'browseHotelsBG',
            styles:
            {
                width: container.getWidth(),
                height: container.getHeight(),
                position: 'absolute',
                left: 0,
                top: 0,
                backgroundColor: '#f0f0f0',
                opacity: 0,
                zIndex: 99
            }
        }).inject(container);
        
        new Element('div', {
            text: 'CLOSE X',
            styles:
            {
                position: 'absolute',
                right: 5,
                top: 5,
                color: '#333',
                cursor: 'pointer',
                fontSize: 10
            },
            events:
            {
                click: function()
                {
                    this.getFlash(this.options.flashId).setBusy(false);
                    this._hideHotels();
                }.bind(this)
            }
        }).inject(div);
        
        var table = new Element('table', {
            cellpadding: 0,
            cellspacing: 0,
            border: 0,
            styles: 
            {
                width: container.getWidth(),
                height: container.getHeight(),
                padding: 10
            }
        }).inject(div);
        var tbody = new Element('tbody').inject(table);
        var tr = new Element('tr').inject(tbody);
        var td = new Element('td', {styles:{textAlign: 'left', verticalAlign: 'top'}}).inject(tr);
        
        var cell = new Element('div', {
            styles:
            {
                padding: 10
            }
        }).inject(td);
        var cellH = container.getHeight() - 40;
        
        
        
        for(var i = 0; i < this.options.hotelList.length; i++)
        {
            var item = this.options.hotelList[i];
            
            if(cell.getHeight() >= cellH)
            {
                td = new Element('td', {styles:{textAlign: 'left', verticalAlign: 'top'}}).inject(tr);
                cell = new Element('div', {styles:{padding: 10}}).inject(td);
            }
            

            var temp = new Element('div').inject(cell);
            var span = new Element('span', {styles:{}}).inject(temp);
            var tempName = item.name;
            
            
            if(item.region)
            {
                var nameArray = tempName.split(' ');
                
                if(nameArray.length >= 3)
                {
                    tempName = "";
                    nameArray.each(function(item, index){
                        if(index != 0 && index % 2 == 0)
                            tempName += '<br/>';
                        tempName += item;
                        if(index + 1 < nameArray.length)
                            tempName += ' ';
                    });
                }
                tempName = '<a href="'+ item.url +'">'+ tempName +'</a>';
                temp.addClass('hotel-region');
                //set the html
                span.set('html', tempName);
                
            }
            else if(item.area)
            {
                temp.addClass('hotel-area');
                //set the html
                span.set('html', tempName);
            }
            else
            {
                span.addClass('hotel-name');
                var link = new Element('a', {
                    href: item.url,
                    html: item.areaname == '' ? tempName : tempName,
                    img: item.image,
                    extra: item.styles,
                    price: item.price
                }).inject(span);
                
                if(item.areaname != "")
                {
                    new Element('div', {
                        styles:
                        {
                            fontSize: 10,
                            color: '#333'
                        },
                        html: '(' + item.areaname + ')'
                    }).inject(span);
                }
                
                if(item.image != "")
                {
                    link.addEvents({
                        mouseover: function(e)
                        {
                            var evt = new Event(e);
                            evt.target.addClass('hotel-on');
                            var container = $(this.options.container);
                            var popup = $('hotelPopup');
                            
                            var realX = evt.target.getPosition().x - container.getPosition().x;
                            var realY = evt.target.getPosition().y - container.getPosition().y;
                            
                            var tempX = container.getWidth() - (realX + evt.target.getWidth() + this.options.popupW);
                            var tempY = container.getHeight() - (realY + this.options.popupH);
                            
                            //console.log('x: ' + tempX + ' - y: ' + tempY);
                            
                            if(tempX >= 0)
                            {
                                popup.setStyle('left', evt.target.getPosition().x + evt.target.getWidth());
                                //right
                            }
                            else
                            {
                                popup.setStyle('left', this.options.isIE6 ? evt.target.getPosition().x - 219 : (evt.target.getPosition().x - this.options.popupW));
                                //left
                            }
                            
                            if(tempY >= 0)
                            {
                                popup.setStyle('top', evt.target.getPosition().y);
                                //bottom
                            }
                            else
                            {
                                //top
                                popup.setStyle('top', evt.target.getPosition().y + evt.target.getHeight() - this.options.popupH);
                            }
                            
                            var content = $('hotelPopupContent');
                            
                            if(tempX > 0 && tempY < 0)
                            {
                                popup.setStyle('background', this.options.isIE6 ? '#fff' : 'url(/img/home/home_new/popup_bottom_left.png) no-repeat top left');
                                content.setStyle('padding', this.options.isIE6 ? '4px 0px 0px 0px' : '8px 0px 0px 23px');
                            }
                            else if(tempX > 0 && tempY >= 0)
                            {
                                popup.setStyle('background', this.options.isIE6 ? '#fff' : 'url(/img/home/home_new/popup_top_left.png) no-repeat top left');
                                content.setStyle('padding', this.options.isIE6 ? '4px 0px 0px 0px' : '8px 0px 0px 23px');
                            }
                            else if(tempX < 0 && tempY < 0)
                            {
                                popup.setStyle('background', this.options.isIE6 ? '#fff' : 'url(/img/home/home_new/popup_bottom_right.png) no-repeat top left');
                                content.setStyle('padding', this.options.isIE6 ? '4px 0px 0px 0px' : '8px 0px 0px 2px');
                            }
                            else if(tempX < 0 && tempY > 0)
                            {
                                popup.setStyle('background', this.options.isIE6 ? '#fff' : 'url(/img/home/home_new/popup_top_right.png) no-repeat top left');
                                content.setStyle('padding', this.options.isIE6 ? '4px 0px 0px 0px' : '8px 0px 0px 2px');
                            }    
                            
                            
                            content.empty();
                            
                            new Element('img', {
                                src: evt.target.getProperty('img')
                            }).inject(content);
                            
                            var styles = evt.target.getProperty('extra');
                            var tempS = styles.split(' ');
                            styles = this._toUpperCase(tempS, ' ');
                            tempS = styles.split('&amp;');
                            styles = this._toUpperCase(tempS, '&');
                            
                            
                            new Element('div', {
                                styles: 
                                {
                                    color: '#000',
                                    textAlign: 'left',
                                    padding: this.options.isIE6 ? '3px 0 0 4px' : '3px 0 0 10px'
                                },
                                html: '<span style="color: #1a4390">' + styles + '</span><br/>' + '<span style="color: #666">' + evt.target.getProperty('price') + '</span>'
                            }).inject(content);
                            
                            
                            this.closeEffect.cancel();
                            this.openEffect.start({
                                width: [popup.getWidth(), this.options.isIE6 ? 219 : this.options.popupW],
                                height: [popup.getHeight(), this.options.isIE6 ? 190 : this.options.popupH]
                            });
                            
                        }.bind(this),
                        mouseout: function(e)
                        {
                            this.fadeIn.cancel();
                            $('hotelPopupContent').setStyle('opacity', 0);
                            var evt = new Event(e);
                            evt.target.removeClass('hotel-on');
                            var popup = $('hotelPopup');
                            
                            this.openEffect.cancel();
                            this.closeEffect.start({
                                width: [popup.getWidth(), 0],
                                height: [popup.getHeight(), 0]
                            });
                        }.bind(this)
                    });
                }
            }
            
                
            if(i + 1 < this.options.hotelList.length)
            {
                var nextItem = this.options.hotelList[i + 1];
                if(nextItem.region || nextItem.area)
                    temp.setStyle('padding-bottom', '10px');
                else
                    temp.setStyle('padding-bottom', '2px');
            }                           
        }                
        
    },
    
    _initPopup: function()
    {
        var container = $(document.body);
        var div =  new Element('div', {
            id: 'hotelPopup',
            styles:
            {
                width: 0,
                height: 0,
                backgroundColor: '#fff',
                position: 'absolute',
                left: 0,
                top: 0,
                zIndex: 1000,
                background: (this.options.isIE6 ? '#fff' : 'url(/img/home/home_new/popup_top_left.png) no-repeat top left')
            }
        }).inject(container);

        
        
        
        var content = new Element('div', {
            id: 'hotelPopupContent',
            styles:
            {
                width: this.options.isIE6 ? 219 : 229,
                height: this.options.isIE6 ? 190 : 196,
                position: 'absolute',
                left: 0,
                top: 0,
                padding: this.options.isIE6 ? '4px 0px 0px 0px' : '8px 0px 0px 23px',
                zIndex: 1002,
                //display: 'none'
                opacity: 0
            }
        }).inject(div);
        
        if(this.options.isIE6)
        {
            new Element('iframe', {
                id: 'hotelPopupFrame',
                styles:
                {
                    width: 219,
                    height: 190,
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    display: 'none',
                    zIndex: 999
                }
            }).inject(container);
            
        }
        
    },
    
    _preloadImages: function()
    {
        var imgs = new Array();
        this.options.hotelList.each(function(item){
            
            if(item.image != "")
                imgs.push(item.image)
        });
        new Asset.images(imgs, {
            onComplete: function(){
            }
        });
    },
    
    _showHotels: function()
    {
        $('browseHotelsBG').fade(0.9);
    },
    
    _hideHotels: function()
    {
        $('browseHotelsBG').fade(0);
    },
    
    _toUpperCase: function(array, separator)
    {
        var str = "";
        array.each(function(item, i){
            str += item.substring(0, 1).toUpperCase() + item.substring(1, item.length);
            if(i + 1 < array.length)
                str += separator;
        });
        return str;
    },
    
    getFlash: function(name)
    {
        if (navigator.appName.indexOf("Microsoft") != -1) {
            return window[name];
        }
        else {
            return document[name];
        }

    },
    showBrowse: function()
    {
        $('browseHotelBtn').setStyle('display', 'inline');
    },
    hideBrowse: function()
    {
        $('browseHotelBtn').setStyle('display', 'none');
    }
});

window.addEvent('domready', function(){
    browseHotel = new BrowseHotels({
        container: 'flashContainer',
        url: '/services/hotel_list',
        flashId: 'homeHeader'
    });
});  


function showBrowse()
{
    browseHotel.showBrowse();
}

function hideBrowse()
{
    browseHotel.hideBrowse();
}