// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready
$(document).ready(function() {

// main vertical scroll
$vertical = $("#main").scrollable({

	// basic settings
	vertical: true,
	size: 1,
	clickable: false,

	// up/down keys will always control this scrollable
	keyboard: 'static',

	// assign left/right keys to the actively viewed scrollable
	onSeek: function(event, i) {
		
		/** get currently selected 'scrollable'-div. this variable will be used for next/prev-click-handler as well  */
		selectedScrollable = horizontal.scrollable(i);
		/** ... and focus, in order to let keyboard-input work */
		selectedScrollable.focus();
	}
}).navigator("#main_navi");


/** horizontal scrollables. each one is circular and has its own navigator instance */
var horizontal = $(".scrollable").scrollable({
	size: 1,
	vertical:false,
	onSeek: function(event, i){
		var size = getItemSize(selectedScrollable);
		if(i > size)
			i = 1;
		selectedScrollable.getRoot().find('.indexOf').text(i);
	}
}).circular();

/** count total items within each scrollable */
for(var i = 0; i < horizontal.size(); i++){
	var scrollable = horizontal.scrollable(i);
	var size = getItemSize(scrollable);
	var indexTotal = scrollable.getRoot().find('.indexTotal');
	if(indexTotal != undefined)
		indexTotal.text(size);
	var indexOf = scrollable.getRoot().find('.indexOf');
	if(indexOf != undefined)
		indexOf.text('1');
}


/** select first element of 'scrollable'-div here and focus, in order to let left/right arrow-keys work */
var selectedScrollable = horizontal.eq(0).scrollable();
selectedScrollable.focus();

/** bind click-handler to all next/prev-buttons */
$('.arrow-navi a.custom_next').click(function(event){
	var item = selectedScrollable.next();
	selectedScrollable.getRoot().find('.indexOf').text(item.getIndex());
});
$('.arrow-navi a.custom_prev').click(function(event){
	selectedScrollable.prev();
	selectedScrollable.getRoot().find('.indexOf').text(item.getIndex());
	
});


/**
 * Returns the amount of '.item'-divs within a single 'scrollable'-div
 * 
 * @param {Object} scrollable
 */
function getItemSize(scrollable){
	var jqScrollable = scrollable.getRoot();
	var items = jqScrollable.find('div.item');
	var count = 0;
	if(items == null || items.size() == 0)
		return 0;
	items.each(function(index, value){
		if(value.className == 'item')
			count++;
	});
	return  count;
}


});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86