/* glitzPic.js */
var isLinux, isFlashPlayer9;
var dmtrack_url = dmtrack_pid = "", dmtrack_refer = location.href;
var glitzPic = {
box: function (o) {
this.ob = (typeof(o) == "string" ? $(o) : o);
var lis = this.ob.getElementsByTagName("li");
this.lis = [];
this.imgs = [];
this.state = 0;		// 0: 大; 1: 变化中; 2: 小
for (var i = 0; lis[i]; i ++)
this.lis.push(new glitzPic.item(lis[i], this, i));
if (lis.length <= 4) $D.setStyle(this.ob, "height", "240px");
this.swfReady = false;
this.init();
},
item: function (o, parent, i) {
var _this = this;
this.ob = (typeof(o) == "string" ? $(o) : o);
this.i = i;
this.parent = parent;
this.img = this.ob.getElementsByTagName("img")[0];
this.parent.imgs.push(this.img.src);
this.img.onload = function () {
_this.resizeImg();
};
try {
this.resizeImg();
} catch (e) {}
this.imgBox = this.img.parentNode;
$E.on(this.imgBox, "click", this.focus, this, true);
this.txtBox = $D.getElementsByClassName("txt", "div", this.ob)[0];
this.aTitle = this.txtBox.getElementsByTagName("a")[0];
this.priceBox = $D.getElementsByClassName("price", "span", this.ob)[0];
this.imgBox.appendChild(mkEl("div", {className: "imgBorder"}));
/* 得到详情信息 */
this.bigImgSrc = this.img.src;
this.detailInfo = "";
var od = $D.getElementsByClassName("offerDetail", "div", this.ob)[0];
if (od) {
var bigImg = od.getElementsByTagName("img")[0];
if (bigImg) this.bigImgSrc = bigImg.src;
var di = $D.getElementsByClassName("offerDetailContent", "div", this.ob)[0];
if (di) this.detailInfo = di.innerHTML;
}
//this.parent.swf.cache(this.img.src);
/*
var _this = this;
setTimeout(function() {
_this.parent.swf.cache(_this.img.src);
}, 500);
*/
this.swfDisplay = false;
},
owners: {},
swfEvt: function (ob) {
//alert("--------------\n\n" + $J.ob2param(glitzPic.swfs[ob.swfid]));
//alert("2\n" + $J.ob2param(swfs));
//if($(ob.swfid) && $(ob.swfid).owner)
glitzPic.owners[ob.swfid].swfEvt(ob);
},
init: function (className) {
var a = $D.getElementsByClassName(className), i;
for (i = 0; i < a.length; i ++)
glitzPic.boxes.push(new glitzPic.box(a[i]));
},
addSwf: function (obId, owner) {
function isTT(){
return navigator.userAgent.indexOf("TencentTraveler" != -1);
}
function isMaxthon(){
return navigator.userAgent.indexOf("MAXTHON" != -1);
}
var addStr = "";
if(isTT() || isMaxthon()) {
addStr = "?t=" + ((new Date()).getTime());
}
var flashvars = {
event_handler: "glitzPic.swfEvt",
//event_handler: "console.log",
swfid: obId,
use_ansi: "1",
backDataURL: encodeURIComponent(g_glare_offer_feature_info_url),
charset: "gbk"
},
params = {
// 修正linux下的flash9在背景透明时的问题
wmode: isLinux && isFlashPlayer9 ? "opaque" : "transparent",
allowScriptAccess: "always"
},
attributes = {
width: "505px",
height: "480px",
data: "http://img.china.alibaba.com/images/cn/market/danai/flash/CTPFlippingCard.swf" + addStr
},
str_fv = "";
for (var i in flashvars) {
if (flashvars[i] != Object.prototype[i]) {
// Filter out prototype additions from other potential libraries
str_fv += "&" + i + "=" + flashvars[i];
}
}
params.flashvars = str_fv;
//insert flash
glitzPic.owners[obId] = owner;
return swfobject.createSWF(attributes, params, obId);
},
boxes: []
};
glitzPic.box.prototype = {
init: function () {
//初始化位置
for (var i = 0; i < this.lis.length; i ++) {
this.lis[i].left = 178 * (i % 4);
this.lis[i].top = 230 * Math.floor(i / 4) + 10;
$D.setStyle(this.lis[i].ob, "left", this.lis[i].left + "px");
$D.setStyle(this.lis[i].ob, "top", this.lis[i].top + "px");
}
this.mask = mkEl("div", {className: "mask"});
this.animBd = mkEl("div", {className: "animBd"});
this.swfBox = mkEl("div", {className: "swfBox"});
var tmp = mkEl("div", {id: "glitzPicSwf_" + Math.floor(Math.random() * 1000)});
this.swfBox.appendChild(tmp);
this.ob.appendChild(this.mask);
this.ob.appendChild(this.animBd);
this.ob.appendChild(this.swfBox);
this.swf = glitzPic.addSwf(tmp.id, this);
$D.getElementsByClassName("pic", "div", this.ob, function () {
$E.on(this, "mouseover", function () {
$D.addClass(this, "hoverBd");
});
$E.on(this, "mouseout", function () {
$D.removeClass(this, "hoverBd");
});
});
},
swfEvt: function (e) {
/*
事件列表
"swf_ready"         flash加载完毕
"flip2back_start"   翻转到背面-动画开始
"flip2back_done"   翻转到背面-动画结束
"flip2front_start"   翻转到前面-动画开始
"flip2front_done"   翻转到前面-动画结束
"zoomout_start"      退出-动画开始
"ready_to_exit"      退出-动画结束
"stage_ready"      flash动画结束-可以隐藏背后的
*/
switch (e.type) {
case "flip2back_done":
// 数据打点
dmtrack_url = "/china.alibaba.com/xwp/twbm-detail.html?pid=" + dmtrack_pid + "&pageurl=" + location.href;
//-------------------------------------
/*
* Begin DW javascript code version: 3.0
* Very important data,can not be copied or pasted from elsewhere.
* If you need to modify is required to notify the DW.
*
*/
var url = dmtrack_url;
var refer = dmtrack_refer;
/*** DO NOT ALTER ANYTHING BELOW THIS LINE ! ****/
dmtrack.flash_dmtracking(url, refer);
/********** DO NOT REMOVE **********/
/**** End DW code version: 3.0 *****/
//-----------------------------------
dmtrack_refer = dmtrack_url;
break;
case "flip2front_done":
// 数据打点
dmtrack_url = "/china.alibaba.com/xwp/twbm-pic.html?pid=" + dmtrack_pid + "&pageurl=" + location.href;
//-------------------------------------
/*
* Begin DW javascript code version: 3.0
* Very important data,can not be copied or pasted from elsewhere.
* If you need to modify is required to notify the DW.
*
*/
var url = dmtrack_url;
var refer = dmtrack_refer;
/*** DO NOT ALTER ANYTHING BELOW THIS LINE ! ****/
dmtrack.flash_dmtracking(url, refer);
/********** DO NOT REMOVE **********/
/**** End DW code version: 3.0 *****/
//-----------------------------------
dmtrack_refer = dmtrack_url;
break;
case "swf_ready":
$D.setStyle(this.swfBox, "height", "1px");
$D.setStyle(this.swfBox, "left", "109px");
this.swf.cache(this.imgs);
this.swfReady = true;
break;
case "stage_ready":
$D.setStyle(this.animBd, "zIndex", 95);
$D.setStyle(this.animBd, "display", "none");
break;
case "zoomout_start":
$D.setStyle(this.animBd, "zIndex", 100);
$D.setStyle(this.animBd, "display", "block");
this.swf_clickToExit = true;
break;
case "ready_to_exit":
if (!this.swf_clickToExit) break;
this.swfDisplay = false;
this.lis[0].focus();
break;
}
},
each: function (f) {
for (i = 0; i < this.lis.length; i ++)
f.apply(this.lis[i]);
},
anim: function (v, fId) {	//动画过渡
var fs,
animBdSize, animBdSize1,
animBdTop, animBdTop1,
animBdLeft, animBdLeft1,
bodyH, bodyH1,
frames = 6,		//帧数
tmItvl = 20,		//间隔毫秒数
_this = this;
this.each(function () {
this.toPoint = v == 100 ? [230 * Math.floor(this.i / 4) + 10, 178 * (this.i % 4)] : _this.toPoint(this.i, fId);
});
$D.setStyle(this.animBd, "zIndex", 100);
$D.setStyle(this.animBd, "display", "block");
if (v == 50) { //放大一张图片
this.hide(fId);
this._fXY = [230 * Math.floor(fId / 4) + 10, 178 * (fId % 4) + 16];
fs = 100;
animBdSize = 150;
animBdSize1 = 458;
this.animBdPos0 = [parseInt($D.getStyle(this.lis[fId].ob, "top")), parseInt($D.getStyle(this.lis[fId].ob, "left")) + 13];
animBdTop = this.animBdPos0[0];
animBdLeft = this.animBdPos0[1];
animBdTop1 = 10;
animBdLeft1 = 127;
bodyH = this.lis.length <= 4 ? 240 : 480;
bodyH1 = 480;
/*$D.setStyle(this.mask, "top", this.lis[fId].top + "px");
$D.setStyle(this.mask, "left", this.lis[fId].left + "px");
$D.setStyle(this.animBd, "top", this.lis[fId].top + "px");
$D.setStyle(this.animBd, "left", this.lis[fId].left + 14 + "px");*/
} else {
$D.setStyle(this.swfBox, "width", "1px");
$D.setStyle(this.swfBox, "height", "1px");
fs = 50;
animBdSize = 458;
animBdSize1 = 150;
animBdTop = 10;
animBdLeft = 127;
animBdTop1 = this.animBdPos0[0];
animBdLeft1 = this.animBdPos0[1];
bodyH = 480;
bodyH1 = this.lis.length <= 4 ? 240 : 480;
}
var f = function () {
fs = c(v, fs);
animBdSize = c(animBdSize1, animBdSize);
animBdTop = c(animBdTop1, animBdTop);
animBdLeft = c(animBdLeft1, animBdLeft);
bodyH = c(bodyH1, bodyH);
$D.setStyle(_this.ob, "font-size", fs + "px");
$D.setStyle(_this.animBd, "width", animBdSize + "px");
$D.setStyle(_this.animBd, "height", animBdSize + "px");
$D.setStyle(_this.animBd, "top", animBdTop + "px");
$D.setStyle(_this.animBd, "left", animBdLeft + "px");
$D.setStyle(_this.ob, "height", bodyH + "px");
_this.each(function () {
this.move(frames);
});
frames --;
if (frames == 0) {	//动画结束
_this.state = v == 100 ? 0 : 2;
$D.setStyle(_this.mask, "top", "-1000px");
$D.setStyle(_this.mask, "opacity", 1);
$D.setStyle(_this.animBd, "zIndex", 95);
if (v == 50) {	//放大图片
$D.setStyle(_this.swfBox, "width", "505px");
$D.setStyle(_this.swfBox, "height", "480px");
_this.showSwf(fId);
} else {
_this.showHidden();
_this.swfDisplay = false;
_this.swf.clear();
}
return;
}
setTimeout(f, tmItvl);
}, c = function (vn, vi) {
return vi + (vn - vi) / frames;
};
if (v == 50) {	//放大图片
var an = new $Y.Anim(this.mask, {
opacity: {to: 0}
}, 0.25);
an.onComplete.subscribe(f);
an.animate();
} else {
f();
}
},
hide: function (fId) {
/*this._hiddenOb = this.lis[fId];
this._hiddenOb.hide();*/
this.lis[fId].hide();
},
showSwf: function (fId) {
var pu = this.lis[fId].priceBox ? this.lis[fId].priceBox.innerHTML : "";
pu = pu.replace(/([^元])\//g, "$1元/");
this.swf.show(
this.lis[fId].bigImgSrc,
this.lis[fId].aTitle.getAttribute("href"),
[
$J.trim(this.lis[fId].aTitle.innerHTML.replace(/<.*?>/g, "")),
pu,
""
//pu.match(/[\d\.]+/) ? pu.match(/[\d\.]+/)[0] : "",
//punit
],
this.lis[fId].detailInfo
);
this.swfDisplay = true;
// 数据打点
dmtrack_pid = this.lis[fId].bigImgSrc.match(/\d+$/);
dmtrack_url = "/china.alibaba.com/xwp/twbm-pic.html?pid=" + dmtrack_pid + "&pageurl=" + location.href;
//-------------------------------------
/*
* Begin DW javascript code version: 3.0
* Very important data,can not be copied or pasted from elsewhere.
* If you need to modify is required to notify the DW.
*
*/
var url = dmtrack_url;
var refer = dmtrack_refer;
/*** DO NOT ALTER ANYTHING BELOW THIS LINE ! ****/
dmtrack.flash_dmtracking(url, refer);
/********** DO NOT REMOVE **********/
/**** End DW code version: 3.0 *****/
//-----------------------------------
dmtrack_refer = dmtrack_url;
},
xShow: function (fId) {
//交叉显示
if (this.isXShowing) return;
this.isXShowing = true;
var _this = this;
//动画
if (!this.xShowAnimBd) {
this.xShowAnimBd = [
mkEl("div", {className: "xShowAnimBd"}),
mkEl("div", {className: "xShowAnimBd"})
];
this.ob.appendChild(this.xShowAnimBd[0]);
this.ob.appendChild(this.xShowAnimBd[1]);
}
var xy = $D.getXY(this.lis[fId].ob),
tl = [parseInt($D.getStyle(this.lis[fId].ob, "top")),
parseInt($D.getStyle(this.lis[fId].ob, "left")) + 6];
$D.setStyle(this.xShowAnimBd[0], "display", "block");
$D.setStyle(this.xShowAnimBd[1], "display", "block");
/*$D.setStyle(this.xShowAnimBd[0], "width", "75px");
$D.setXY(this.xShowAnimBd[0], [xy[0] + 6, xy[1]]);
$D.setStyle(this.xShowAnimBd[0], "height", "75px");
$D.setXY(this.xShowAnimBd[1], [127, 10]);
$D.setStyle(this.xShowAnimBd[1], "width", "458");
$D.setStyle(this.xShowAnimBd[1], "height", "458");*/
var a1 = new $Y.Anim(this.xShowAnimBd[0], {
width: {from: 75, to: 458},
height: {from: 75, to: 458},
top: {from: tl[0], to: 10},
left: {from: tl[1], to: 127}
}, 0.5), a2 = new $Y.Anim(this.xShowAnimBd[1], {
width: {from: 458, to: 75},
height: {from: 458, to: 75},
top: {from: 10, to: tl[0]},
left: {from: 127, to: tl[1]}
}, 0.5);
//动画2
var a7 = new $Y.Anim(_this.lis[fId].ob, {
opacity: {from: 1, to: 0}
}, 0.5);
a7.animate();
a1.onComplete.subscribe(function () {
$D.setStyle(_this.xShowAnimBd[0], "display", "none");
});
a2.onComplete.subscribe(function () {
//动画完成
_this.showSwf(fId);
_this.showHidden(xy);
//this.lis[fId].hide();
$D.setStyle(_this.xShowAnimBd[1], "display", "none");
//a7.onComplete.subscribe(function () {
//setTimeout(function () {
_this.lis[fId].hide();
_this.isXShowing = false;
//}, 500);
//});
});
a1.animate();
a2.animate();
},
showHidden: function (xy) {
this._hiddenOb.show();
if (xy)
$D.setXY(this._hiddenOb.ob, xy);
$D.setStyle(this._hiddenOb.ob, "opacity", 0);
var an = new $Y.Anim(this._hiddenOb.ob, {
opacity: {from: 0, to: 1}
}, 0.5);
an.animate();
},
toPoint: function (i, fId) {
var p = [[0, 0], [1, 0], [0, 1], [1, 1], [2, 0], [3, 0], [2, 1], [3, 1]],
a = p[i], b = p[fId];
if (a[1] == b[1] && a[0] > b[0]) a[0] --;
return [a[0] * 115 + 10, a[1] * 600 + 12];
},
zoom: function (fId) {
if (this.state == 1) return;	//正在变化中
var toSize = this.state == 0 ? 50 : 100, _this = this, anim,
xyBd = $D.getXY(this.lis[fId].ob);
if (this.state == 0) {
// 放大
this.mask.innerHTML = this.lis[fId].ob.innerHTML;
$D.setXY(this.mask, $D.getXY(this.lis[fId].ob));
xyBd[0] += 13;
$D.setXY(this.animBd, xyBd);
} else {
// 缩小
// 数据打点
dmtrack_url = "/china.alibaba.com/xwp/twbm-list.html?pageurl=" + location.href;
//-------------------------------------
/*
* Begin DW javascript code version: 3.0
* Very important data,can not be copied or pasted from elsewhere.
* If you need to modify is required to notify the DW.
*
*/
var url = dmtrack_url;
var refer = dmtrack_refer;
/*** DO NOT ALTER ANYTHING BELOW THIS LINE ! ****/
dmtrack.flash_dmtracking(url, refer);
/********** DO NOT REMOVE **********/
/**** End DW code version: 3.0 *****/
//-----------------------------------
dmtrack_refer = dmtrack_url;
}
this.state = 1;
this.anim(toSize, fId);
},
zoomout: function () {
//alert(1);
this.swfDisplay = false;
this.swf.zoomout();
}
};
glitzPic.item.prototype = {
/**
* 调整图片尺寸
*/
resizeImg: function () {
var _this = this,
w0 = this.img.width || this.img.offsetWidth,
h0 = this.img.height || this.img.offsetHeight,
wh = g_imgMaxSize(this.img, 1.5, 1.5, "em");
if (wh[0] == 0) {
this.img.style.width = "";
this.img.style.height = "";
setTimeout(function () {
_this.resizeImg();
}, 100);
return;
} else if (Math.max(w0, h0) < 150) {
wh = [w0 / 100,  h0 / 100]
$D.setStyle(this.img, "width", wh[0] + "em");
$D.setStyle(this.img, "height", wh[1] + "em");
}
$D.setStyle(this.img, "visibility", "visible");
$D.setStyle(this.img, "margin", (1.5 - wh[1]) / 2 + "em " + (1.5 - wh[0]) / 2 + "em");
},
focus: function () {
if (!this.parent.swfReady) {
window.open(this.aTitle.href);
return;
};
if (this.parent.swfDisplay) {
if (!this.parent.swf_clickToExit) {
//交叉显示
this.parent.swf.zoomout();
this.parent.xShow(this.i);
} else {
this.parent.swfDisplay = false;
this.parent.swf.zoomout();
}
} else {
//放大Flash
this.parent.swf.clear();
this.parent.zoom(this.i);
}
this.parent.swf_clickToExit = false;
},
move: function (frames) {
this.top += (this.toPoint[0] - this.top) / frames;
this.left += (this.toPoint[1] - this.left) / frames;
$D.setStyle(this.ob, "top", this.top + "px");
$D.setStyle(this.ob, "left", this.left + "px");
},
hide: function () {
this.parent._hiddenOb = this;
$D.setStyle(this.ob, "display", "none");
},
show: function () {
$D.setStyle(this.ob, "display", "block");
$D.setStyle(this.ob, "opacity", 1);
}
};
/**
* Alitalk quick API for Flash use
* @author qiuhua, 2009
* @version 0.1
* depend on YUI.util.Get
**/
if(typeof(CTP_AlitalkWrapper)=="undefined") CTP_AlitalkWrapper = function(){
return {
cache: {},
watchINTV: -1,
activeSwfId: "",
activeUid: "",
regFlashAlitalkRequest: function(swfId, uid)
{
//console.log('registered : '+ swfId+ ' '+ uid);
if(typeof(CTP_AlitalkWrapper.cache[uid])=="undefined")
{
//not get yet
OnLine = -1;
//TODO: if 'activeSwfId' already exists,
// that means colision happening
CTP_AlitalkWrapper.activeSwfId = swfId;
CTP_AlitalkWrapper.activeUid = uid;
//We have a .js file at assets/simple_get.js.  We will get
//that script with the Get Utility:
YAHOO.util.Get.script('http://amos.im.alisoft.com/userstatus3.aw?uid='+uid+'&site=cnalichn', {
//callback to fire when the script is successfully loaded:
onSuccess: function(obj) {
CTP_AlitalkWrapper.callbackFlash();
}
})
return -1;
} else {
return CTP_AlitalkWrapper.cache[uid];
}
},
callbackFlash: function()
{
CTP_AlitalkWrapper.cache[CTP_AlitalkWrapper.activeUid] = OnLine;
CTP_AlitalkWrapper.activeUid = "";
//console.log('online status of "' + CTP_AlitalkWrapper.activeUid +'" is '+ OnLine);
var swf = document.getElementById(CTP_AlitalkWrapper.activeSwfId);
if(typeof(swf)!="undefined")
{
swf.setWWStatusCode(OnLine);
}
},
talkWith: function(uid, status)
{
var param = new Alitalkparam();
param.uid = uid;
param.online = status;
Alitalk.openAlitalk(param);
}
};
}();
$E.onDOMReady(function () {
var f = function () {
if (typeof(swfobject) == "undefined") {
setTimeout(f, 200);
return;
}
isLinux = navigator.userAgent.toLowerCase().indexOf("linux") != -1;
isFlashPlayer9 = swfobject.getFlashPlayerVersion().major = 9;
glitzPic.init("glitzBody");
if (!swfobject.hasFlashPlayerVersion("10") && !swfobject.hasFlashPlayerVersion("9")) {
$D.getElementsByClassName("swfBox", "div", "content2", function (o) {
$D.setStyle(o, "display", "none");
});
}
};
f();
});