var map;
var gmarkers = [];
var points = [];
var htmls = [];    
var cnt = 0;

var base_url = "/";
var default_icon_img = base_url+"static/image/icon2.gif";
var baseIcon = new GIcon();
baseIcon.iconSize = new GSize(40, 40);
baseIcon.iconAnchor = new GPoint(20, 20);
baseIcon.image = default_icon_img;

var miniIcon = new GIcon(); //ミニアイコンの作成
miniIcon.image = "http://labs.google.com/ridefinder/images/mm_20_green.png"; //アイコン画像のURL
miniIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; //影画像のURL
miniIcon.iconSize = new GSize(12, 20); //アイコン画像のサイズ
miniIcon.shadowSize = new GSize(22, 20); //影画像のサイズ
miniIcon.iconAnchor = new GPoint(6, 20); //影画像の位置。アイコン画像の左上隅からの相対位置で示す
miniIcon.infoWindowAnchor = new GPoint(5, 1); //情報ウィンドウの位置。アイコン画像の左上隅からの相対位置



function initialize() {
	if(GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		map.setCenter(new google.maps.LatLng(default_lat, default_lng), 14);
		map.addControl(new google.maps.LargeMapControl());
		map.addControl(new google.maps.ScaleControl());
		map.addMapType(G_PHYSICAL_MAP);

		map.addControl(new google.maps.MapTypeControl());
		map.enableContinuousZoom();
//		map.enableScrollWheelZoom();

		var icon = new GIcon(baseIcon);
		var marker = new GMarker(new GLatLng(default_lat, default_lng), icon);
		map.addOverlay(marker);
		
		for(var i=0;i<parkings.length;i++) {
			var point = new google.maps.LatLng(parkings[i].lat, parkings[i].lng);
			var marker = createMarker(point, parkings[i]);
			map.addOverlay(marker);
		}
	}
}


function createMarker(point, parking) {
	var marker = new google.maps.Marker(point, {icon:miniIcon});
	var html = '<div class="map_div"><p class="name"><a href="'+parking.link+'">'+parking.name+'</a></p><img src="'+parking.image+'" alt="'+parking.name+'" /><br /><span class="price">'+parking.price+'円</span></div>';
	google.maps.Event.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
	});
	gmarkers[cnt] = marker;
	htmls[cnt] = html;
	cnt++;

	return marker;

}


$.fn.infiniteCarousel = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            
            singleWidth = $single.outerWidth(), 
//            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
            visible = 6,
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            


        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
        
        // 3. Set the left position to the first 'real' item
        $wrapper.scrollLeft(singleWidth * visible);
        
        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 

                currentPage = page;
            });                
            
            return false;
        }
        
        $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
        
        // 5. Bind to the forward and back buttons
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);
        });
        
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};

$(document).ready(function () {
	$(".estate_map_hdl").css('display', 'block');
	$("#initial_cost").css('display', 'none');
	$("#initial_cost_hdl_area").css('display', 'block');


	$('#image_area .wrapper li a').click(function(){
		$('#image_area .wrapper li a').each(function() {
			$(this).css('border-color', '#CCC');
		});
		$(this).css('border-color', '#F00');
		var tmp = $(this).attr('href');
		$('#estate_img img').attr('src', tmp);
		return false;
	});


//	$('.infiniteCarousel li a').click(function(){
//		var tmp = $(this).attr('href');
//		$('#estate_img img').attr('src', tmp);
//		return false;
//	});

	$("#initial_cost_hdl").click(function(){
		$("#initial_cost").toggle();
	});

	$(".estate_info").click(function(){
		$(".estate_map").removeClass("estate_map_current");
		$(".estate_info").addClass("estate_info_current");
		$("#estate_info_area").css('display', 'block');
		$("#estate_map_area").css('display', 'none');

		if(showinfo != true) {
			$('.infiniteCarousel').infiniteCarousel();
			showinfo = true;
		}
	});

	$(".estate_map").click(function(){
		$(".estate_info").removeClass("estate_info_current");
		$(".estate_map").addClass("estate_map_current");
		$("#estate_info_area").css('display', 'none');
		$("#estate_map_area").css('display', 'block');

		if(showmap != true) {
			initialize();
			showmap = true;
		}
	});

	$(".add_favorite").click(function(){
		$.ajax({
			type: "POST",
			url: $(".add_favorite a").attr('rel') ,
			success: function(){
				$(".add_favorite").html('<img src="'+base_url+'static/image/is_favorite.png" alt="お気に入り追加済み" />');

				$(".add_favorite").unbind("click");
				$(".add_favorite").addClass("is_favorite");
				$(".is_favorite").removeClass("add_favorite");
				$(".favorite_area").load(base_url+'api/favorite/');
			},
			error:function(){
				alert('エラーが発生しました。');
			}
		});

		return false;
	});

	if(showinfo == true) {
		$('.infiniteCarousel').infiniteCarousel();
	}


//	$("#nyukyobi").html('<select name="hiwari" id="hiwari_hdl"><option value="1">1日</option><option value="6">6日</option><option value="16">16日</option><option value="26">26日</option></select>');
	$("#nyukyobi").html('<select name="hiwari" id="hiwari_hdl"><option value="1">1日</option><option value="6">6日</option><option value="16">16日</option><option value="26" selected="selected">26日</option></select>');

	$("#hiwari_hdl").change(function(){
		var pos = $("#hiwari_hdl").attr('value');
		var hiwari_txt = hiwari[pos];
		var hiwari_total_txt = hiwari_total[pos];
		$("#hiwari_price").text(number_format(hiwari_txt));
		$("#initital_total").text(number_format(hiwari_total_txt));
	});
	
});

function number_format(num){
  return (num.toString().replace( /([0-9]+?)(?=(?:[0-9]{3})+$)/g , '$1,' ));
}



