https://thereaction.net/js/home.js

1//if you want to use jquery
2var size = 0;
3
4$(document).ready( function () {
5	$('#news li').css('display','block');			  
6	$newsItems = $('#news > ul > li');
7	$featureImage = $('#featureImage');
8	size = $newsItems.size();
9	if(size > 1)
10		$('#news').append('<div id="newsNav"><a id="newsLeft" href="#">Left</a><p>1/'+size+'</p><a id="newsRight" href="#">Right</a></div>');
11	$newsNav = $('#newsNav');
12	
13	$('.openVideo').click(function(){
14		vidId = this.rel;
15		loadVideo(vidId);
16		tb_show(null, "#TB_inline?height=420&width=662&inlineId=videos", false);
17	});
18	$('#videoRight li a').click(function(){
19		vidId = this.rel;
20		loadVideo(vidId);
21	});
22	$('#newsRight').bind('click',function(){
23		doTransRight();
24	});
25	$('#newsLeft').bind('click',function(){
26		doTransLeft();
27	});
28	
29});
30
31function loadVideo(vidId) {
32	$('#videoLeft').html('<object width="427" height="387"><param name="movie" value="http://www.youtube.com/v/' + vidId + '"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/' + vidId +'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="427" height="387"></embed></object>');	
33	/*	no longer required: JS 23/04/10
34	$('#videoLeft').html('<p>Loading...</p>');	
35		$.ajax({
36			type: "GET",
37			url: "/getVideo",
38			data: {id:vidId},
39			success: function(data) {
40				$('#videoLeft').html(data);	
41			},
42			error: function(XMLHttpRequest, textStatus, errorThrown){
43				$('#videoLeft').html('<p>Problem loading video.</p>');	
44			}
45	});
46	*/
47}
48
49function moveElectron(pos) {
50	$electron = $('#electron');
51	
52	switch(pos) {
53		case 1:
54			$electron.css('background-position','117px 85px');
55			break;
56		case 2:
57			$electron.css('background-position','161px 44px');
58			break;
59		case 3:
60			$electron.css('background-position','410px 46px');
61			break;
62		case 4:
63			$electron.css('background-position','451px 90px');
64			break;
65		default:
66			$electron.css('background-position','117px 85px');
67	}
68	
69}
70
71var doTransRight = function() {
72	$('#newsRight').unbind('click');
73	$selected = $newsItems.filter('.selected');
74	index = 0;
75	if ($selected.next().length == 0) {
76		$featureImage.fadeOut("slow",function(){
77			$featureImage.html('');
78			$featureImage.append($newsItems.eq(0).find('.newsImage').eq(0).clone());
79		});
80		$featureImage.fadeOut("slow");
81		$selected.fadeOut("slow",function(){
82			$(this).removeClass('selected');
83			
84			$featureImage.fadeIn("slow");
85			$newsItems.eq(0).hide().addClass('selected').fadeIn("slow",function(){
86				$('#newsRight').bind('click',function(){doTransRight();});
87			});
88			$selected = $newsItems.filter('.selected');
89			index = $newsItems.index($selected)+1;
90			$newsNav.find('p').html(index+'/'+size);
91			moveElectron(index);
92		});
93	}
94	else {
95		$featureImage.fadeOut("slow",function(){
96			$featureImage.html('');
97			$featureImage.append($selected.next().find('.newsImage').eq(0).clone());
98		});
99		$selected.fadeOut("slow",function(){
100			$(this).removeClass('selected');
101			$featureImage.fadeIn("slow");
102			$selected.next().hide().addClass('selected').fadeIn("slow",function(){
103				$('#newsRight').bind('click',function(){doTransRight();});
104			});
105			
106			$selected = $newsItems.filter('.selected');
107			index = $newsItems.index($selected)+1;
108			$newsNav.find('p').html(index+'/'+size);
109			moveElectron(index);
110			
111		});
112	}
113}
114
115var doTransLeft = function() {
116	$('#newsLeft').unbind('click');
117	$selected = $newsItems.filter('.selected');
118	if ($selected.prev().length == 0) {
119		$featureImage.fadeOut("slow",function(){
120			$featureImage.html('');
121			$featureImage.append($newsItems.eq(size-1).find('.newsImage').eq(0).clone());
122		});
123		$selected.fadeOut("slow",function(){
124			$(this).removeClass('selected');
125			$featureImage.fadeIn("slow");
126			$newsItems.eq(size-1).hide().addClass('selected').fadeIn("slow",function(){
127				$('#newsLeft').bind('click',function(){doTransLeft();});
128			});
129			$selected = $newsItems.filter('.selected');
130			index = $newsItems.index($selected)+1;
131			$newsNav.find('p').html(index+'/'+size);
132			moveElectron(index);
133		});
134	}
135	else {
136		$featureImage.fadeOut("slow",function(){
137			$featureImage.html('');
138			$featureImage.append($selected.prev().find('.newsImage').eq(0).clone());
139		});
140		$selected.fadeOut("slow",function(){
141			$(this).removeClass('selected');
142			
143			$featureImage.fadeIn("slow");
144			$selected.prev().hide().addClass('selected').fadeIn("slow",function(){
145				$('#newsLeft').bind('click',function(){doTransLeft();});
146			});
147			$selected = $newsItems.filter('.selected');
148			index = $newsItems.index($selected)+1;
149			$newsNav.find('p').html(index+'/'+size);
150			moveElectron(index);
151		});
152	}
153}