/**
 * the store locator application
 */

var estee = estee || {};
estee.storelocator = estee.storelocator || {};

var map = null;
var markers = [];
var loc_infos = [];

// show keys if they don't exist (or set default...)
if(!rb.language.view_details) rb.language.view_details = 'rb.language.view_details';
if(!rb.language.store) rb.language.store = 'rb.language.store';
if(!rb.language.address) rb.language.address = 'rb.language.address';
if(!rb.language.phone) rb.language.phone = 'rb.language.phone';
if(!rb.language.event_js) rb.language.event_js = 'rb.language.event_js';
if(!rb.language.search_results) rb.language.search_results = 'rb.language.search_results';
if(!rb.language.no_criteria)rb.language.no_criteria = 'rb.language.no_criteria';
if(!rb.language.search_error)rb.language.search_error = 'rb.language.search_error';

estee.storelocator.ResultsPanel = (function() {
    function _createRow(door, lineno, idx) {
        var buff = "<tr class=\"ln" + lineno + "\">";
		buff += "<td class=\"marker_id\">" + String.fromCharCode("A".charCodeAt(0) + idx) + ".</td>";
		buff += "<td>" + door.DOORNAME + "</td><td>" +  door.ADDRESS;
        buff += door.PHONE1?"<br/>" + door.PHONE1:'';
        buff += door.STORE_HOURS?"<br/>" + door.STORE_HOURS:'';
		buff += "</td><td>";
		buff += door.EVENT_NAME?'<a href="#" onclick="javascript:setTab(\'events\');">'+door.EVENT_NAME+'</a>':'&nbsp;';
		buff += "</td><td><a href=\"#\" onclick=\"selectStoreMarker("+idx+");\">"+rb.language.view_details+" &gt;</a>";
        buff += "</td></tr></thead>";
        return buff;
    }
    
    return Class.create({
        initialize: function(map) {
            this.doors = $A([]);
        },
        addDoor: function(door) {
            if(door) {
                this.doors.push(door);
            }
        },
        buildPanelOn: function(elm) {
            // first remove any elements in elm
            elm.select('*').each(function(des){des.remove()});
            var buff = "";
            buff += "<table cellspacing=\"0\"><thead><tr><th colspan=\"5\"><img src=\"/images/locator/h_store_search_result.gif\" width=\"110\" height=\"18\" alt=\"+rb.language.search_results+\" title=\"+rb.language.search_results+\" /></th></tr><tr class=\"htitles\"><th class=\"marker_id first\">&nbsp;</th><th>" 
			+ rb.language.store + "</th><th>" + rb.language.address +  " & " + rb.language.phone + "</th><th>"  
			+ rb.language.event_js + "</th><th class=\"marker_id last\">&nbsp;</th></tr></thead><tbody>";
            this.doors.each(function(door, idx) {
                buff += _createRow(door, idx%2, idx);
            });
            buff += "</tbody></table>";
            elm.insert(buff);
        }
    })
})();

estee.storelocator.EventsPanel = (function() {
	function _createRow(door) {
        var buff = "<tr>";
		buff += "<td>" + door.DOOR_ID + ".</td>";
		buff += "<td>" +  door.DOORNAME + (door.ADDRESS?'<br/>'+door.ADDRESS:"");
		buff += "</td><td>";
		buff += door.EVENT_START_DATE.truncate(6, '') + ' ~ ' + door.EVENT_END_DATE.truncate(6, '') + ' (' + door.EVENT_TIMES + ')';
		buff += "</td><td>" + door.PHONE1;
        buff += "</td></tr></thead>";
        return buff;
    }
    
    return Class.create({
        initialize: function(map) {
            this.doors = $A([]);
        },
        addDoor: function(door) {
            if(door) {
                this.doors.push(door);
            }
        },
        buildPanelOn: function(elm) {
			
			//group data by event rather than by store
			var events = $H([]);
			var event_list = $A([]);
			this.doors.each(function(door, idx) {
				var event_group = $A([]);
				if(events.keys().indexOf(door.EVENT_NAME) == -1){
					event_list.push(door.EVENT_NAME);
				}else{
					event_group = events.get(door.EVENT_NAME);
				}
				event_group.push(door);
				events.set(door.EVENT_NAME, event_group);
            });
			
            // first remove any elements in elm
            elm.select('*').each(function(des){des.remove()});
            var buff = "";
			buff += "<div id=\"event_list\"><div>";//<h4>イベント情報</h4>";
			// show stores for this event
			event_list.each(function(store_event, idx) {
				var door_event = events.get(store_event)[0];
				buff += "<div class=\"store_event"+idx%2+"\"><img src=\"" + door_event.EVENT_IMAGE + "\">";
				buff += "<div class=\"event_desc\"><h5>" + door_event.EVENT_NAME  + "</h5>";
				buff += "<p>" + door_event.EVENT_FEATURES + "</p>";
				buff += "<p>" + door_event.SERVICES + "</p>";
				buff += "</div>";
				buff += "<table cellspacing=\"0\"><thead><tr><th>ID</th><th>" + rb.language.store + "</th><th>DATE</th><th>" + 
							rb.language.phone + "</th></tr></thead><tbody>";
				events.get(door_event.EVENT_NAME).each(function(door, idx) {
					buff += _createRow(door);
				});
				buff += "</tbody></table></div>";
            });
			buff += "</div></div>";
            elm.insert(buff);
        }
    })								   
})();		   

document.observe('dom:loaded', function() {

    var body_id = $(document.body).readAttribute('id');

    if(body_id != 'storelocator') {
        return;
    }
    
    if(typeof(loc_hash) === 'undefined') {
        return;// no location data!
    }

    var region_dd = $('sl_region');
    var state_dd = $('sl_state');
    var doors_dd = $('sl_doorname');
    var locator_button = $('search_button');
    var messages = $('messages');
    var store_results = $('store_results');
	var store_events = $('store_events');
    var sr_wrapper2 = $('sr_wrapper2');
	var map_tab = $('view_map_pane');
	var events_tab = $('view_events_pane');
    
    function _initDropdowns() {
        region_dd.options[0] = new Option(rb.language.select, '');
        state_dd.options[0] = new Option(rb.language.select, '');
        doors_dd.options[0] = new Option(rb.language.select, '');
        $H(loc_hash).each(function(p) {
            region_dd.options[region_dd.options.length] = new Option(p.key, p.key);
        });
    }
    
    function _updateStateProvince() {
        var region = $F(region_dd);
        state_dd.options.length = 0;
        state_dd.options[0] = new Option(rb.language.select, '');
        $H(loc_hash[region]).each(function(p) {
            state_dd.options[state_dd.options.length] = new Option(p.key, p.key);
        });
        doors_dd.options.length = 0;
        doors_dd.options[0] = new Option(rb.language.select, '');
    }
    
    function _updateDoors() {
        var region = $F(region_dd);
        var state = $F(state_dd);
        doors_dd.options.length = 0;
        doors_dd.options[0] = new Option(rb.language.select, '');
        $A(loc_hash[region][state]).each(function(v) {
            doors_dd.options[doors_dd.options.length] = new Option(v, v);
        })
    }
    
    function _prepLocator() {
        var region = $F(region_dd);
        var state = $F(state_dd);
        var door = $F(doors_dd);
        
        if(region == "" || state == "") {
            _showError(rb.language.no_criteria);
            return;
        }
        
        function _onFinish() {
            var alist = [];
            if(door == "") {
                loc_hash[region][state].each(function(val) {
                    alist.push(val);
                });
            }
            else {
                alist = door;
            }
            
            var params = [{
    			"state" : $F(region_dd),
    			"city" : $F(state_dd),
    			"show_stores_list" : alist,
    			"fields" : "DOOR_ID, DOORNAME, EVENT_NAME, EVENT_START_DATE, EVENT_END_DATE, EVENT_IMAGE, EVENT_FEATURES, EVENT_TIMES, SERVICES, STORE_HOURS, ADDRESS, ADDRESS2, STATE_OR_PROVINCE, CITY, COUNTRY, ZIP_OR_POSTAL, PHONE1"
    		}];

    		generic.jsonrpc.fetch({
    			method: 'locator.doorsandevents', 
    			params: params,
    			onSuccess: _initMap,
    			onError: function () {
    				_showError(rb.language.search_error);
    			}
    		});
	    };
		
		//if($('event_list')){
			//Effect.SlideUp($('event_list'));
		//}
	    
	    if(sr_wrapper2.getStyle('display') != 'none') {
		    Effect.SlideUp(sr_wrapper2, {afterFinish: _onFinish, queue: {position: 'end', scope: 'storeresults'}});
	    }
	    else {
	        _onFinish();
	    }
    }
	
    
    function _initMap(jsonrpc_data) {
		
		setTab('map');
		
    	var value = jsonrpc_data.getValue();
    	if(value == null) {
    		return;
    	}
    	
        if(value.count <= 0) {
    		showError(rb.language.no_criteria);
    	    return;
	    }
	    
		var doors = value.doors.sortBy(function(s) { return s; })
		var locations = $H(value.results);

		var map_options = {	 };		
		map = new google.maps.Map2($('map'), map_options);
		map.enableScrollWheelZoom();
		map.addControl(new google.maps.SmallZoomControl3D());
		map.addControl(new google.maps.MapTypeControl());
		map.setCenter(new google.maps.LatLng('38.2526613','140.3384019'), 7, google.maps.MapType.G_NORMAL_MAP);
		
		var results_panel = new estee.storelocator.ResultsPanel();
		var events_panel = new estee.storelocator.EventsPanel();
		
		doors.each(function(door_id, idx) {
		    var location = locations.get(door_id);
		    var lat = location.LATITUDE;
			var lng = location.LONGITUDE;
			
			results_panel.addDoor(location);
			if(location.EVENT_NAME)events_panel.addDoor(location);
			
			var greenLetterIcon = new GIcon(G_DEFAULT_ICON);
        	greenLetterIcon.image = "/images/maps/icon_green"+String.fromCharCode("A".charCodeAt(0) + idx)+".png";
			markerOptions = { icon:greenLetterIcon };

			var point = new google.maps.LatLng(lat, lng);
			var marker = new google.maps.Marker(point, markerOptions);
			markers[idx] = marker;
			
			map.addOverlay(marker);
			
			var loc_info = _createLocationInfo(location);
			loc_infos[idx] = loc_info;
			marker.bindInfoWindowHtml(loc_info);
			
			if(idx == 0) {
			    map.setCenter(point, 11);
			    marker.openInfoWindowHtml(loc_info);
			}
		});
		
		results_panel.buildPanelOn(store_results);
		//events_panel.buildPanelOn(store_events);
		
		if($('map_pane').visible())
			Effect.SlideDown(sr_wrapper2, { queue: { position: 'end', scope: 'storeresults' } });
		if($('event_list')) 
			Effect.SlideDown($('event_list'));
    }// _initMap
    
    function _createLocationInfo(location) {
        var infotext = "<strong>" + location.DOORNAME + "</strong><br/><br/>"
                        + location.ADDRESS;
        if(location.PHONE1) {
            infotext += "<br/>" + location.PHONE1;
        }
        if(location.STORE_HOURS) {
            infotext += "<br/>" + location.STORE_HOURS;
        }
        return infotext;
    }

    function _showError(error) {
    	var messageUL = messages.down('ul');
    	messageUL.select('li').each(function(elm){elm.remove()});
    	messageUL.insert('<li>' + error + '</li>');
    	messages.show();
    	setTimeout(function() {
    	    messages.fade();
	    }, 500);
    }
    
    region_dd.observe('change', function(e) {
        _updateStateProvince();
        state_dd.activate();
    });

    state_dd.observe('change', function(e) {
        _updateDoors();
        doors_dd.activate();
    });

    locator_button.observe('click', function(e) {
        _prepLocator();
    });
	
	// these are temp functions 'till I look at tabs functionality existing elsewhere...
	map_tab.observe('click', function(e) {
		//_prepLocator();
		return setTab('map');
	});
	
	events_tab.observe('click', function(e) {
		return setTab('events');
	});
	
	
    
    // init code
    
    sr_wrapper2.hide();
    messages.hide();
    _initDropdowns();
});// end dom:loaded

function setTab(tab){
	if(tab == 'map'){
		$('map_pane').show();
		$('sr_wrapper2').show();
		$('events_pane').hide();
		$('view_map_pane').up().toggleClassName('selected');
		$('view_events_pane').up().toggleClassName('selected');
	}else{
		$('map_pane').hide();
		$('sr_wrapper2').hide();
		$('events_pane').show();
		$('view_events_pane').up().toggleClassName('selected');
		$('view_map_pane').up().toggleClassName('selected');
	}
	return false;
}

function selectStoreMarker(marker_index){
	//map.panTo(points[marker_index]);
	markers[marker_index].openInfoWindowHtml(loc_infos[marker_index]);
}