var ValueUpdater = Class.create({
    update: function(obj) {
        var valueList = {};
        if (obj != null && obj != undefined) {
            valueList[obj.id.replace(/[^0-9]/g, '')] = obj.innerHTML;
        } else {
            $$('div#' + this.name + 'Dialog input[type=checkbox]').each (function(chk) {
                if ((chk.checked) && !chk.hasClassName('popupCheckAll')) {
                    valueList[chk.value] = $(chk.id + '_text').innerHTML;
                }
            });
        }
        if ($(this.name + 'Row') != null && $(this.name + 'Row') != undefined) {
            $(this.name + 'Row').style.display = "block";
        }
        this.append(valueList);
        if (this.postAppend) {
            this.postAppend();
        }
    },
    createHiddenTag: function(values) {
        var tags = "";
        values.each(function(value) {
            tags = tags + '<input type="hidden" name="' + this.name + '[]" value="' + value + '" class="' + this.name + 'Ids">';
        }.bind(this));
        return tags;
    },
    createTitleList: function(names) {
        var titleList = '';
        names.each(function(name) {titleList = titleList + ((titleList == '') ? name : '<br>' + name);});
        return titleList;
    },
    append: function(valueList) {
        var tags = "";
        for (key in valueList) {
            tags = tags + '<span><label><input type="checkbox" name="' + this.name + '[]" value="' + key + '" class="' + this.name + 'Ids" checked> ' + valueList[key] + '</label></span>';
        }
        $(this.name).innerHTML = tags;
    },
    isExisted: function (id) {
        return $$('#' + this.name + ' input').any(function (elem) {return elem.value == id;});
        return $(this.name).innerHTML.match(new RegExp(this.name + '\\[' + id + '\\]', 'i'));
    },
    clearTransits: function () {
        $$('.selectRouteBox').each(function (elem, idx) {
            $(elem).select('input').each(function (elem) { elem.value = ''; });
        });
        $$('.selectRouteDetail').each(function (elem) { elem.remove(); });
    }
});

var PrefValueUpdater = Class.create(ValueUpdater, {
    name: 'pref',
    className: 'prefList',
    append: function(valueList) {
        var tags = "";
        for (var key in valueList) {
            tags = tags + '<input type="hidden" name="pref[]" value="' + key + '" class="prefIds">' + ((tags == '') ? valueList[key] : ('/' + valueList[key]));
        }
        $('pref').innerHTML = tags;
        if (tags != '') {
            $('lineOption').style.display = "block";
            $('cityOption').style.display = "block";
            $('prefOption').style.display = "block";
        }
    }
});

var CityValueUpdater = Class.create(ValueUpdater, {
    name: 'city',
    className: 'cityList',
    postAppend: function() {
        if (!popupMap['townUpdate'].isActive()) {
            this.clearTransits();
        }
    }
});

var LineValueUpdater = Class.create(ValueUpdater, {
    name: 'line',
    className: 'lineList'
});

var FeatureValueUpdater = Class.create(ValueUpdater, {
    name: 'feature',
    className : 'featureList',
    append: function(valueList) {
        var tags = "";
        var groups = new Array('featureGroup1', 'featureGroup2');
        groups.each(function(i) {
            $$('ul#' + i + ' input[type=checkbox]').each(function(e) {
                e.parentNode.className = e.parentNode.className.replace(/on/);
                e.checked = false;
            });
        });
        for (key in valueList) {
            is_existed = false;
            groups.each(function(i) {
                $$('ul#' + i + ' input[type=checkbox]').each(function(e) {
                    if (key == e.value) {
                        is_existed = true;
                        e.checked = true;
                        e.parentNode.className = e.parentNode.className + ' on';
                    }
                });
            });
            if (!is_existed) {
                tags = tags + "<li class='on'><a href='javascript:void(0);' class='" + key + "' onclick='clickFeature(this);'>" + valueList[key] + "</a></li>";
                tags = tags + "<input type='checkbox' name='feature[" + key + "]' value='" + key + "' id='feature_" + key + "' style='display:none;' class='featureIds' checked>";
            }
        }
        $('feature').innerHTML = tags;
    }
});

var StationValueUpdater = Class.create(ValueUpdater, {
    name: 'station',
    className: 'stationList',

    append: function(valueList) {
        var tags = "";
        for (key in valueList) {
            tags = tags + '<span><label><input type="checkbox" name="station[]" value="' + key + '" class="stationIds" checked> ' + valueList[key] + '</label></span>';
        }
        $('station').innerHTML = $('station').innerHTML + tags;
    },
    update: function(obj) {
        var valueList = {};
        if (obj != null && obj != undefined) {
            valueList[obj.id.replace(/[^0-9]/g, '')] = obj.innerHTML;
            $('stationRow').style.display = "block";
        } else {
            $A(document.getElementsByClassName('popupCheckAll')).each(function(chkAll) {
                var checkboxs = $A(document.getElementsByClassName(chkAll.id));
                var chked = checkboxs.inject(0, function(num, chk) {return chk.checked ? num + 1 : num});
                if (chked == 0) {
                    return;
                }
                $('stationRow').style.display = "block";
                checkboxs.each(function(chk) {
                    if (chk.checked && !this.isExisted(chk.value)) {
                        valueList[chk.value] = $(chk.id + '_text').innerHTML;
                    }
                }.bind(this));
            }.bind(this));
        }
        this.append(valueList);
        this.postAppend();
    },
    postAppend: function() {
        this.clearTransits();
    }
});

var TownValueUpdater = Class.create(ValueUpdater, {
    name: 'town',
    className: 'townList',

    append: function(valueList) {
        var tags = "";
        for (key in valueList) {
            tags = tags + '<span><label><input type="checkbox" name="town[]" value="' + key + '" class="townIds" checked> ' + valueList[key] + '</label></span>';
        }
        $('town').innerHTML = $('town').innerHTML + tags;
    },
    update: function(obj) {
        var valueList = {};
        if (obj != null && obj != undefined) {
            valueList[obj.id.replace(/[^0-9]/g, '')] = obj.innerHTML;
            $('townRow').style.display = "block";
        } else {
            $A(document.getElementsByClassName('popupCheckAll')).each(function(chkAll) {
                var checkboxs = $A(document.getElementsByClassName(chkAll.id));
                var chked = checkboxs.inject(0, function(num, chk) {return chk.checked ? num + 1 : num});
                if (chked == 0) {
                    return;
                }
                $('townRow').style.display = "block";
                checkboxs.each(function(chk) {
                    if (chk.checked && !this.isExisted(chk.value)) {
                        valueList[chk.value] = $(chk.id + '_text').innerHTML;
                    }
                }.bind(this));
            }.bind(this));
        }
        this.append(valueList);
        this.postAppend();
    },
    postAppend: function() {
        this.clearTransits();
    }
});

var NminsLineValueUpdater = Class.create(ValueUpdater, {
    name: 'nminsLine',
    className : 'nminsLineList',
    append: function() {
    },
    update: function() {
    }
});

var NminsStationValueUpdater = Class.create(ValueUpdater, {
    name: 'nminsStation',
    className : 'nminsStationList',
    append: function() {
    },
    update: function() {
    }
});


var PopupObserver = Class.create({
    pre: null,
    city: null,
    line: null,
    station: null,
    town: null,
    initialize: function() {
        this.city = $('city');
        this.line = $('line');
        this.station = $('station');
        this.town = $('town');
        this.pref = $('pref');
    },
    clearPref: function() {
        if (this.pref != null) {
            this.pref.update('');
            //Element.hide($('prefRow'));
        }
    },
    clearCity: function() {
        if (this.city != null) {
            this.city.update('');
            Element.hide($('cityRow'));
        }
    },
    clearLine: function() {
        if (this.line != null) {
            this.line.update('');
            Element.hide($('lineRow'));
        }
    },
    clearStation: function() {
        if (this.station != null) {
            this.station.update('');
            Element.hide($('stationRow'));
        }
    },
    clearTown: function() {
        if (this.town != null) {
            this.town.update('');
            Element.hide($('townRow'));
        }
    },
    clear: function() {
        this.clearPref();
        this.clearCity();
        this.clearLine();
        this.clearStation();
        this.clearTown();
    }
});

PopupObserver.instance = null;
PopupObserver.getInstance = function() {
    if (this.instance == null) {
        this.instance = new PopupObserver();
    }
    return this.instance;
}

Element.observe(window, 'load', function() {
    $A(document.getElementsByClassName('hiddenStationId')).each(function(hiddenStation) {
        new Form.Element.Observer(hiddenStation, 0.2, function() {
            if (hiddenStation.value != '') {
                PopupObserver.getInstance().clear();
            }
        });
    });
});