$(document).ready( function(){
    var base_url = "http://bkk2night.net/r24/";
    var adsense_pubid = "ca-pub-7177187392058960";
    var numPerPage = 20;
    var numAllPage;
    var allListCount;
    var ct_hotel;
    var map;
    var adsUnit;
    var ct_rec = 1;
    var markersArray = [];
    var mapCenter;
    
    var pageReCreate = function(thisPage, numPerPage){
        $('.page-number').removeClass( 'pageSelected');
        $('div.hotel_block').hide().slice( thisPage * numPerPage, ( thisPage+1) * numPerPage).show();      
    }
    
    var clickPage = function( pageNumber){
        $('.page-number').removeClass( 'pageSelected');
        $('.pageMenu-head-number a').each( function(){
            if( $(this).text()  == pageNumber)
                $(this).find('.page-number').addClass( 'pageSelected');                
        }) ;
        $('.pageMenu-foot-number a').each( function(){
            if( $(this).text()  == pageNumber)
                $(this).find('.page-number').addClass( 'pageSelected');                
        })  
    }
        
    
    allListCount = $(this).find('div.hotel-list div.hotel_block').length;    
    numAllPage = Math.ceil( allListCount/numPerPage);
    
    for( var i=0; i<numAllPage; i++){
        $('.pageMenu-head-number').append("<a href='#'><span class='page-number' id='p"+ i +"'>"+ (i+1) +"</span></a> ");
        $('.pageMenu-foot-number').append("<a href='#'><span class='page-number' id='p"+ i +"'>"+ (i+1) +"</span></a> ");
    }
    //$('.pageMenu-head-number').hide();    
        
    $('.pageMenu-head-number a, .pageMenu-foot-number a').click( function(){        
        pageReCreate( $(this).text()-1, numPerPage);
        clickPage($(this).text());
        return false; 
    });
    
    $('.pageMenu-foot-number a').click( function(){
        var tp = $('div#map-contain').offset().top - 10;
        $('html, body').animate({scrollTop:tp}, 'slow');
        return false; 
    })
    
    //recommend clone
    $('#recommend1').clone().appendTo('.recommend1');
    $('#recommend2').clone().appendTo('.recommend2');
    $('#recommend3').clone().appendTo('.recommend3');
    $('#recommend4').clone().appendTo('.recommend4');
    $('.recommend_temp').hide();
    
       
    $('.found-report').append("Founds Hotels &amp; Resorts <span class='found-number'>" + allListCount + "</span>");
    $('.pageMenu-head-number a:eq(0)').trigger('click');
    //$('.tooltip').colorTip({color:'green'});
    
    //Sort By
   
    $('select#sortby').change( function(){
        $('select option:selected').each( function(){  
            var allHotel = $('div.hotel-list div.hotel_block').get();
            allHotel.sort(function(a, b){
                var ret;
                var $column = $('select#sortby option:selected').val();
                var sortid;
                if( $column == 0)
                    sortid = 'span#sort_rate';
                if( $column == 1)
                    sortid = 'span#sort_name';
                if( $column == 2)
                    sortid= 'span#sort_rating';
                
                var keyA = $(a).find(sortid).text().toUpperCase();
                var keyB = $(b).find(sortid).text().toUpperCase();  
                
                if( sortid == 'span#sort_rate' || sortid == 'span#sort_rating'){
                    keyA = parseFloat( keyA);
                    keyB = parseFloat( keyB);
                }
                 
                  
                if( keyA > keyB) ret = 1;
                else if( keyA < keyB) ret = -1;
                else ret = 0;   
                
                if(sortid == 'span#sort_rate' || sortid == 'span#sort_rating')
                    return -(ret);
                else
                    return ret;
                                    
            });
            
            $.each( allHotel, function(index, row){
                $('div.hotel-list').append( row);
            });
            $('.pageMenu-head-number a:eq(0)').trigger('click');
            chkMarker();
            
        })
    });
    
    //search box
    $('input.search-box').focus( function(){
       $('.search-list label').hide(); 
    });
    
    $('input.search-box').blur( function(){
        if( $('input.search-box').val() == ''){
            $('.search-list label').show();
            $('.travel-list div').show();
        }
    });
    
    $('input.search-box').keyup( function( e){
        var $target = $('.list-menu div');
            $target.hide();
            
            $target.each( function(){
                var tSearch = $(this).find('a').text();
                var chk = new RegExp($('input.search-box').val(), "i");
                
                if( tSearch.match(chk))
                    $(this).show();     
            });
            
         if( $('input.search-box').val() == '')
            $target.show();
    });
    
    $('.search-list label').click( function(){
        $('input.search-box').trigger('focus');
    });
    
    //Map
    var LoadMap = function(){
        var latlng = new google.maps.LatLng(13.7238, 100.5142);
        var myOptions = {
          zoom: 10,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map( document.getElementById('map-contain'), myOptions);
        
        var homeControlDiv = document.createElement('DIV');
        var homeControl = new HomeControl(homeControlDiv, map);        
        homeControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.LEFT_TOP].push(homeControlDiv);

    }
    
    var mapAds = function(){
        var adUnitDiv = document.createElement('div');
        var adUnitOptions = {
            format: google.maps.adsense.AdFormat.VERTICAL_BANNER,
            position: google.maps.ControlPosition.RIGHT_BOTTOM,
            map: map,
            visible: true,
            publisherId: adsense_pubid,
        }
        adsUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);
    }
    
    var HomeControl = function(controlDiv, map) {
          controlDiv.style.padding = '5px';
        
          var controlUI = document.createElement('DIV');
          controlUI.style.cursor = 'pointer';
          controlUI.style.textAlign = 'center';
          controlUI.title = 'Click to set the map to Home';
          controlDiv.appendChild(controlUI);
        
          var controlText = document.createElement('DIV');
          controlText.style.fontSize = '12px';
          controlText.style.paddingLeft = '4px';
          controlText.style.paddingRight = '4px';
          controlText.innerHTML = '<img src="'+ base_url +'/images/map_home.png" />';
          controlUI.appendChild(controlText);
        
          google.maps.event.addDomListener(controlUI, 'click', function() {
                map.setCenter(mapCenter);
                zoomMap( 10);
          });
    }

  
    var setCenterMap = function( lat, lon){
        var location = new google.maps.LatLng( lat, lon);
         mapCenter = location;
         map.setCenter(location);
                 
    }
    
    var zoomMap = function( z){
        map.setZoom(z);
    }

  
    var addMarker = function( hoteldescript, lat, lon, image, zIndex) {
        var icon = new google.maps.MarkerImage( base_url + "images/map_mark_icon/"+ image +".png");
        var location = new google.maps.LatLng( lat, lon);
        var marker = new google.maps.Marker({
            position: location,
            map: map,
            title: hoteldescript[0],
            icon: icon,
            zIndex: zIndex
        });
        
        var html =  "<div>";
            html += "<div style='float: left; margin-right: 4px;'>";
            html += "<div style='border: 1px solid #808080;'><img src='"+ hoteldescript[1] +"' style='width: 80px; padding: 1px'></div>";
            html += "<div><a href='"+ hoteldescript[2] +"' target='_blank' style='color: #3F3A3A; font-size: 12px;'><img src='"+ hoteldescript[4] +"' style='width: 80px; padding: 1px'></a></div>";
            html += "</div>";
            html += "<div style='font-weight: bold; color: #3F3A3A'><a href='"+ hoteldescript[2] +"' target='_blank' style='color: #3F3A3A; font-size: 12px;' >"+ hoteldescript[0] +"</a></div>";
            html += "<div style='font-size: 6px; color: #808080'>"+ hoteldescript[3] +"</div>";
            html += "<div style='font-size: 6px; color: #FF0000; font-size: 12px; font-weight: bold'>"+ hoteldescript[5] +"</div>";
            html += "</div>";
        
        var windowInfo = new google.maps.InfoWindow({
            content: html,
        });
        
        google.maps.event.addListener(marker, 'click', function(){
            windowInfo.open(map, marker);
            map.setCenter(location);
            zoomMap(15);
        })
        
        if( zIndex == 1)
            markersArray.push(marker);
            

    }
    
    var chkMarker = function(){
        if (markersArray) {
            for (i in markersArray) {
                markersArray[i].setMap(null);
            }
        }

        var ct = 1;
        var lat_total = 0;
        var lon_total = 0;
        var max_lat = 0;
        var min_lat = 0;
        var max_long = 0;
        var min_long = 0;
        $('.hotel_block:visible').each( function(){
            var hoteldescript = [];
            hoteldescript[0] = $(this).find('#sort_name').text();
            hoteldescript[1] = $(this).find('.hotel_image img').attr('src');
            hoteldescript[2] = $(this).find('.hotel_name a').attr('href');
            hoteldescript[3] = $(this).find('.hotel_location').text();
            hoteldescript[4] = $(this).find('.hotel_rating img').attr('src');
            hoteldescript[5] = $(this).find('span.hotel_rate').text();
            var lat = $(this).find('#hotel_lat').text();
            var lon = $(this).find('#hotel_long').text();
            var image = ct;
            
            
            if( lat != 0){
                addMarker(  hoteldescript, lat, lon, image, 1);            
                $(this).find('.hotel_geo img').attr({
                    src     : base_url + 'images/map_mark_icon/'+ ct +'.png',
                    width   : '20',
                    height  : '20',
                    });
                ct++;
                lat_total += parseFloat(lat);
                lon_total += parseFloat(lon);
                if( max_lat == 0 || max_lat <  lat)
                    max_lat = parseFloat(lat);
                    
                if( min_lat == 0 || min_lat > lat)
                    min_lat = parseFloat(lat);
                    
                if( max_long == 0 || max_long <  lon)
                    max_long = parseFloat(lon);
                    
                if( min_long == 0 || min_long > lon)
                    min_long = parseFloat(lon);
            }
            
        });
        //lat_total = (max_lat + min_lat)/2;
        //lon_total = (max_long + min_long)/2;
        lat_total = lat_total/(ct-1);
        lon_total = lon_total /(ct-1);
        setCenterMap( lat_total, lon_total);
        zoomMap( 10);
    }
    
    var recommendMarker = function(){
        $('.recommend_contain .recommend_block').each(function(){
            var hoteldescript = [];
            hoteldescript[0] = $(this).find('#rec_name').text();
            hoteldescript[1] = $(this).find('.hotel_image img').attr('src');
            hoteldescript[2] = $(this).find('.recommend_name a').attr('href');
            hoteldescript[3] = $(this).find('.hotel_location').text();
            hoteldescript[4] = $(this).find('.hotel_rating img').attr('src');
            hoteldescript[5] = $(this).find('span.hotel_rate').text();
            var lat = $(this).find('#recommend_lat').text();
            var lon = $(this).find('#recommend_long').text();
            var image = 'recommend/' + ct_rec;
            
            addMarker(  hoteldescript, lat, lon, image, 2);
            
            $(this).find('.recommend_geo img').attr({
                src     : base_url + 'images/map_mark_icon/recommend/'+ ct_rec +'.png',
                width   : '20',
                height  : '20',
            });
            ct_rec++;
            
        });  
    }
        
    
    $('.pageMenu-head-number a, .pageMenu-foot-number a').click( function(){
        chkMarker();
    });
   
    LoadMap();
    chkMarker();
    recommendMarker();
    //mapAds();

});