Code:
function log(data)
{
if(window.console != undefined)
console.log(data);
}
(function($) {
var packagesData = Array();
packagesData.push({
name: 'Starter',
maxSlots: 6,
ram: '192 MB',
bukkit: true,
panel: true,
web: true,
price: '$5.95 USD',
});
packagesData.push({
name: 'Public',
maxSlots: 12,
ram: '384 MB',
bukkit: true,
panel: true,
web: true,
price: '$11.95 USD',
});
packagesData.push({
name: 'Pro',
maxSlots: 18,
ram: '576 MB',
bukkit: true,
panel: true,
web: true,
price: '$17.95 USD'
});
packagesData.push({
name: 'Expert',
maxSlots: 24,
ram: '768 MB',
bukkit: true,
panel: true,
web: true,
price: '$23.95 USD'
});
packagesData.push({
name: 'Diamond',
maxSlots: 32,
ram: '1024 MB',
bukkit: true,
panel: true,
web: true,
price: '$30.95 USD'
});
packagesData.push({
name: 'Prestige',
maxSlots: 64,
ram: '2048 MB',
bukkit: true,
panel: true,
web: true,
price: '$62.95 USD'
});
$.slotSlider = function(settings)
{
$.slotSlider.init(settings);
}
$.extend($.slotSlider,{
settings:{
defaultBocks:6,
planHeight:34,
cubeXstep:30,
cubeYstep:15,
sliderDelay:20
},
selectors:{
container:'#slotSlider',
slider:'.slider',
cubes:'#slotCubes',
packagesTable:'.package',
packageName:'.arrows span b',
arrows:'.arrows a',
slotsNumber:'.slots span'
},
cubesMatrix:Array(
{x:3, y:0},{x:2, y:1},{x:4, y:1},{x:3, y:2},
{x:1, y:2},{x:5, y:2},{x:2, y:3},{x:4, y:3},
{x:3, y:4},{x:0, y:3},{x:6, y:3},{x:1, y:4},
{x:5, y:4},{x:2, y:5},{x:4, y:5},{x:3, y:6}
),
init:function(opts)
{
$.extend(this.settings, opts || {});
var settings = this.settings;
var selectors = this.selectors;
var $container = $(this.selectors.container);
var $table = $container.find(this.selectors.packagesTable);
var $slider = $container.find(this.selectors.slider).slider
({
min:1,
max:64,
slide:slide,
stop:stop
});
function slide(event, ui)
{
ui.handle.blur();
setCubes(ui.value);
var i = 0;
for(i in packagesData)
{
var data = packagesData[i];
if(data.maxSlots >= ui.value)
break;
}
setPackageData(i);
}
function stop(event, ui)
{
ui.handle.blur();
}
var $cubesContainer = $(this.selectors.cubes);
var cubesMatrix = this.cubesMatrix;
var plans = Array;
for(var i = 0; i < 4; i ++)
{
var $plan = $('<div/>').appendTo($cubesContainer);
$plan.css({top:(3 - i) * this.settings.planHeight});
plans[i] = $plan;
createPlan($plan);
}
function createPlan($plan)
{
for(var i in cubesMatrix)
{
var $cube = $('<div/>').appendTo($plan);
var cubeCoords = cubesMatrix[i];
var xPos = cubeCoords.x * settings.cubeXstep;
var yPos = cubeCoords.y * settings.cubeYstep;
$cube.css({left:xPos,top:yPos});
}
}
//setCubes(1);
setPackageData(0, true);
function setCubes(cubes)
{
$table.find(selectors.slotsNumber).text(cubes);
var completePlans = Math.floor(cubes / 16);
var lastCube = false;
for(var i in plans)
{
var $plan = plans[i];
var $cubes = $plan.find('div');
if(i < completePlans)
$cubes.show();
else
{
if(lastCube)
{
$cubes.hide();
continue;
}
var rest = cubes % 16;
$cubes.each(function(i, cube)
{
var $cube = $(cube);
if(i < rest)
$cube.show();
else
$cube.hide();
});
lastCube = true;
}
}
}
var currentPackage = 0;
$container.find(selectors.arrows).click(selectPackage);
function selectPackage(event)
{
event.preventDefault();
var $arrow = $(this);
if($arrow.hasClass('left'))
{
if(currentPackage > 0)
setPackageData(parseInt(currentPackage) - 1, true);
}
else if($arrow.hasClass('right'))
{
if(currentPackage < packagesData.length - 1)
setPackageData(parseInt(currentPackage) + 1, true);
}
}
var sliderDest;
/*
* name: 'Wood',
maxSlots: 6,
ram: '192 MB',
bukkit: true,
panel: true,
web: true,
price: '$5.95 USD'
*/
function setPackageData(index, snapToMax)
{
currentPackage = index;
var data = packagesData[index];
for(var i in data)
{
var value = data[i];
var $li = $table.find('.' + i);
if($li.size() > 0)
{
var $span = $li.find('span');
if($li.hasClass('bool'))
{
var $img = $span.find('img');
if(value)
$img.attr('src','../images/check.png');
else
$img.attr('src','../images/check.png');
}
else
$span.text(value);
}
}
var $packageName = $container.find(selectors.packageName);
$packageName.text(data.name);
if(snapToMax)
{
sliderDest = data.maxSlots;
moveSlider();
}
}
function moveSlider()
{
var currValue = $slider.slider('value');
var dir = 0;
if(sliderDest > currValue)
dir = 1;
else if(sliderDest < currValue)
dir = -1;
if(dir != 0)
{
setTimeout(function()
{
$slider.slider('value', currValue + dir);
setCubes(currValue + dir);
moveSlider();
},
settings.sliderDelay);
}
}
}
});
})(jQuery);
This is where I can change the values of the products I know that would be awesome if it could work so it could go to seperate destinations.