// ----------------------------------------------------------------------------------------------------
// ACEGENE | Product * LayoutBuilderAndSearchEngine
//
// 2008.8.21 - 
// ----------------------------------------------------------------------------------------------------



var AjaxBox = Class.create();


AjaxBox.prototype.initialize = function() {
    this.loadMasterFile("json/master_data.json");
}


AjaxBox.prototype.loadMasterFile = function(uri) {
	var self = this;
	var loader = {
        request: function() { 
            var ajax = new Ajax.Request( uri, { method: 'get', onLoading: this.start, onComplete: this.response } );
        },
        start: function() {
            self.showLoading();
        },
        response: function(xhr) {
            self.showContent(xhr.responseText);
        }
    };
    loader.request();
}



AjaxBox.prototype.showLoading = function() {
}





AjaxBox.prototype.showContent = function(xhr) {
    var self = this;

    //変数定義
    AjaxBox.prototype.masterData = eval("(" + xhr + ")");
    AjaxBox.prototype.checkedFuncs = new Array();
    AjaxBox.prototype.checkedTypes = new Array();
    AjaxBox.prototype.currentItems = new Array();
    AjaxBox.prototype.currentFeatures = new Array();
    AjaxBox.prototype.currentKey = -1;
    AjaxBox.prototype.viewMode = "default";
    AjaxBox.prototype.isIE = Boolean(navigator.userAgent.match("MSIE"));
    AjaxBox.prototype.isIE6 = Boolean(navigator.userAgent.match("MSIE 6.0"));
    AjaxBox.prototype.blindFps = (this.isIE6) ? 15 : 30;
    AjaxBox.prototype.directNode;
    
    /*
    var mainContainer = $("product-container");
    Element.hide(mainContainer);
    Element.makeClipping(mainContainer);
    $("product-head").style.visibility = "hidden";
    */
	
    
    var div = $("product-main");
    var cnt = 0;

    for(var i=0; i<this.masterData.length; i++) {
        var cdata = self.masterData[i];
        
        var seriesDiv = document.createElement("div");
        seriesDiv.id = cdata.id;
        seriesDiv.className="series-container";
        
        var titleDiv = document.createElement("div");
        titleDiv.className="series-title";
        titleDiv.innerHTML = "<div class='wrap'><strong>" + cdata.series + "</strong>";
        titleDiv.innerHTML += "<p>" + cdata.description + "</p></div>";
        
        if(cdata.features.length) {
            var tfbObj = self.createToggleFeaturesButton(cdata.id);
            titleDiv.appendChild(tfbObj.node); 
        }
        
        var itemsDiv = document.createElement("div");
        itemsDiv.className="series-items";
        
        var items = cdata.items;
        for(var n=0; n<items.length; n++) {
            var iDiv = document.createElement("div");
            iDiv.id = "item" + items[n].pid;
            iDiv.sid = i;
            iDiv.iid = n;
            iDiv.enabled = true;
            iDiv.className = "item-col";
            iDiv.innerHTML = self.createThumbnailCol(items[n], cdata.id);
            iDiv.onclick = function() {
                if(this.enabled) { self.showDetail(this); }
            }
            iDiv.onmouseover = function() {
                if(this.enabled) { self.onmouseoverItem(this); }
            }
            iDiv.onmouseout = function() {
                if(this.enabled) { self.onmouseoutItem(this); }
            }
            iDiv.key = cnt++;
            
            self.currentItems.push(iDiv);
            itemsDiv.appendChild(iDiv);
        }
        
        
        var featureDiv = document.createElement("div");
        featureDiv.className="series-features";
        Element.hide(featureDiv);
        Element.makeClipping(featureDiv);
        
        var features = cdata.features;
        for(var m=0; m<features.length; m++) {
            var dDiv = document.createElement("div");
            dDiv.sid = i;
            dDiv.iid = m;
            dDiv.className = "feature-item-col";
            dDiv.innerHTML = self.createFeaturesCol(features[m], cdata.id);
            dDiv.onclick = function() {
                self.showFeatures(this);
            }
            dDiv.onmouseover = function() {
                self.onmouseoverItem(this);
            }
            dDiv.onmouseout = function() {
                self.onmouseoutItem(this);
            }
            
            dDiv.key = m;
            
            featureDiv.appendChild(dDiv);
        }
        if(self.isIE) {
            self.fillBlankCol(itemsDiv, items.length);
            self.fillBlankCol(featureDiv, features.length);
        }
        
        if(cdata.features.length) {
            var dNav = self.createFeatureNav(tfbObj.btn);
            featureDiv.appendChild(dNav);
        }
        
        var wrapperDiv = document.createElement("div");
        wrapperDiv.className = "series-wrapper";
        
        wrapperDiv.appendChild(featureDiv);
        wrapperDiv.appendChild(itemsDiv);
        
        seriesDiv.appendChild(titleDiv);
        seriesDiv.appendChild(wrapperDiv);
        div.appendChild(seriesDiv);
    }
    
    

    // オーバーレイ用エレメンツ
    
    var overlayDiv = document.createElement("div");
    overlayDiv.id = "overlay-container";
    Element.hide(overlayDiv);
    document.body.appendChild(overlayDiv);
    
    var ajaxDiv = document.createElement("div");
    ajaxDiv.id = "ajaxbox-content";
    overlayDiv.appendChild(ajaxDiv);
    
    var layerDiv = document.createElement("div");
    layerDiv.id = "overlay-layer";
    layerDiv.checkLayer = overlayDiv;
    layerDiv.onclick = function() {
        if(this.checkLayer.appeared) {
            self.closeOverlay();
        }
    }
    document.body.appendChild(layerDiv);
    
    
    var prevNav = document.createElement("div");
    var prevLink = document.createElement("a");
    
    prevNav.id = "pnav-prev";
    prevLink.enabled = true;
    prevLink.href = "javascript:void(0);";
    prevLink.onclick = function() {
        if(this.enabled) { self.moveDetailPage("prev"); }
    }
    prevLink.innerHTML = "前へ";
    
    prevNav.appendChild(prevLink);
    overlayDiv.appendChild(prevNav);
    

    var nextNav = document.createElement("div");
    var nextLink = document.createElement("a");
    
    nextNav.id = "pnav-next";
    nextLink.enabled = true;
    nextLink.href = "javascript:void(0);";
    nextLink.onclick = function() {
        if(this.enabled) { self.moveDetailPage("next"); }
    }
    nextLink.innerHTML = "次へ";
    
    nextNav.appendChild(nextLink);
    overlayDiv.appendChild(nextNav);
    
    
    var closeNav = document.createElement("div");
    var closeLink = document.createElement("a");
    
    closeNav.id = "pnav-close";
    closeLink.href = "javascript:void(0);";
    closeLink.onclick = function() {
        self.closeOverlay();
    }
    closeLink.innerHTML = "閉じる";
    
    closeNav.appendChild(closeLink);
    overlayDiv.appendChild(closeNav);
    
        
    this.setSearchNav();
    
    $("product-container").style.backgroundImage = "none";
    
    this.scrollWindow();
}




AjaxBox.prototype.scrollWindow = function() {
    var param = location.hash.replace("#", "");
    if(! param) { return; }
    
    var node = $(param);
    var isItem = false;
    
    if(! node) {
        node = $("item"+param);
    }
    
    if(! node) {
        return;
    }
    else {
        isItem = true;
    }
    
    var positions = Position.cumulativeOffset(node);
    
    var finish = positions[1];
    window.scrollTo(0, finish);
    
    if(isItem) {
        this.directNode = node;
        Element.addClassName(node, "hover");
        setTimeout(function(){ node.onclick(); }, 200);
    }
}






// ----------------------------------------------------------------------------------------------------
// 空白セルで埋め尽くす（IE6のバグFIXのため）
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.fillBlankCol = function(node, num) {
    var cols = 5 - (num % 5);
    if(cols == 5) { return; }
    for(var i=0; i<cols; i++) {
        var col = document.createElement("div");
        col.className = "blank-col";
        node.appendChild(col);
    }
}





// ----------------------------------------------------------------------------------------------------
// 詳細画面内ナビ　enabled/disabled 切替え
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.activateNav = function() {
    var targetArray;
    if(this.viewMode == "detail-item") {
        targetArray = this.currentItems;
    }
    else if(this.viewMode == "detail-feature") {
        targetArray = this.currentFeatures;
    }

    var nextNav = $("pnav-next");
    var nextLink = nextNav.getElementsByTagName("a")[0];
    if(this.currentKey+1 >= targetArray.length) {
        nextLink.enabled = false
        nextNav.className = "disabled";
    }
    else {
        nextLink.enabled = true;
        nextNav.className = "";
    }

    var prevNav = $("pnav-prev");
    var prevLink = prevNav.getElementsByTagName("a")[0];
    if(this.currentKey-1 < 0) {
        prevLink.enabled = false
        prevNav.className = "disabled";
    }
    else {
        prevLink.enabled = true;
        prevNav.className = "";
    }
}





// ----------------------------------------------------------------------------------------------------
// 詳細画面表示
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.showDetail = function(node) {
    var self = this;
    
    this.viewMode = "detail-item";
    this.currentKey = node.key;
    
    var div = $("ajaxbox-content");
    var sid = this.masterData[node.sid].id;
    var stitle = this.masterData[node.sid].series;
    var idata = this.masterData[node.sid].items[node.iid];
    div.innerHTML = this.createDetailCol(idata, sid, stitle);
    div.innerHTML += this.getCloneList();

    var colorCol = $("color-changer");
    var colors = idata.color;
    for(var i=0; i<colors.length; i++) {
        var span = document.createElement("span");
        span.innerHTML = "<img src='asset/colorchip/" + colors[i] + ".gif' />";
        span.key = i;
        span.sid = node.sid;
        span.iid = node.iid;
        span.cid = colors[i];
        if(colors.length > 1) {
            span.className = "multiple";
        }
        span.onclick = function() {
            self.changeItemColor(this);
        }
        colorCol.appendChild(span);
    }
    
    var ctype = idata.type;
    var cfuncs = idata.funcs;
    this.removeLinkFromCloneList(ctype, cfuncs);
    
    this.activateNav();
    this.showOverlay();
}




// ----------------------------------------------------------------------------------------------------
// エフェクト → 詳細画面表示
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.showOverlay = function() {

    var self = this;
    var layer = $("overlay-layer");
    var content = $("overlay-container");
    
    
    var pageinfo = this.getPageInfo();
    
    //layer.style.top = pageinfo.offset.y + "px";
    var margin = (this.isIE) ? 50 : 0;
    layer.style.height = (pageinfo.maximum.height + margin) + "px";
    layer.style.display = "block";
    
    content.style.top = (pageinfo.offset.y + 60) + "px";
    content.style.left = Math.floor( (pageinfo.inner.width - 974) / 2) + "px";
    content.style.display = "block";

    
    var contentNode;
    
    if(! layer.appeared) {
        this.setAlphaZero(layer);
        Element.hide(content);
        Element.makeClipping(content);
        showBaseLayer();
    }
    else {
        showInnerContent();
    }
    
    function showBaseLayer() {
        new Effect.Opacity(layer, {
            from: 0.0,
            to: 0.9,
            fps: 30,
            duration: 0.3,
            delay: 0.0,
            afterSetup: function(effect) {
            },
            beforeStartInternal: function(effect) {
                layer.appeared = true;
            },
            afterFinishInternal: function(effect) {
                showInnerContent();
            }
        });
    }
    
    function showInnerContent() {
        Element.hide(content);
        new Effect.BlindDown(content, {
            from: 0.0,
            to: 1.0,
            fps: self.blindFps,
            duration: ((self.isIE6) ? 0.2 : 0.5),
            delay: 0.3,
            restoreAfterFinish: true,
            afterSetup: function(effect) {
                Element.show(effect.element);
            },
            beforeStartInternal: function(effect) {
            },
            afterFinishInternal: function(effect) {
                content.appeared = true;
                content.className = "";
            }
        });
    }
}



// ----------------------------------------------------------------------------------------------------
// 詳細画面クローズ
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.closeOverlay = function() {
    var self = this;
    var layer = $("overlay-layer");
    var content = $("overlay-container");
    
    function hideBaseLayer() {
        new Effect.Opacity(layer, {
            to: 0.0,
            fps: self.blindFps,
            duration: 0.3,
            delay: 0.0,
            afterSetup: function(effect) {
            },
            beforeStartInternal: function(effect) {
                layer.appeared = false;
            },
            afterFinishInternal: function(effect) {
                layer.style.display = "none";
            }
        });
    }
    
    function hideInnerContent() {
        new Effect.BlindUp(content, {
            to: 1.0,
            fps: self.blindFps,
            duration: ((self.isIE6) ? 0.1 : 0.25),
            delay: 0.0,
            afterSetup: function(effect) {
            },
            beforeStartInternal: function(effect) {
                content.appeared = false;
                content.className = "moving";
            },
            afterFinishInternal: function(effect) {
                hideBaseLayer();
                Element.hide(effect.element);
                Element.makeClipping(effect.element);
                self.hideDirectNodeHover();
            }
        });
    }
    
    hideInnerContent();
}




AjaxBox.prototype.hideDirectNodeHover = function() {
    if(this.directNode) {
        Element.removeClassName(this.directNode, "hover");
        this.directNode = undefined;
    }
}




// ----------------------------------------------------------------------------------------------------
// アルファをゼロに
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.setAlphaZero = function(node) {
    node.style.opacity = "0";
    node.style.MozOpacity = "0";
    node.style.filter = "alpha(opacity=0)";
}


// ----------------------------------------------------------------------------------------------------
// 特徴[Features]詳細画面表示
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.showFeatures = function(node) {
    var self = this;
    
    this.viewMode = "detail-feature";
    this.currentKey = node.key;
    
    var div = $("ajaxbox-content");
    var fileId = this.masterData[node.sid].features[node.iid];
    var sid = this.masterData[node.sid].id;

    //if(! this.currentFeatures.length) {
        this.currentFeatures = $A($(sid).getElementsByClassName("feature-item-col"));
    //}
    
    div.innerHTML = this.createFeaturesZoomCol(fileId, sid);
    
    this.activateNav();
    this.showOverlay();
}





// ----------------------------------------------------------------------------------------------------
// マウスオーバー／マウスアウト
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.onmouseoverItem = function(node) {
    Element.addClassName(node, "hover");
}

AjaxBox.prototype.onmouseoutItem = function(node) {
    Element.removeClassName(node, "hover");
}



// ----------------------------------------------------------------------------------------------------
// 商品カラーチェンジ
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.changeItemColor = function(node) {
    var img = $("item-image").getElementsByTagName("img")[0];
    var dir = this.masterData[node.sid].id;
    var idata = this.masterData[node.sid].items[node.iid];
    //var cid = (node.key == 0) ? "" : "_" + node.cid;
    var cid = "_" + node.cid;
    var imgsrc = "asset/item/zoom/" + idata.pid + cid + ".jpg";
    img.src = imgsrc;
}












// ----------------------------------------------------------------------------------------------------
// サムネイル用 HTML生成
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.createThumbnailCol = function(obj, dir) {
    var str = "";
    str += "<dl>";
    str += "<dt>" + obj.pid + "</dt>";
    str += "<dd class='size'>" + this.formatSizeShort(obj.size) + "</dd>";
    str += "<dd class='price'>" + this.formatPrice(obj.price) + "</dd>";
    str += "<dd class='weight'>" + this.formatWeight(obj.weight) + "</dd>";
    str += "</dl>";
    str += "<span>" + this.createThumbImage(obj.pid, dir) + "</span>";
    
    return str;
}




// ----------------------------------------------------------------------------------------------------
// 詳細画面用 HTML生成
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.createDetailCol = function(obj, dir, ttl) {
    var str = "";
    str = "<div class='product-detail detail-col'>";
    str += "<dl class='title-list'>";
    str += "<dt>" + ttl + "</dt>";
    str += "<dd>" + obj.pid + "</dt>";
    str += "</dl>";
    
    str += "<dl class='spec-list'>";
    str += "<dt>Size</dt>";
    str += "<dd>: " + this.formatSizeLong(obj.size) + "</dd>";
    str += "<dt>Weight</dt>";
    str += "<dd>: " + this.formatWeight(obj.weight) + this.formatLiter(obj.liter, obj.type) + "</dd>";
    str += "<dt>Price</dt>";
    str += "<dd>: " + this.formatPrice(obj.price) + "</dd>";
    str += "</dl>";
    
    str += "<dl class='color-list'>";
    str += "<dt>Color</dt>";
    str += "<dd id='color-changer'></dd>";
    str += "</dl>";
	
	if(obj.caption) {
		str += "<p class='caption'>";
		str += this.formatCaption(obj.caption);
		str += "</p>";
	}
    
    str += "<span id='item-image'>" + this.createDetailImage(obj.pid, dir, obj.color[0]) + "</span>";
    str += "</div>";
    
    return str;
}



// ----------------------------------------------------------------------------------------------------
// 機能・種類リスト　クローン生成
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.getCloneList = function() {
    var str = "";
    var funcDiv = $("list-functions");
    var typeDiv = $("list-types");
    
    str += "<div id='detail-list-clone'>";
    str += "<div id='dlist-func'>" + funcDiv.innerHTML + "</div>";
    str += "<div id='dlist-type'>" + typeDiv.innerHTML + "</div>";
    str += "</div>";
    
    return str;
}


// ----------------------------------------------------------------------------------------------------
// 機能・種類リスト　クローンからリンクを削除
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.removeLinkFromCloneList = function(ctype, cfuncs) {
    var self = this;

    var cloneTList = $("dlist-type");
    var tlists = cloneTList.getElementsByTagName("dd");
    for(var i=0; i<tlists.length; i++) {
        var node = tlists[i].getElementsByTagName("a")[0];
        var txt = node.innerHTML;
        var img = "";
        
        node.sid = i+1;
        
        if(this.isIE6) {
            var file = (ctype-1 == i) ? "square_black.gif" : "square_gray.gif";
            img = "<img src='img/" + file + "' />";
            node.innerHTML = img + txt;
        }
        node.onmouseover = function() {
            self.showBalloon(this, true);			
        }
        node.onmouseout = function() {
            self.hideBalloon(this);
        }
        
        node.className = (ctype-1 == i) ? "checked" : "unchecked";
    }
    
    var cloneFList = $("dlist-func");
    var flists = cloneFList.getElementsByTagName("dd");
    for(var i=0; i<flists.length; i++) {
        var node = flists[i].getElementsByTagName("a")[0];
        var txt = node.innerHTML;
        var bool = false;
        for(var n=0; n<cfuncs.length; n++) {
            if(Number(cfuncs[n]) - 1 == i) { bool = true; break; }
        }
        var img = "";
        
        node.sid = i+1;
        
        if(this.isIE6) {
            var file = (bool) ? "square_black.gif" : "square_gray.gif";
            img = "<img src='img/" + file + "' />";
            node.innerHTML = img + txt;
        }
		
        node.onmouseover = function() {
            self.showBalloon(this, true);
        }
        node.onmouseout = function() {
            self.hideBalloon(this);
        }
        
        node.className = (bool) ? "checked" : "unchecked";
    }
}







// ----------------------------------------------------------------------------------------------------
// 特徴[Features] サムネイル用 HTML生成
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.createFeaturesCol = function(fid, dir) {
    var str = "";
    str += "<span>" + this.createFeatureImage(fid, dir) + "</span>";
    
    return str;
}


AjaxBox.prototype.createFeaturesZoomCol = function(fid, dir) {
    var str = "";
    str += "<span>" + this.createFeatureZoomImage(fid, dir) + "</span>";
    
    return str;
}




// ----------------------------------------------------------------------------------------------------
// 特徴[Features] 表示切替えボタン生成
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.createToggleFeaturesButton = function(tid) {
    var self = this;

    var div = document.createElement("div");
    var btn = document.createElement("a");
    div.className = "toggle-button-area";
    btn.tid = tid;
    btn.state = "closed";
    btn.className = "closed";
    btn.href = "javascript:void(0);";
    btn.innerText = "シリーズの特徴を見る";
    btn.onclick = function() {
        if(!this.lock) { self.toggleFeatures(this); }
    }
    
    div.appendChild(btn);
    
    return {node:div, btn:btn};
}


// ----------------------------------------------------------------------------------------------------
// 特徴[Features] 折りたたみボタン生成
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.createFeatureNav = function(node) {
    var self = this;
    
    var div = document.createElement("div");
    var btn = document.createElement("a");
    div.className = "blind-button-area";
    btn.tnode = node;
    btn.href = "javascript:void(0);";
    btn.innerText = "シリーズの特徴を閉じる";
    btn.onclick = function() {
        self.closeFeatures(this);
    }
    
    div.appendChild(btn);
    
    return div;
}








// ----------------------------------------------------------------------------------------------------
// テキスト整形
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.formatSizeShort = function(obj) {
    var str = "";
    str += "W" + ((obj.w) ? obj.w : "--");
    str += "/H" + ((obj.h) ? obj.h : "--");
    str += "/D" + ((obj.d) ? obj.d : "--");
    str += "cm";
    str += (obj.info) ? ("<em>" + obj.info + "</em>") : "";
    return str;
}

AjaxBox.prototype.formatSizeLong = function(obj) {
    var str = "";
    str += "W" + ((obj.w) ? obj.w : "--") + "cm";
    str += " / H" + ((obj.h) ? obj.h : "--") + "cm";
    str += " / D" + ((obj.d) ? obj.d : "--") + "cm";
    str += (obj.info) ? ("<em>" + obj.info + "</em>") : "";
    return str;
}

AjaxBox.prototype.formatPrice = function(str) {
    if(! str) { return ""; }
    str = "&yen;" + str;
    return str;
}


AjaxBox.prototype.formatWeight = function(str) {
    if(! str) { return ""; }
    str = str + "g";
    return str;
}

AjaxBox.prototype.formatLiter = function(str, type) {
    if(! str) { return ""; }
    if(type == 4) { return ""; }
    str = "（" + str + "L）";
    return str;
}

AjaxBox.prototype.formatCaption = function(str) {
    if(! str) { return ""; }
    return str;
}




// ----------------------------------------------------------------------------------------------------
// 画像生成
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.createThumbImage = function(str, dir) {
    str = "<img src='asset/item/thumb/" + str + ".jpg' + alt='" + str + "' />";
    return str;
}

AjaxBox.prototype.createDetailImage = function(str, dir, colorId) {
    str = "<img src='asset/item/zoom/" + str + "_" + colorId + ".jpg' + alt='" + str + "' />";
    return str;
}

AjaxBox.prototype.createFeatureImage = function(str, dir) {
    str = "<img src='asset/feature/thumb/" + dir + "/" + str + ".jpg' + alt='" + str + "' />";
    return str;
}

AjaxBox.prototype.createFeatureZoomImage = function(str, dir) {
    str = "<img src='asset/feature/zoom/" + dir + "/" + str + ".jpg' + alt='" + str + "' />";
    return str;
}






// ----------------------------------------------------------------------------------------------------
// 詳細画面内ページ移動
// ----------------------------------------------------------------------------------------------------


AjaxBox.prototype.moveDetailPage = function(mode) {
    //alert(this.currentItems);
    //alert(this.currentKey);
    
    var self = this;
    var func;
    
    this.hideDirectNodeHover();
    
    if(this.viewMode == "detail-item") {
        if(mode == "next") {
            func = function() { self.currentItems[self.currentKey+1].onclick() };
        }
        else {
            func = function() { self.currentItems[self.currentKey-1].onclick(); };
        }
    }
    else if(this.viewMode == "detail-feature") {
        if(mode == "next") {
            func = function() { self.currentFeatures[self.currentKey+1].onclick(); };
        }
        else {
            func = function() { self.currentFeatures[self.currentKey-1].onclick(); };
        }
    }
    
    
    var content = $("overlay-container");
    
    new Effect.BlindUp(content, {
        from: 0.0,
        to: 1.0,
        fps: self.blindFps,
        duration: ((self.isIE6) ? 0.2 : 0.5),
        delay: 0.0,
        afterSetup: function(effect) {
        },
        beforeStartInternal: function(effect) {
            content.className = "moving";
            content.appeared = false;
        },
        afterFinishInternal: function(effect) {
            Element.hide(effect.element);
            func();
        }
    });
}





// ----------------------------------------------------------------------------------------------------
// 特徴[Features] 表示切替え
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.toggleFeatures = function(node) {

    node.lock = true;
    var tNode = $(node.tid).getElementsByClassName("series-features")[0];
    
    
    if(node.state == "closed") {
        new Effect.BlindDown(tNode, {
            from: 0.0,
            to: 1.0,
            fps: 30,
            duration: 0.5,
            restoreAfterFinish: true,
            afterSetup: function(effect) {
                Element.show(effect.element);
            },
            beforeStartInternal: function(effect) {
            },
            afterFinishInternal: function(effect) {
                node.lock = false;
                node.state = "opened";
                node.className = "opened";
                node.innerText = "シリーズの特徴を閉じる";
            }
        });
    }
    else if(node.state == "opened") {
        new Effect.BlindUp(tNode, {
            from: 0.0,
            to: 1.0,
            fps: 30,
            duration: 0.5,
            restoreAfterFinish: true,
            beforeStartInternal: function(effect) {
            },
            afterFinishInternal: function(effect) {
                Element.hide(effect.element);
                node.lock = false;
                node.state = "closed";
                node.className = "closed";
                node.innerText = "シリーズの特徴を見る";
            }
        });
    }
}


AjaxBox.prototype.closeFeatures = function(node) {
    var btnNode = node.tnode;
    this.toggleFeatures(btnNode);
}














// ----------------------------------------------------------------------------------------------------
// 絞り込みナビ設定
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.setSearchNav = function() {
    var self = this;

    var funcNav = $("list-functions");
    var fbtns = funcNav.getElementsByTagName("a");
    for(var i=0; i<fbtns.length; i++) {
        var btn = fbtns[i];
        btn.sid = i+1;
        btn.stype = "func";
        btn.checked = false;
        btn.className = "unchecked";
        btn.href = "javascript:void(0);";
		if(!self.isIE) {btn.title=""}
        btn.onclick = function() {
            self.searchItems(this);
        }
        btn.onmouseover = function() {
            self.showBalloon(this);
        }
        btn.onmouseout = function() {
            self.hideBalloon(this);
        }		
    }

    var typeNav = $("list-types");
    var tbtns = typeNav.getElementsByTagName("a");
    for(var i=0; i<tbtns.length; i++) {
        var btn = tbtns[i];
        btn.sid = i+1;
        btn.stype = "type";
        btn.checked = false;
        btn.className = "unchecked";
		if(!self.isIE) {btn.title=""};
        btn.href = "javascript:void(0);";
        btn.onclick = function() {
            self.searchItems(this);	
        }
        btn.onmouseover = function() {
			self.showBalloon(this);			
        }		
        btn.onmouseout = function() {
            self.hideBalloon(this);
        }	
    }
    
    var clearBtn = $("reset-button-area").getElementsByTagName("a")[0];
    clearBtn.href = "javascript:void(0);";
    clearBtn.onclick = function() {
        self.resetSearch();
    }
}



// ----------------------------------------------------------------------------------------------------
// バルーン表示
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.showBalloon = function(node, isOverlay) {
	var self = this;
    var div = node.nextSibling;
    Element.addClassName(div, "hover");

    
    if(isOverlay) {
        div.style.left = (node.sid * 30 + 20) + "px";
        div.style.top = 6 - (Element.getHeight(div)) + "px";
    }
    else {
        div.style.left = (node.sid * 30 + 20) + "px";
        div.style.top = 6 - (Element.getHeight(div)) + "px";
    }
}


// ----------------------------------------------------------------------------------------------------
// バルーン表示
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.hideBalloon = function(node) {
    var div = node.nextSibling;
    Element.removeClassName(div, "hover");
}






// ----------------------------------------------------------------------------------------------------
// 絞り込み開始
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.searchItems = function(node) {
    //alert("search +++ " + node.stype + "/" + node.sid);
    
    if(node) {
        if(node.checked) {
            this.removeSearchCondition(node);
            node.className = "unchecked";
            node.checked = false;
        }
        else {
            this.addSearchCondition(node);
            node.className = "checked";
            node.checked = true;
        }
    }
    
    var items = document.getElementsByClassName("item-col");
    
    //alert(this.checkedTypes)
    //alert(this.checkedFuncs)
    
    this.currentItems = new Array();
    var cnt = 0;
    
    for(var i=0; i<items.length; i++) {
        var citem = items[i];
        var obj = this.masterData[citem.sid].items[citem.iid];
        if(this.checkMatchingCondition(obj)) {
            citem.key = cnt++;
            this.currentItems.push(citem);
            citem.enabled = true;
            Element.removeClassName(citem, "disabled");
        }
        else {
            citem.key = -1;
            citem.enabled = false;
            Element.addClassName(citem, "disabled");
        }
    }
}



// ----------------------------------------------------------------------------------------------------
// 絞り込み条件にマッチしているかどうかの判定
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.checkMatchingCondition = function(obj) {
    if(this.checkedTypes.length == 0 && this.checkedFuncs.length == 0) {
        return true;
    }
    
    var isMatchType = Boolean(! this.checkedTypes.length);
    var isMatchFunc = Boolean(! this.checkedFuncs.length);

    for(var i=0; i<this.checkedTypes.length; i++) {
        if(this.checkedTypes[i] == obj.type) {
            isMatchType = true;
            break;
        }
    }
    
    
    for(var n=0; n<this.checkedFuncs.length; n++) {
        for(var m=0; m<obj.funcs.length; m++) {
            if(this.checkedFuncs[n] == obj.funcs[m]) {
                isMatchFunc = true;
                break;
            }
        }
    }
    
    var bool = Boolean(isMatchType && isMatchFunc);
 
    return bool;
}





// ----------------------------------------------------------------------------------------------------
// 絞り込み条件を増やす
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.addSearchCondition = function(node) {
    var targetArray;
    if(node.stype == "func") {
        targetArray = this.checkedFuncs;
    }
    else if(node.stype == "type") {
        targetArray = this.checkedTypes;
    }
    
    targetArray.push(node.sid);
    targetArray.sort();
}



// ----------------------------------------------------------------------------------------------------
// 絞り込み条件を減らす
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.removeSearchCondition = function(node) {
    var targetArray;
    if(node.stype == "func") {
        targetArray = this.checkedFuncs;
    }
    else if(node.stype == "type") {
        targetArray = this.checkedTypes;
    }
    
    for(var i=0; i<targetArray.length; i++) {
        if(targetArray[i] == node.sid) {
            targetArray.splice(i, 1);
        }
    }
}




// ----------------------------------------------------------------------------------------------------
// 絞り込み条件リセット
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.resetSearch = function() {
    this.checkedFuncs = new Array();
    this.checkedTypes = new Array();
    this.searchItems();
    
    var funcNav = $("list-functions");
    var fbtns = funcNav.getElementsByTagName("a");
    for(var i=0; i<fbtns.length; i++) {
        var btn = fbtns[i];
        btn.checked = false;
        btn.className = "unchecked";
    }

    var typeNav = $("list-types");
    var tbtns = typeNav.getElementsByTagName("a");
    for(var i=0; i<tbtns.length; i++) {
        var btn = tbtns[i];
        btn.checked = false;
        btn.className = "unchecked";
    }
}











// ----------------------------------------------------------------------------------------------------
// ウインドウのプロパティを取得
// ----------------------------------------------------------------------------------------------------

AjaxBox.prototype.getPageInfo = function() {
	var pageinfo = {
		inner: { width:Number, height:Number },
		maximum: { width:Number, height:Number },
		offset: { x:Number, y:Number }
	};

    pageinfo.inner.width  = window.innerWidth
                         || document.documentElement.clientWidth
						 || document.body.clientWidth;

    pageinfo.inner.height = window.innerHeight
                         || document.documentElement.clientHeight
						 || document.body.clientHeight;

    pageinfo.maximum.width  = document.body.scrollWidth
						   || document.body.offsetWidth;

    pageinfo.maximum.height = window.innerHeight + window.scrollMaxY
                           || document.body.scrollHeight
						   || document.body.offsetHeight;

    pageinfo.offset.x = window.pageXOffset
                     || document.documentElement.scrollLeft
                     || document.body.scrollLeft
                     || 0;
    pageinfo.offset.y = window.pageYOffset
                     || document.documentElement.scrollTop
                     || document.body.scrollTop
                     || 0;
	return pageinfo;
}