Reverse engineering GoogleX to work with dynamic code [Archive]

emehrkay

05-18-2005, 02:33 PM

im new with javascript, but i came across googleX and really liked it. Im creating a picture gallery in php and i thought it would be a good idea to use the osx like bar to display the pictures.

my problem comes from trying to understand which parts of the javascript code needs to be altered in order for it to work with dynamic code pulled from a database.

here is google x running http://ablaze.fr/GoogleX.htm

here is the source, i omitted a lot of unnessary code. i understand a little more and changed some code to work, i can go on if helped. thanks
<title>Google</title><style>

</style><script type =" text/javascript">
k = document;

v = Date;
x = false;
z = Array;
af = Math.floor;
ag = RegExp;
b = new z (13);
s = new z ("null", "web", "images", "groups", "news", "froogle", "local", "scholar", "video", "maps", "labs", "gmail", "more");
aa = new z (11);
ab = 10;
t = 0;
u = 0;
n = 0;
o = new v ();
h = 5;
m = 385;
c = 0;
w = x;
var title;
var firstHoverOccurred = x;
m = 385;
p = 0;

function d(ac) {
c = ac;
o = new v ();
setTimeout ("gidle()", 20);
}

function e(ac) {
c = 0;
w = x;
o = new v ();
setTimeout ("gidle()", 20);
}

function ae()
{
for (var j = 1; j < b.length; j++)
{
b[j] = 35
}

title = k.getElementById ('imageTitle');

for (i = 0; i < b.length; i++)
{
aa[i] = new Image ();
aa[i].src = s[i + 1] + ".gif"
}

setTimeout ("gidle()", 20);
}

function gidle()
{
var l = 0;

for (var i = 1; i < b.length; i++)
{
var imagename = "image" + i;
var imageElem = k.getElementById (imagename);

if (c != i)
{
if (b[i] > 35)
{
b[i] -= h;

if (b[i] <= 35)
{
b[i] = 35;
imageElem.src = s[i] + "-sm.gif"
}

imageElem.width = b[i];
imageElem.height = b[i];

if (c == 0)
{
var g = af (255 - 255 * (b[i] - 35) / 35);
title.style.color = "rgb(" + g + "," + g + "," + g + ")"
}

p = 1
}

l += b[i]
}
}

if (c != 0 && b[c] < 70)
{
imagename = "image" + c;
imageElem = k.getElementById (imagename);

if (w == x)
{
w = true;

if (c < 6)
{
var y = 360 - (c - 1) * 70;
title.innerHTML = k.getElementById (imagename).alt + '<img src="cleardot.gif" width="'+y+'" height="1"/>'
}

else
{
var y = (c - 7) * 70 + 70;
title.innerHTML = '<img src="cleardot.gif" width="'+y+'" height="1"/>' + k.getElementById (imagename).alt
}
}

b[c] += h;
p = 1;

if (b[c] > 70)
{
b[c] = 70
}

l += b[c];

if (l < m)
{
b[c] += m - l;

if (b[c] > 70)
{
b[c] = 70
}

l = m
}

var g = af (255 - 255 * (b[c] - 35) / 35);
title.style.color = "rgb(" + g + "," + g + "," + g + ")";
imageElem.width = b[c];
imageElem.height = b[c];
k.getElementById (imagename).src = s[c] + ".gif"
}

m = l;
var ad = new v ();
ab = ad.getTime () - o.getTime ();
o = ad;
t += ab;
u++;
n = t / u;
h = 5;

if (u > 4)
{
if (n > 30)
{
h = 10
}

if (n > 60)
{
h = 15
}

if (n > 90)
{
h = 20
}
}

if (p)
{
setTimeout ("gidle()", 20);
p = 0
}
}</script></head><body onload="ae()" alink="red" bgcolor="white" link="#0000cc" text="black"
vlink="#551a8b"><center><form action="http://mayeldb.online.fr/google/" name="f" target="_self">
<script>

</script>
<a class="q" id="1a" onclick="return qs(this)"
href="/google/?gs=http://www.google.com/search?"><img id="image1" onmouseover="d('1')" onmouseout="e('1')"
alt="Web Search" src="web-sm.gif" border="0" height="35" width="35"></a><a class="q" id="2a"
onclick="return qs(this)"
href="/google/?gs=http://www.google.com/images?"><img id="image2" onmouseover="d('2')" onmouseout="e('2')"
alt="Images" src="images-sm.gif" border="0" height="35" width="35"></a>

general knorr

05-19-2005, 12:38 AM

That's alot of code for not knowing much JS. It could use some comments, I can't follow it but lots of visitors here will be able to. So what is a csx bar ? Do you mean the row of images abouve the form box for the google search ? :thumbsup: I noticed you don't seam to have any constructors. Did you do that on purpose so the code would run on more browsers or is that all the code level that's needed ? You'll get it, keep crank'in.

emehrkay

06-02-2005, 03:11 AM

thanks general, but i decided to scrap the project. ill just use regular thumbs. yeah the code was made by a guy at google learning dhtml and javascrip, he didnt add any comments or anything.