var Attr = Attr || { };
Attr.Content = {
    'wrapper_category' : 'カテゴリー',
    'wrapper_brand' : 'ブランド',
    'wrapper_store' : 'ショップ'
};

Attr.showmore = function(link, keyword, channelId, categoryId) {
	var olink = document.getElementById(link);
    var linkid = "wrapper_" + (olink.id ? olink.id : 'category');
    
    /**
     * Check and close unhidden box
     */
    for (var i in this.Content) {
    	if (i != linkid) {
    		var ow = document.getElementById(i);
    		if (ow && ow.style.display == 'block') {
    			ow.style.display = 'none';
    		}
    	}
    }
    
    var wrapper = document.getElementById(linkid);
    if (! wrapper) {
        wrapper = this.create(linkid, link, keyword, channelId, categoryId);
        olink.parentNode.appendChild(wrapper);
    } else {
        wrapper.style.display = (wrapper.style.display == 'block') ? 'none' : 'block';
    }
};

Attr.create = function(name, type, keyword, channelId, categoryId) {
    var wrapper = document.createElement('div');
    wrapper.setAttribute('id', name);
    wrapper.setAttribute('class', 'attrmorewrapper');
    wrapper.setAttribute('className', 'attrmorewrapper');
    wrapper.style.display = 'block';
    var h3 = document.createElement('h3');

    var close = document.createElement('a');
    close.setAttribute('href', 'javascript:void(0);');
    close.setAttribute('class', 'close');
    close.setAttribute('className', 'close');
    close.appendChild(document.createTextNode('close'));
    //close.setAttribute('onclick', function () { document.getElementById("' + name + '").style.display="none";});
    close.onclick = function () { document.getElementById(name).style.display="none";};
/*    var image = document.createElement('img');
    image.setAttribute('src', '/images/default/attrmore_close.gif');
    image.setAttribute('alt', 'close');
    close.appendChild(image);*/
    h3.appendChild(close);
    h3.appendChild(document.createTextNode(this.Content[name]));
    wrapper.appendChild(h3);

	var params = {
		'keyword' : keyword,
		'type' : type,
		'channel' : channelId,
		'category' : categoryId
	};
    $.getJSON(
        '/ajax/search/async_attributes.php',
        params,
        function (data) {
            var content = document.createElement('div');
            content.setAttribute('class', 'content');
            content.setAttribute('className', 'content');
            if (type == 'category') {
                $.each(data, function(channels, channel) {
                    content.appendChild(Attr.buildSubCollapse(channel, name, type));
                });
            } else {
                content.appendChild(Attr.buildSubCollapse(data, name, type));
            }
            wrapper.appendChild(content);
        }
    );
    return wrapper;
};

Attr.buildSubCollapse = function(channel, name, type) {
    var collapse = document.createElement('div');
    collapse.setAttribute('class', 'subCollapse');
    collapse.setAttribute('className', 'subCollapse');
    
    var gototop = document.createElement('div');
    gototop.setAttribute('class', 'gototop');
    gototop.setAttribute('className', 'gototop');

    var a = document.createElement('a');
    a.setAttribute('href', 'javascript:void(0);');
    //a.setAttribute('onclick', 'Attr.expandAll("'+name+'");');
    a.onclick = function (e) {Attr.expandAll(name, e);};
    a.appendChild(document.createTextNode('全' + Attr.Content[name]));
    gototop.appendChild(a);
    
    gototop.appendChild(document.createTextNode(' '));

    var b = document.createElement('a');
    b.setAttribute('href', 'javascript:void(0);');
    //b.setAttribute('onclick', 'Attr.scrollTop("' + name + '");');
    b.onclick = function (e) {Attr.scrollTop(name, e);};
    b.appendChild(document.createTextNode('ページトップへ戻る'))
    gototop.appendChild(b);

    var h4 = document.createElement('h4');
    h4.setAttribute('id', 'h_' + channel.id);
    //h4.setAttribute('onclick', 'Attr.toggleSub(this, "' + name + '");');
    //h4.onclick = function () {Attr.toggleSub(this, name);};
    h4.appendChild(document.createTextNode(channel.name));
    h4.appendChild(document.createElement('span').appendChild(document.createTextNode('(' + channel.amount + ')')));

    collapse.appendChild(gototop);
    collapse.appendChild(h4);
    collapse.onclick = function () {Attr.toggleSub(h4, name);};

    var subcontent = document.createElement('div');
    subcontent.setAttribute('id', name + '_subcontent_' + h4.id);
    subcontent.setAttribute('class', 'subcontent');
    subcontent.setAttribute('className', 'subcontent');
    var ul = document.createElement('ul');
    if (type == 'category') {
    	data = channel.categories;
    } else {
    	data = channel;
    }
    
    $.each(data, function(items, item) {
        var li = document.createElement('li');
        var link = document.createElement('a');
        link.setAttribute('href', item.url);
        link.onclick = function() {$.cookie('ql', item.name, {path:'/'})};
        link.appendChild(document.createTextNode(item.name));
        link.appendChild(document.createTextNode(' '));
        link.appendChild(document.createElement('span').appendChild(document.createTextNode('(' + item.amount + ')')));
        li.appendChild(link);
        ul.appendChild(li);
    });
    subcontent.appendChild(ul);
    collapse.appendChild(subcontent);

    if (type == 'category') {
    	subcontent.style.display = 'none';
    	return collapse;
    } else {
    	return subcontent;
    }
};

Attr.toggleSub = function(element, name) {
    var parent = element.parentNode;
    parent.setAttribute('class', (parent.getAttribute('class') == 'subExpand') ? 'subCollapse' : 'subExpand');
    parent.setAttribute('className', (parent.getAttribute('className') == 'subExpand') ? 'subCollapse' : 'subExpand');
    var subcontent = document.getElementById(name + '_subcontent_' + element.id);
    subcontent.style.display = (subcontent.style.display == 'none') ? 'block' : 'none';
}

Attr.expandAll = function(name, event) {
    var divs = document.getElementsByTagName('div');
    var len = 0;
    for (var i in divs) {
        if (divs[i].id && divs[i].id.indexOf(name + '_subcontent_') == 0) {
            if (divs[i].style.display == 'none') {
                divs[i].style.display = 'block';
                divs[i].parentNode.setAttribute('class', 'subExpand');
                divs[i].parentNode.setAttribute('className', 'subExpand');
            }
        }
    }
    this.cancelBubble(event);
}

Attr.scrollTop = function(name, event) {
    var div = document.getElementById(name);
    for (var i in div.childNodes) {
        if (div.childNodes[i].nodeName == 'DIV') {
	        div.childNodes[i].scrollTop = 0;
	        break;
        }
    }
    this.cancelBubble(event);
}

Attr.cancelBubble = function(evt) {
    var e=(evt)?evt:window.event;
    if (window.event) {
        e.cancelBubble=true;
    } else {
        //e.preventDefault();
        e.stopPropagation();
    }
}