/*
$shop:
+ grps:[Object]
+ gid:[Object]
+ obj:[group element] (added by js)
+ types:[Array]
+ id:text[Object]
+ sizes:[Array]
+ id:text[Object]
+ menus:[Array]
+ id:text[Object]
+ items:[Array]
+ iid:[object]
+ obj:[item element] (added by js)
+ attr:value
*/
window.extend("$shop",{
/*----------------------------------------------------------
| global containers/settings
+---------------------------------------------------------*/
grps: {},
paths: {
img: "/data/_img/",
viewer: "/data/viewer.html"
},
keys: {
grp: "itemgrp"
},
/*----------------------------------------------------------
| add data/items
+---------------------------------------------------------*/
addData: function(gid,iid,dat) {
//-- if "grp" not defined, define it
if (!this.grps[gid]) this.grps[gid] = {};
var grp = this.grps[gid];
//-- (by type) data manipulation
var isArray = false;
switch (iid) {
case "menus": isArray = true; break;
}
//-- add data
if (isArray) {
if (grp[iid]) grp[iid].push(dat);
else grp[iid] = [dat];
} else {
grp[iid] = dat;
}
},
addItem: function(gid,dat) {
//-- if container not defined, define it
if (!this.grps[gid]) this.grps[gid] = {};
if (!this.grps[gid].items) this.grps[gid].items = [];
//-- add data
this.grps[gid].items.push(dat);
},
/*----------------------------------------------------------
| shop initialization
+---------------------------------------------------------*/
init: function() {
for (var gid in this.grps) {
if (this.grps.isPrototype(gid)) continue;
var grp = this.grps[gid];
grp.id = gid;
this.err = false;
//-- get itemgrp holder and set references
var key = this.keys.grp + ":" + gid;
grp.obj = $obj.get.byId(key); //-- ref: holder => data
grp.obj.dat = grp; //-- ref: data => holder
//-- collect/init itemgrp sub-objects
var idRE = new RegExp(this.keys.grp + ":([\\w-.]+)\\b");
var objs = $obj.get.byClass(idRE,"",grp.obj);
for (var i = 0; i < objs.length; i++) {
var oid = objs[i].className.match(idRE)[1];
if (!grp[oid]) grp[oid] = []; //-- add obj container array to grp
grp[oid].obj = objs[i]; //-- set ref: obj => data
objs[i].dat = grp[oid]; //-- set ref: data => obj
if (this["init_" + oid]) this["init_" + oid](grp); //-- call init_[pid]
}
if (this.err) continue; //-- on error init next group
this.init_view(grp);
this.init_stock(grp);
//-- shitbox or not?
// if (window.shitbox) shitbox.shop.init(grp);
// else
this.init_finish(grp);
}
if ($envi("ie:mac")) document.body.onunload = function() {
delete $shop;
document.body.innerHTML = "";
}
},
init_finish: function(grp) {
//-- finish initialization
this.updateDisplay(grp.id);
grp.loading.obj.style.display = "none";
grp.icons.obj.style.display = "block";
},
init_view: function(grp) {
//-- init "show instock items only" checkbox
grp.onlyinstock = $obj.get.byClass(/view:onlyinstock/,"input",grp.obj);
if (grp.onlyinstock) {
$obj.get.byId("lbl:onlyinstock_" + grp.id).innerHTML = this.strings.menus.onlyinstock;
$tasks.add(grp.onlyinstock,"onclick","$shop.updateDisplay('" + grp.id + "');");
}
},
init_menus: function(grp) {
//-- get count holder
grp.menus.countholder = $obj.get.byClass("itemcount","span",grp.menus.obj);
//-- init menus
for (var i = 0; i < grp.menus.length; i++) {
var menu = grp.menus[i];
//-- collect menus/set references
var re = $str.toRegExp("menus:" + menu.id,"","wb");
menu.obj = $obj.get.byClass(re,"",grp.menus.obj); //-- ref: holder => data
menu.obj.dat = menu; //-- ref: data => holder
menu.myindex = i; //-- set menus index
$tasks.add(menu.obj,"onchange","$shop.updateDisplay('" + grp.id + "',this);");
//-- init menu descriptions
if (menu.hasdesc) {
var re = $str.toRegExp("menudesc:" + menu.id,"","wb");
var obj = $obj.get.byClass(re,"",grp.obj);
if (obj) {
//-- collect descriptions
var descs = [];
var node = obj.firstChild;
do { if (node.tagName) descs.push(node); } while (node = node.nextSibling);
//-- add to menu data
menu.desc = descs;
menu.desc.obj = obj;
}
}
}
},
init_icons: function(grp) {
//-- collect icon elements
var objs = grp.icons.obj.getElementsByTagName("a");
for (var i = 0; i < objs.length; i++) grp.icons.push({ obj: objs[i] });
//-- verify icon count
if (grp.icons.length != grp.items.length) return this.init_err(grp,"iconcnt");
// NOTE: icons must initilized after items. (see "init_items()" below)
},
init_items: function(grp) {
var items = grp.items;
//-- collect item elements
var objs = [];
var node = items.obj.firstChild;
do {
if (node.tagName && node.className == "item") objs.push(node);
} while (node = node.nextSibling);
//-- init items
for (var i = 0; i < items.length; i++) {
var item = items[i];
//-- set references
item.obj = objs[i]; //-- add ref: obj => data
objs[i].dat = item; //-- add ref: data => obj
//-- get item sub objects (holders)
item.imgholder = $obj.get("class","imgs",null,item.obj);
item.stockholder = $obj.get("class","stock",null,item.obj);
//-- add "item.addnav" on showStock() [below]
//-- hide item
item.obj.style.display = "none";
}
//-- init icons (icons are loaded before items so do it here bitch!)
if (grp.icons) for (var i = 0; i < grp.icons.length; i ++) {
var icon = grp.icons[i];
var item = items[i];
//-- set icon title attribute
var name = $obj.get.byClass("name",null,item.obj).innerHTML;
name = name.replace(/<[^>]+>/,""); //-- strip tags
icon.obj.title = this.strings.icons.title.replaceVars({ name: name, id: item.id });
//-- add icon tasks
$tasks.add(icon.obj,"onclick","$shop.showItem('" + grp.id + "'," + i + ");");
if ($envi.browser.ie) icon.obj.href = "javascript:void(0);";
}
},
init_stock: function(grp) {
var items = grp.items;
//-- init items
for (var i = 0; i < items.length; i++) {
var item = items[i];
//-- check stock (for icon display)
item.hasstock = false;
var itms = item.items;
for (var j = 0; j < itms.length; j++)
if (itms[j].stock == "ok") { item.hasstock = true; break; }
//-- set icon "stock" state
if (!item.hasstock) grp.icons[i].obj.className = "nostock";
}
//-- build stock template
if (grp.types || grp.sizes) {
var $ = this.strings.stocknav;
var tmpl = "";
//-- build size title row
if (grp.sizes) {
var cells = [];
var s = grp.sizes;
for (var i = 0; i < s.length; i++)
cells.push($.scell.replaceVars({ id: s[i].id, text: s[i].text }));
tmpl += $.srow.replaceVars({ sizes: cells.join("") });
}
//-- build type rows
if (grp.types || grp.sizes) {
var t = grp.types;
var s = grp.sizes;
var tcnt = (t) ? t.length : 1;
var scnt = (s) ? s.length : 1;
types = [];
for (var i = 0; i < tcnt; i++) {
var tid = (t) ? t[i].id + "_" : "";
var ttext = (t) ? t[i].text : "";
cells = [];
for (var j = 0; j < scnt; j++) {
var sid = (s) ? s[j].id : "";
cells.push("{$" + tid + sid + "}");
}
types.push($.trow.replaceVars({type: ttext, types: cells.join("")}));
}
tmpl += types.join("");
}
grp.stocktmpl = $.multi.replaceVars({ sizenav: tmpl, pick: $.pick });
}
},
init_err: function(grp,type) {
var strs = this.strings.err;
var holder = grp.loading.obj;
type = (strs[type]) ? strs[type] : "";
holder.innerHTML = strs.msg.replaceVars({ msg: type });
this.err = true;
},
/*----------------------------------------------------------
| shop navigation
+---------------------------------------------------------*/
updateDisplay: function(gid,menu) {
var grp = this.grps[gid];
var menus = grp.menus;
var icons = grp.icons;
var items = grp.items;
//-- show insock only flag
var onlyinstock = (grp.onlyinstock && grp.onlyinstock.checked) ? true : false;
//-- reset item visibility flags
for (var i = 0; i < items.length; i++)
items[i].visible = (onlyinstock && !items[i].hasstock) ? false : true;
//-- update menus & item visibilty by menu value
if (menus) {
for (var i = 0; i < menus.length; i++) {
var mnu = menus[i];
//-- if not first menu, rebuild it!
if (!menu || i > menu.dat.myindex) this.updateMenu(grp,i);
//-- check each item by menus value
var mid = mnu.id;
var cval = mnu.obj.value;
for (var j = 0; j < items.length; j++) {
var item = items[j];
if (!cval || cval == "+") continue;
if (item[mid] && item[mid].indexOf(cval) < 0) item.visible = false;
}
//-- set description display (pre menu)
//-- NOTE: the menus are rebuilt so "selectedIndex" won't return a correct value for descs
if (mnu.desc) {
var v = mnu.obj.value;
for (var j = 0; j < mnu.opts.length; j++) //-- get active desc index
if (mnu.opts[j].id == v) { v = j; break; }
for (var j = 0; j < mnu.desc.length; j++)
mnu.desc[j].style.display = (j == v) ? "block" : "none";
}
}
}
//-- if current item not visible hide it!
if (grp.items.cur && !grp.items.cur.visible) {
grp.items.cur.obj.style.display = "none";
grp.items.cur = null;
}
//-- set items visibility
var vcnt = 0;
for (var j = 0; j < items.length; j++) {
//-- icon visibility
if (items[j].visible) {
icons[j].obj.style.display = "block";
vcnt++;
} else icons[j].obj.style.display = "none";
//-- current item visibility
if (!grp.items.cur && items[j].visible) { this.showItem(grp.id, j); }
}
//-- set visibile count string
if (menus && menus.countholder)
menus.countholder.innerHTML = this.strings.menus.count.replaceVars({ vcnt: vcnt, tcnt: items.length });
},
updateMenu: function(grp,n) {
var items = grp.items;
var menu = grp.menus[n];
var mid = menu.id;
//-- set menu option visibility flags
optloop: for (var i = 0; i < menu.opts.length; i++) {
var opt = menu.opts[i];
opt.visible = false;
itemloop: for (var j = 0; j < items.length; j++) {
var item = items[j];
if (opt.id == "+") { opt.visible = true; continue optloop; }
if (!item.visible) continue itemloop;
if (item[mid] && item[mid].indexOf(opt.id) >= 0) { opt.visible = true; break; }
}
}
//-- rebuild menu
switch(menu.type) {
case "sel" : this.rebuildSel(menu.obj);
}
},
rebuildSel: function(sel,buildAll) {
var optdat = sel.dat.opts;
//-- collect options
var opts = [];
for (var i= 0; i < optdat.length; i++) {
var opt = optdat[i];
if (buildAll || opt.visible) opts.push([opt.text,opt.id]);
}
window.rebuildSelect(sel,opts,true);
},
showItem: function(gid,num) {
var _path = this.paths;
var _str = this.strings;
var grp = this.grps[gid];
//-- hide all items
for (var i = 0; i < grp.items.length; i++) {
var item = grp.items[i];
var icon = grp.icons[i];
item.obj.style.display = "none"; //-- hide item
icon.obj.className = (item.hasstock) ? "" : "nostock"; //-- reset icon state
}
//-- show current item
item = grp.items[num];
icon = grp.icons[num];
item.obj.style.display = "block"; //-- show item
icon.obj.className = (item.hasstock) ? "a" : "a-nostock"; //-- set icon state
grp.items.cur = item; //-- set current item
this.showStock(grp,num); //-- init addnav
this.showImgs(grp,num); //-- init images
},
showImgs: function(grp,num) {
var item = grp.items[num];
if (item.imgholder.innerHTML) return; //-- already visible
var path = this.paths;
var $ = this.strings.imgs;
//-- build image srcs
var out = "";
if (item.imgs) for (var i = 0; i < item.imgs.length; i++)
out += $.img.replaceVars({ path: path.img, src: item.id + "." + item.imgs[i] });
else out += $.img.replaceVars({ path: path.img, src: $.na });
//-- if has detail add viewer link
if (item.dtl) {
var v = { href: path.viewer + "?src=" + path.img + item.id + "." + item.dtl, imgs: out };
out = $.viewer.replaceVars(v);
}
//-- set HTML
item.imgholder.innerHTML = out;
},
showStock: function(grp,num) {
var item = grp.items[num];
if (item.stockholder.innerHTML) return; //-- already inited
var $ = this.strings.stocknav;
if (grp.stocktmpl) { //-- fill stock template
//-- set item vars states
var vars = {};
for (var i = 0; i < item.items.length; i ++) {
var itm = item.items[i];
var tid = (itm.type) ? itm.type : "";
var sid = (itm.size) ? itm.size : "";
var href = ($envi.browser.ie) ? 'href="javascript:void(0);" ' : "";
var args = "this,'" + grp.id + "'," + num + "," + i;
if (tid && sid) tid += "_";
vars[tid + sid] = $.tcell.replaceVars({ cls: itm.stock, href: href, args: args, stock: $["btn_" + itm.stock] });
}
//-- check for "na" items & set titles
var t = grp.types;
var s = grp.sizes;
var tcnt = (t) ? t.length : 1;
var scnt = (s) ? s.length : 1;
for (var i = 0; i < tcnt; i++) {
var tid = (t) ? t[i].id : "";
var ttxt = (t) ? t[i].text : "";
for (var j = 0; j < scnt; j++) {
var sid = (s) ? s[j].id : "";
var stxt = (s) ? s[j].text : "";
if (tid && sid) sid = "_" + sid;
if (vars[tid + sid]) vars[tid + sid] = vars[tid + sid].replaceVars({ title: ttxt + stxt });
else vars[tid + sid] = $.btn_na.replaceVars({ title: ttxt + stxt });
}
}
var out = grp.stocktmpl.replaceVars(vars);
} else { //-- build "mono" addnav
var tmpl = $.mono;
//-- set add product button
$ = this.strings.addnav;
var prod = item.items[0]; //-- you are "The One"!!
var out = "";
//-- set product note
if (prod.note) out += $.note.replaceVars({ note: prod.note });
//-- set product price
out += $.price.replaceVars({ price: commatize(Math.floor(prod.price*TAX)) });
//-- set add product button
var href = ($envi.browser.ie) ? 'href="javascript:void(0);" ' : "";
out += $["add_" + prod.stock].replaceVars({ href: href, code: prod.code });
out = tmpl.replaceVars({ add: out });
}
//-- set HTML
item.stockholder.innerHTML = out;
//-- set "item.addnav" reference
item.addnav = $obj.get.byClass("addnav","td",item.obj);
},
showItemInfo: function(btn,gid,inum,pnum) {
var grp = this.grps[gid]
var item = grp.items[inum];
var prod = item.items[pnum];
var $ = this.strings.addnav;
var out = "";
//-- set product button state
if (item.curprod) item.curprod.className = "";
btn.className = "a";
item.curprod = btn;
//-- set product name
var tid = (prod["type"]) ? prod["type"] : "";
var sid = (prod["size"]) ? prod["size"] : "";
if (tid) for (var i = 0; i < grp.types.length; i++)
if (grp.types[i].id == tid) { tid = grp.types[i].text; break; }
if (sid) for (var i = 0; i < grp.sizes.length; i++)
if (grp.sizes[i].id == sid) { sid = grp.sizes[i].text; break; }
if (tid || sid) out += $.name.replaceVars({ name: tid + sid });
//-- set product note
if (prod.note) out += $.note.replaceVars({ note: prod.note });
//-- set product price
out += $.price.replaceVars({ price: commatize(Math.floor(prod.price*TAX)) });
//-- set add product button
var href = ($envi.browser.ie) ? 'href="javascript:void(0);" ' : "";
out += $["add_" + prod.stock].replaceVars({ href: href, code: prod.code });
item.addnav.innerHTML = out;
},
addToCart: function(code) {
$win.open("shop","/cgi-bin/shop/cart.cgi?code=" + escape(code));
},
/*
addToCartSSL: function(code) {
$win.open("shop","https://gt304.secure.ne.jp/~gt304089/cgi-bin/cart.cgi?code=" + escape(code));
},
*/
addToCart2: function(code) {
$win.open("shop","cart.cgi?code=" + escape(code));
},
popupMat: function(code) {
$win.open("shop","popup.cgi?code=" + escape(code));
}
});
/*----------------------------------------------------------
| shitbox initialization
+---------------------------------------------------------*/
/*
if ($envi("ie:win")) extend("shitbox.shop",{
//-- this is a [ie:win] "shitbox" only fix (image.onload event is not DOM legal)
//-- it is only recognized by "shitbox" and [sa]
srcs: (function(){ //-- global preload image list
return "/_cmn/btn-add.[n|o|w|x].gif" +
",/_cmn/btn-stock-[na|ok.a|ok.n|ok.o|w.a|w.n|w.o|x.a|x.n|x.o].gif" +
",/_cmn/icn-size-[f|l|o|m|p|s].gif" +
",/_cmn/icn-[info|note|warn].gif" +
",/data/_img/na.img.jpg" +
",/_cmn/mark-new.gif";
})(),
init: function(grp) {
//-- add load bar/cnt
// grp.loading.obj.innerHTML += '';
var bar = document.createElement("div");
bar.setAttribute("id",grp.id + "_loadbar");
document.body.appendChild(bar);
grp.loading.loadbar = $obj.get.byId(grp.id + "_loadbar");
grp.loading.obj.innerHTML += 'Loading Images..[0/0]
';
grp.loading.loadcnt = $obj.get.byId(grp.id + "_loadcnt");
grp.loading.cnt = 0;
grp.loading.tot = 0;
//-- preload global images (only once)
//-- ITF: allow multiple replacements (e.g. "[btn|bnr]-[main|sub].[n|o|a].gif")
if (this.srcs) {
var srcs = this.srcs.split(",");
for (var i = 0; i < srcs.length; i++) {
var p = srcs[i].match(/^([^\[]+)\[([^\[]+\|[^\|]+)\](.+)$/);
if (p) {
p[2] = p[2].split("|");
for (var j = 0; j < p[2].length; j++)
this.plimage(p[1] + p[2][j] + p[3],grp);
} else {
this.plimage(srcs[i],grp);
}
}
this.srcs = null;
}
//-- preload shop item images
for (var i = 0; i < grp.items.length; i++) {
var srcs = grp.items[i].imgs;
var id = grp.items[i].id
if (srcs) for (var j = 0; j < srcs.length; j++)
var s = srcs[j];
this.plimage($shop.paths.img + ((s) ? id + "." + s : $shop.strings.img.na), grp);
}
},
plimage: function(src,grp) {
//-- increment total
grp.loading.tot++;
grp.loading.loadcnt.innerHTML = grp.loading.cnt +"/"+ grp.loading.tot;
//-- load image
var img = document.createElement("image");
img.setAttribute("src",src);
img.setAttribute("height","30");
img.setAttribute("width","30");
img.onload = new Function("shitbox.shop.pldone('" + grp.id + "')");
img.onerror = new Function("shitbox.shop.pldone('" + grp.id + "')");
//-- add image to loadbar
grp.loading.loadbar.appendChild(img);
},
pldone: function(gid) {
var grp = $shop.grps[gid];
var load = grp.loading;
//-- increment total
load.cnt++;
load.loadcnt.innerHTML = load.cnt +"/"+ load.tot;
if (load.cnt == load.tot) $shop.init_finish(grp);
}
});
*/
if ($envi("ie:win")) window.extend("shitbox.shop",{
imgs: [ //-- preload images
{ h: "/_cmn/btn-add.",id: "n,o,w,x",t: ".gif" },
{ h: "/_cmn/btn-stock-",id: "na,ok.a,ok.n,ok.o,w.a,w.n,w.o,x.a,x.n,x.o",t: ".gif" },
{ h: "/_cmn/icn-size-",id: "f,l,o,m,p,s",t: ".gif" },
{ h: "/_cmn/icn-",id: "info,note,warn",t: ".gif" },
{ h: "/data/_img/na.",id: "img",t: ".jpg" },
{ h: "/_cmn/mark-",id: "new",t: ".gif" }
],
init: function(grp) {
var imgs = this.imgs;
for (var i = 0; i < imgs.length; i++) {
var id = imgs[i].id.split(",");
for(var j = 0; j < id.length; j++)
this.plimage(imgs[i].h + id[j] + imgs[i].t);
}
for (var i = 0; i < grp.items.length; i++) {
var src = grp.items[i].imgs;
var id = grp.items[i].id
if (src) for (var j = 0; j < src.length; j++)
this.plimage($shop.paths.img + ((src[j]) ? id + "." + src[j] : $shop.strings.img.na));
}
$shop.init_finish(grp);
},
plimage: function(src) {
var img = document.createElement("image");
img.setAttribute("src",src);
img.setAttribute("height",1);
img.setAttribute("width",1);
document.body.appendChild(img);
}
});