/*______________________________________

  rmkItemViewer.js #090105a
  
  Script written by Mahiro Komura <mahirok@mizuyari.jp>
  http://mizuyari.jp/
______________________________________*/

var trace = function() { void(0); }

function rmkItemViewer (self, categoryPath ,chartMode, basemakeupMode) {
 var hostName = location.host;
 var lang = (!(/global/.test(location.pathname))) ? 1 : 2;
 var viewerId = (!chartMode) ? '' : _rmkItemViewer.length;
 var preImgs = [];
 this.self = 'window.' + self;
 this.items  = null;
 this.parentElmtId = 'item-index-body';
 this.itemsElmtId  = 'items' + viewerId;
 this.activeItemSetId = null;
 this.baseURL = (location.protocol == 'https:') ? 'https://' + hostName : 'http://' + hostName;
 this.searchURL = this.baseURL + categoryPath + 'index.xml';
 this.searchParams = {};
 this.lastSearchParams = {};
 this.ready = false;
 this.totalResults = 0;
 this.startIndex   = 1;
 this.itemParPage  = 20;
 this.itemParPageId = null;
 this.itemSortId    = null;
 this.items        = null;
 this.basemakeupCurrentSort = null;
 this.basemakeupSortStatus = [0,0,0];
 this.basemakeupCurrentStep = null;
 this.basemakeupSteps = ['MAKE UP BASE','CONTROL COLOR','CONCEALER','FOUNDATION','POWDER'];
 this.itemHeadElmtName = (!chartMode) ? 'h3' : 'h4';
 this.skincareHeadings = (lang == 2) ? ['1.CLEANSING','2.SKINTUNER','3.SPECIAL'] : ['1.CLEANSING [メイク落とし／洗顔料]','2.SKINTUNER [保湿液]','3.SPECIAL [プラスケア]'];
 this.skincareCategories = ['cleansing','skintuner','special'];

 var viewerBodyElement  = mizuyari.elementFactory("div", { "id" : "item-index-body" });
 var newItemsElement  = mizuyari.elementFactory("ul", { "id" : this.itemsElmtId, "class" : "items" });
 var newDividerElement = mizuyari.elementFactory("hr", { "class" : "divider" });
 var viewerTabElement = mizuyari.elementFactory("div", { "id" : "item-index-tabs" });
 viewerTabElement.innerHTML = '<ul id="viewer-mode"><li><a href="javascript:void(0);" onclick="setViewModeApp(0); return false;" onkeypress="setViewModeApp(0); return false;"><img src="/products/images/products-viewer-button-tileview.gif" alt="TILE VIEW" /></a></li><li><a href="javascript:void(0);" onclick="setViewModeApp(1); return false;" onkeypress="setViewModeApp(1); return false;"><img src="/products/images/products-viewer-button-listview.gif" alt="LIST VIEW" /></a></li></ul>';

 if(basemakeupMode) {
  var viewerFilterElement = mizuyari.elementFactory("div", { "id" : "viewer-filter" });
  viewerFilterElement.innerHTML = '<p><a href="javascript:void(0);" onclick="rmkItemViewer.basemakeupStep(0);" onkeypress="rmkItemViewer.basemakeupStep(0);"><img src="/products/images/products-viewer-filter-step0.gif" alt="ALL LINEUP" /></a></p><ol><li><a href="javascript:void(0);" onclick="rmkItemViewer.basemakeupStep(1);" onkeypress="rmkItemViewer.basemakeupStep(1);"><img src="/products/images/products-viewer-filter-step1.gif" alt="MAKE UP BASE" width="120" height="48" /></a></li><li><a href="javascript:void(0);" onclick="rmkItemViewer.basemakeupStep(2);" onkeypress="rmkItemViewer.basemakeupStep(2);"><img src="/products/images/products-viewer-filter-step2.gif" alt="CONTROL COLOR" width="120" height="48" /></a></li><li><a href="javascript:void(0);" onclick="rmkItemViewer.basemakeupStep(3);" onkeypress="rmkItemViewer.basemakeupStep(3);"><img src="/products/images/products-viewer-filter-step3.gif" alt="CONCEALER" width="120" height="48" /></a></li><li><a href="javascript:void(0);" onclick="rmkItemViewer.basemakeupStep(4);" onkeypress="rmkItemViewer.basemakeupStep(4);"><img src="/products/images/products-viewer-filter-step4.gif" alt="FOUNDATION" width="120" height="48" /></a></li><li><a href="javascript:void(0);" onclick="rmkItemViewer.basemakeupStep(5);" onkeypress="rmkItemViewer.basemakeupStep(5);"><img src="/products/images/products-viewer-filter-step5.gif" alt="POWDER" width="111" height="48" /></a></li></ol>';
  // var viewerSortElement = mizuyari.elementFactory("div", { "id" : "viewer-sort" });
  // viewerSortElement.innerHTML = '<ul><li><a href="javascript:void(0);" onclick="rmkItemViewer.basemakeupSort(1);" onkeypress="rmkItemViewer.basemakeupSort(1);"><img src="/products/images/products-viewer-sort-chart1.gif" alt="LIQUID／POWDER" /></a></li><li><a href="javascript:void(0);" onclick="rmkItemViewer.basemakeupSort(2);" onkeypress="rmkItemViewer.basemakeupSort(2);"><img src="/products/images/products-viewer-sort-chart2.gif" alt="サラサラ／クリーミー" /></a></li><li><a href="javascript:void(0);" onclick="rmkItemViewer.basemakeupSort(3);" onkeypress="rmkItemViewer.basemakeupSort(3);"><img src="/products/images/products-viewer-sort-chart3.gif" alt="ツヤ／マット" /></a></li></ul>';
  miz$("item-index-container").appendChild(viewerFilterElement);
  // miz$("item-index-container").appendChild(viewerSortElement);
 }

 if(chartMode) {
  var newHeadingElement  = mizuyari.elementFactory("h3", { "alt" : this.skincareHeadings[viewerId] });
  var newHeadingImgPath  = (lang == 2) ? '/global/products/skincare/images/' : '/products/skincare/images/';
  newHeadingElement.innerHTML = '<img src="'+ newHeadingImgPath +'tileview-cat-'+this.skincareCategories[viewerId]+'.gif" alt="" />';
 }

 if(!chartMode || (chartMode && viewerId==0)) {
  if(chartMode) viewerBodyElement.appendChild(newHeadingElement);
  viewerBodyElement.appendChild(newItemsElement);
  viewerBodyElement.appendChild(newDividerElement);
  viewerBodyElement.appendChild(viewerTabElement);
  miz$("item-index-container").appendChild(viewerBodyElement);
 } else {
  miz$(this.parentElmtId).appendChild(newHeadingElement);
  miz$(this.parentElmtId).appendChild(newItemsElement);
 }

 if(basemakeupMode) this.setBasemakeupCurrentStep(0);

 preImgs = new Array(
  '/products/images/products-viewer-button-tileview.gif',
  '/products/images/products-viewer-button-listview.gif',
  '/products/images/products-viewer-button-tileview_s.gif',
  '/products/images/products-viewer-button-listview_s.gif'
 );
 for (var i=0; i<=5; i++) {
  preImgs[preImgs.length] = '/products/images/products-viewer-filter-step'+i+'.gif';
  preImgs[preImgs.length] = '/products/images/products-viewer-filter-step'+i+'_s.gif';
 }
 for (var i=1; i<=3; i++) {
  preImgs[preImgs.length] = '/products/images/products-viewer-sort-chart'+i+'.gif';
  preImgs[preImgs.length] = '/products/images/products-viewer-sort-chart'+i+'_s_0.gif';
  preImgs[preImgs.length] = '/products/images/products-viewer-sort-chart'+i+'_s_1.gif';
 }
 preloadImgs(preImgs);

 this.getXML();
}

rmkItemViewer.prototype = {

getXML : function(obj) {
 var http = new JKL.ParseXML( this.searchURL);
 var xml = http.parse();
 var items = xml.items;
 this.items        = items["item"];
 this.lang         = items["lang"];
 this.totalResults = this.items.length;
 this.printItems();
},

sortByChaerParam1A : function(a, b) {
 return (a.charts.param1 > b.charts.param1) ? 1 : -1;
},
sortByChaerParam1D : function(b, a) {
 return (a.charts.param1 > b.charts.param1) ? 1 : -1;
},

sortByChaerParam2A : function(a, b) {
 return (a.charts.param2 > b.charts.param1) ? 1 : -1;
},
sortByChaerParam2D : function(b, a) {
 return (a.charts.param2 > b.charts.param1) ? 1 : -1;
},

sortByChaerParam3A : function(a, b) {
 return (a.charts.param3 > b.charts.param1) ? 1 : -1;
},
sortByChaerParam3D : function(b, a) {
 return (a.charts.param3 > b.charts.param1) ? 1 : -1;
},


printItems : function() {
 var cnt = 0;
 if (this.totalResults == 0) return;
 this.clearItemElements();
 if (!this.items.length) { this.createItemElement(); return }
 for (var i=0; i<this.items.length; i++) {

  var item = (!this.items.length) ? this.items : this.items[i];
  if ((item.categoryPath.indexOf("basemakeup") != -1) && this.basemakeupCurrentStep > 0) {
   if (this.basemakeupSteps[this.basemakeupCurrentStep-1] != item.step) continue;
  }

  this.createItemElement(i, cnt);
  cnt++;
 }
},

setBasemakeupCurrentStep : function(step) {
 var stepElmt;
 var total_steps = 5;
 var baseImgPath = '/products/images/';
 for (var i=1; i<=total_steps; i++) {
  stepElmt = miz$('viewer-filter').getElementsByTagName('ol')[0].getElementsByTagName('img')[i-1];
  if (i == step ) {
   if (this.basemakeupCurrentStep == step) return;
   stepElmt.src = baseImgPath + 'products-viewer-filter-step'+i+'_s.gif';
  } else {
   stepElmt.src = baseImgPath + 'products-viewer-filter-step'+i+'.gif';
  }
 }
 stepElmt = miz$('viewer-filter').getElementsByTagName('p')[0].getElementsByTagName('img')[0];
 stepElmt.src = baseImgPath + 'products-viewer-filter-step0' + ((step == 0) ? '_s' : '') + '.gif'; 
 this.basemakeupCurrentStep = step;
},

basemakeupStep : function(step) {
 this.setBasemakeupCurrentStep(step);
 this.printItems();
},

setBasemakeupSort : function(sort) {
 var sortElmt, sortFunc;
 var sortFuncPrefix = ["A","D"];
 var total_sorts = 3;
 var baseImgPath = '/products/images/';
 for (var i=1; i<=total_sorts; i++) {
  sortElmt = miz$('viewer-sort').getElementsByTagName('ul')[0].getElementsByTagName('img')[i-1];
  if (i == sort ) {
   if (this.basemakeupCurrentSort == sort) {
    this.basemakeupSortStatus[i-1] = (this.basemakeupSortStatus[i-1] == 0) ? 1 : 0;
   }
   sortElmt.src = baseImgPath + 'products-viewer-sort-chart'+i+'_s_'+this.basemakeupSortStatus[i-1]+'.gif';
   sortFunc = "this.sortByChaerParam"+sort+sortFuncPrefix[this.basemakeupSortStatus[i-1]];
   if (this.items != null) this.items.sort(eval(sortFunc));
  } else {
   sortElmt.src = baseImgPath + 'products-viewer-sort-chart'+i+'.gif';
  }
 }
 this.basemakeupCurrentSort = sort;
},

basemakeupSort : function(sort) {
 this.setBasemakeupSort(sort);
 this.printItems();
},

clearItemElements : function() {
 miz$(this.itemsElmtId).innerHTML = "";
},

createItemElement : function(itemIndex, cnt) {
 trace(itemIndex)

 var item = (!this.items.length) ? this.items : this.items[itemIndex];

 var viewmode = (mizuyari.containsClass(miz$('item-index-container'),'tileview')) ? 'tileview' : 'listview';

 var newitemElement  = mizuyari.elementFactory("li", { "id" : "item-" + item["id"], "class" : ((cnt+1)%4 == 0) ? "item nomargin" : "item" });
 var newitemPic      = mizuyari.elementFactory("div", {
  "class"       : "pic",
  "onclick"     : 'location.href=this.parentNode.getElementsByTagName("a")[0].href;',
  "onmouseover" : 'this.style.cursor="pointer"; mizuyari.addClass(this, "active");',
  "onmouseout"  : 'mizuyari.removeClass(this, "active");'
 });
 
 var newThumbElement = mizuyari.elementFactory("span", { "id" : "thumb" + item["id"], "class" : "thumb" });
 newThumbElement.innerHTML = '<img src="/'+ item.categoryPath +'/images/'+ item.basename +'-item-pic_m.jpg" alt="" />';

 var newItemNameElement = mizuyari.elementFactory(this.itemHeadElmtName, {});
 var newItemImgSrc = '/'+ item.categoryPath +'/images/'+ item.basename +'-item-name.gif';
 var newItemImgName = (this.lang != 2) ? item.name_jp : item.name_en;
 if (item.basename == "brush_case") newItemImgSrc = '/'+ item.categoryPath +'/images/'+ item.basename +'-item-name_s.gif';
 if (item.basename == "nail_n-asp") newItemImgSrc = '/'+ item.categoryPath +'/images/'+ item.basename +'-item-name_s.gif';
 var newItemLabel = (viewmode=='tileview') ? newItemImgName : '<img src="'+ newItemImgSrc +'" alt="'+ item.name_en +'">';
 var newItemDetailURL = (this.lang != 2) ? '/'+ item.categoryPath +'/'+ item.basename +'.html' : 
  '/global/'+ item.categoryPath +'/'+ item.basename +'.html';
 newItemNameElement.innerHTML = '<a href="'+ newItemDetailURL + '">' + newItemLabel + '<\/a>';

 var newItemBasicInfoElement = (viewmode=='tileview') ? null : mizuyari.elementFactory("p", { "class" : "item-basicinfo" });
 if (newItemBasicInfoElement) newItemBasicInfoElement.innerHTML = (!item.basicinfo) ? "" : (item.basicinfo['#text']) ? item.basicinfo['#text'] : item.basicinfo;

 var newItemVariousElement = (!item.various || viewmode=='tileview') ? null : mizuyari.elementFactory("div", { "class" : "item-various" });
 if (newItemVariousElement) newItemVariousElement.innerHTML = '<img alt="" src="'+ item.various["src"] +'" />';

 var newItemCatchyElement = (!(item.categoryPath.indexOf("skincare") != -1 & this.lang != 2)) ? null : mizuyari.elementFactory("p", { "class" : "item-catchy" });
 if (newItemCatchyElement) newItemCatchyElement.innerHTML = item.catchy;

 var newItemChartsElement = (!(item.charts & this.lang != 2) || viewmode=='tileview') ? null : mizuyari.elementFactory("div", { "class" : "item-charts" });
 if (newItemChartsElement) {
  newItemChartsElement.innerHTML = '<ul>' +
  '<li><img src="/products/images/products-viewer-listview-liquid_powder-'+ item.charts['param1'] +'.gif" alt="'+ ["LIQUID","----","POWDER"][item.charts['param1']-1] +'" /><\/li>' +
  '<li><img src="/products/images/products-viewer-listview-sara_creamy-'+ item.charts['param2'] +'.gif" alt="'+ ["サラサラ","----","クリーミー"][item.charts['param2']-1] +'" /><\/li>' +
  '<li><img src="/products/images/products-viewer-listview-tsuya_mat-'+ item.charts['param3'] +'.gif" alt="'+ ["ツヤ","----","マット"][item.charts['param3']-1] +'" /><\/li>';
 }

 newitemElement.appendChild(newThumbElement);
 newitemElement.appendChild(newItemNameElement);
 if (newItemBasicInfoElement) newitemElement.appendChild(newItemBasicInfoElement);
 if (newItemCatchyElement) newitemElement.appendChild(newItemCatchyElement);
 if (newItemVariousElement) newitemElement.appendChild(newItemVariousElement);
 if (newItemChartsElement) newitemElement.appendChild(newItemChartsElement);
 miz$(this.itemsElmtId).appendChild(newitemElement);

 var swfThumb = new flipFlash("thumb"+item["id"], "/products/images/product_tile.swf", "191", "191", "9.0.45", {
  menu		: 'false',
  devicefont	: 'false',
  quality	: 'high',
  wmode	    : 'transparent'
 });
 swfThumb.setAttribute('align','middle');
 if ((viewmode=='tileview' && !mizuyari.ua.isWinIE)) {
  swfThumb.addParam('FlashVars','lang='+this.lang+'&html=true&categoryPath='+item.categoryPath+'/&globalImage='+item.globalImage+'&name='+item.basename+'&thumbId='+item["id"]+'&zoom='+item["zoom"]);
 } else {
  swfThumb.addParam('FlashVars','lang='+this.lang+'&html=true&categoryPath='+item.categoryPath+'/&globalImage='+item.globalImage+'&name='+item.basename+'&thumbId='+item["id"]+'&zoom=0');
 }
 swfThumb.start();
}

}

function setViewModeApp(modeId) {
 var btn_viewmode = ['tileview','listview'];
 var btn_prefix = '/products/images/products-viewer-button-';
 var btn_suffix = ['','']; btn_suffix[modeId] = '_s';
 miz$('item-index-container').className = btn_viewmode[modeId];
 for (var i=0; i<2; i++) {
  miz$('viewer-mode').getElementsByTagName('img')[i].src = btn_prefix + btn_viewmode[i] + btn_suffix[i] + '.gif';
 }
 setCookie("__products_viewmode",modeId,location.host,"/");
 if (typeof rmkItemViewer == "object") { rmkItemViewer.printItems(); return; }
 for (var i=0; i<_rmkItemViewer.length; i++) {
  _rmkItemViewer[i].printItems();
 }
}


function getCookie(name) {
 if (!name || !document.cookie) return;
 var cookies = document.cookie.split("; ");
 for (var i=0; i<cookies.length; i++) {
  var str = cookies[i].split("=");
  if (str[0] != name) continue;
  return unescape(str[1]);
 }
 return;
}
function setCookie(name, value, domain, path, expires, secure) {
 if (!name) return;
 var str = name + "=" + escape(value);
 if (domain) {
  if (domain == 1) domain = location.hostname.replace(/^[^\.]*/, "");
  str += "; domain=" + domain;
 }
 if (path) {
  if (path == 1) path = location.pathname;
  str += "; path=" + path;
 }
 if (expires) {
  var nowtime = new Date().getTime();
  expires = new Date(nowtime + (60 * 60 * 24 * 1000 * expires));
  expires = expires.toGMTString();
  str += "; expires=" + expires;
 }
 if (secure && location.protocol == "https:") {
  str += "; secure";
 }
 document.cookie = str;
}
// ref.: http://www9.plala.or.jp/oyoyon/html/script/cookie.html