Pizza DIY - 搭配选择的UI设计

// icon click function
iconClick: function(index, total) {
this.changeColor(index, FR.MenuRound.currentIcon);
var base = FR.MenuRound.currentIcon - index;

if (!base) {
FR.MenuRound.showIndexList(index);
return;
}
var isNext;
// judge the direction of rotation
if (base > 0) isNext = base >= total / 2 ? true : false;
else isNext = base >= -total / 2 ? true : false;

var n = 1;
if (isNext) {
while (1) {
var obj = (FR.MenuRound.currentIcon + (n++)) % total;
FR.MenuRound.animQueen.push(obj);
if (obj == index) break;
}
} else {
while (1) {
var obj = (FR.MenuRound.currentIcon == 0 ? total : FR.MenuRound.currentIcon) - (n++) % total;
obj = obj < 0 ? total + obj : obj;
FR.MenuRound.animQueen.push(obj);
if (obj == index) break;
}
}
// if the waiting list is empty, call the rotate function
if (FR.MenuRound.animQueen.length == Math.abs(n - 1)) {
FR.MenuRound.rollRotate();
}
// try to use the setTimeOut function but failed
// setTimeOut("FR.MenuRound.showIndexList("+index+")",5000);
// setTimeout("alert('5seconds!')",5000);

FR.MenuRound.showIndexList(index);

},

changeColor: function(index, preIndex) {
var indexSrc = document.getElementById('fr_icon_'+index).src;
var preIndexSrc = document.getElementById('fr_icon_'+preIndex).src;
if((index == preIndex) && (indexSrc == FR.MenuRound.itemsSelect[index].icon)) return;
if(index == preIndex) {document.getElementById('fr_icon_'+index).src = FR.MenuRound.itemsSelect[index].icon;return;}
if(preIndexSrc == FR.MenuRound.items[preIndex].icon) {
document.getElementById('fr_icon_'+index).src = FR.MenuRound.itemsSelect[index].icon;
return;
}
document.getElementById('fr_icon_'+index).src = FR.MenuRound.itemsSelect[index].icon;
document.getElementById('fr_icon_'+preIndex).src = FR.MenuRound.items[preIndex].icon;
},

/*
* to show the effect of the UI design, make specific treatment. 
* So this function doesn't contain much techques.
*/
showIndexList: function(index){ 
if(index == -1){
document.getElementById('panelBg').style.visibility = "hidden";
for(var i = 0; i < 3; i++) {
document.getElementById('meat_'+i).style.visibility = "hidden";
}
for(var i = 0; i < 4; i++){
document.getElementById('vegetables_'+i).style.visibility = "hidden";
}
} 
else if(index == 0) {
document.getElementById('panelBg').style.visibility = "visible"; 
for(var i = 0; i < 3; i++)
document.getElementById('meat_'+i).style.visibility = "visible";
for(var i = 0; i < 4; i++){
if(getComputedStyle(document.getElementById('vegetables_'+i)).visibility == "visible"){
document.getElementById('vegetables_'+i).style.visibility = "hidden";
}
}

}
else if(index == 1) {
document.getElementById('panelBg').style.visibility = "visible";
for(var i = 0; i < 3; i++) {
document.getElementById('meat_'+i).style.visibility = "hidden";
}
for(var i = 0; i < 4; i++)
document.getElementById('vegetables_'+i).style.visibility = "visible";
}
else {
document.getElementById('panelBg').style.visibility = "hidden";
for(var i = 0; i < 3; i++) {
document.getElementById('meat_'+i).style.visibility = "hidden";
}
for(var i = 0; i < 4; i++){
document.getElementById('vegetables_'+i).style.visibility = "hidden";
} 
} 
},

iconClick2: function(index, listIndex){

var da = new Array(2);
var ta = new Array(2);
var aa = this.a;
var randPic = document.createElement('div');
randPic.id = listIndex + '_' + index;
randPic.style.position = 'relative';
for(var i = 0; i < 2; i++) 
{
da[i] = Math.random(); 
ta[i] = Math.random() * 2 * Math.PI - Math.PI;

var img = new Image();
if(listIndex == 0) img.src = FR.MenuRound.items0[index].icon;
else if(listIndex == 1) img.src = FR.MenuRound.items1[index].icon;
img.style.position = 'absolute';
img.style.left = 1.6 * aa + 0.9 * aa * da[i] * Math.cos(ta[i]) + 'px';
img.style.top = 1.6 * aa + 0.9 * aa * da[i] * Math.sin(ta[i]) + 'px';
img.style.width = 20 + 'px';
img.style.height = 20 + 'px';
img.style.zIndex = 15;
$(img).rotate(ta[i] * 0.5 / Math.PI * 360);
randPic.appendChild(img);
}
document.getElementById(this.id).appendChild(randPic);
},

// the rotate function
rollRotate: function() {
this.stepA = this.angle / this.steps;
this.steps = parseInt(this.time / this.speed);
this.counter = 1;
var sA = 6;
var tA = this.angle;

var quantity = this.items.length;
var a = this.a;
var b = this.b;
var iconWidth = this.iconWidth;
var iconHeight = this.iconHeight;
/*
* judge the direction of rotation
* or it may get wrong when continuously clicking
*/
var isNext = (this.currentIcon + 1) % quantity == this.animQueen[0] ? true : false;
FR.MenuRound.fr_interval = setInterval(function() {
if (FR.MenuRound.counter > FR.MenuRound.steps) {
clearInterval(FR.MenuRound.fr_interval);
FR.MenuRound.currentIcon = FR.MenuRound.animQueen.shift();

for(var i = 0; i < 6; i++) 
{
if(isNext)
{
FR.MenuRound.iconA[i] = FR.MenuRound.iconA[i] + tA;
}
else FR.MenuRound.iconA[i] = FR.MenuRound.iconA[i] - tA;

}
if (FR.MenuRound.animQueen.length != 0) FR.MenuRound.rollRotate();
return;
}
for (var j = 0; j != quantity; j++) {
var i = j;

var icon = document.getElementById('fr_icon_' + (FR.MenuRound.currentIcon + i) % quantity);

var x = y = 0;
if(isNext)
{
FR.MenuRound.iconA[i] = FR.MenuRound.iconA[i] - sA;

}
else
{
FR.MenuRound.iconA[i] = FR.MenuRound.iconA[i] + sA;

}
x = a + a * Math.cos(FR.MenuRound.iconA[i] / 360 * 2 * Math.PI);
y = b + b * Math.sin(FR.MenuRound.iconA[i] / 360 * 2 * Math.PI);

FR.MenuRound.setZoomLevel(icon, x, y);
FR.MenuRound.setRotation(icon, FR.MenuRound.iconA[i]);
// animation ends
if (FR.MenuRound.counter == FR.MenuRound.steps) {
icon.rawX = x;
icon.rawY = y; 
}
}
FR.MenuRound.counter++;

}, this.speed);

},

// set the picture's rotation itself
setRotation: function(icon, theta) {
$(icon).rotate(theta + 90);
},