// JavaScript Document

var Slideshow = {
    arrData : Array(),
    numFramesViewed : 0,
    
		// change the imageUrl to wherever the gui folder sits, no trailing slash
		//imageUrl : 'http://csdt-3152/handover/lmi/image',
		imageUrl : './image',
    
		init : function(){
		    // first we get all the slideshow items
				var ssFrames = $('#ss-dump .frame').get();
				
				// cycle through each frame and pluck out the data
				for(var i=0; i<ssFrames.length; i++){
				    var frame = ssFrames[i];
						var title = $('h3', frame).html();
						var image = $('.image img', frame).get(0);
						var content = $('.content', frame).html();
						var arrRow = Array();
						arrRow['title'] = title;
						arrRow['image'] = image;
						arrRow['content'] = content;
						
						// push the data onto our data member
						this.arrData[this.arrData.length] = arrRow;
				}
				
				// hide the original slideshow element
				$('#ss-dump').css('display', 'none');
				
				// trigger the first frame to load
				this.showFrame(0);
		},
		
		/**
		 *  Creates the buttons and returns them as a dom element
		 *  Required: selectedKey - the index that is highlighted as selected	(Note: 
		 *  this value is 1 less than the destined number, seeing the first index is 0
		 *  but the first frame number is 1 )	  
		 */		 		
		createButtons : function(selectedKey){
		    var buttons = document.createElement('div');
		    $(buttons).attr('class', 'buttons');
		    var ul = document.createElement('ul');
		    
		    if(selectedKey < 0) selectedKey = 0;
		    if(selectedKey > this.arrData.length) selectedKey = this.arrData.length;
		    
		    // first we need to dicover which buttons to show
		    var startPos = 0;
		    if(selectedKey > 2) startPos = (selectedKey*1) - 2;
		    if(selectedKey > this.arrData.length - 2){
				    endPos = this.arrData.length;
				    startPos = endPos - 5;
				}else{
				    var endPos = startPos + 5;
				}
				
				// one last check that our logic is correct
				if(endPos > this.arrData.length){
				    var endPos = this.arrData.length;
				    var startPos = endPos - 5;
				}
				if(startPos < 0) startPos = 0;
		    
		    
		    var lis = Array();
		    
		    if(true || selectedKey > 0){
				    // we will show the prev button
				    
				    // first to make room for the button
						for(var i=lis.length; i>=0; i--){
						    lis[i+1] = lis[i];
						};
						
						// now create the list item
						var li = document.createElement('li');
				    var a = document.createElement('a');
				    var prevKey = (selectedKey*1)-1;
				    if(prevKey < 0) prevKey = 0;
				    $(a).attr('href', 'javascript: Slideshow.showFrame('+prevKey+')');
						$(a).html('<img src="'+this.imageUrl+'/gui/ss-prev.gif" alt="Previous">');
						$(li).append(a);
						lis[lis.length] = li;
				};		 
				   
		    for(var i=startPos; i<endPos; i++){
				    // now we create all the relevant buttons
				    var li = document.createElement('li');
				    if(selectedKey == i) $(li).attr('class', 'selected');
				    var a = document.createElement('a');
				    $(a).attr('href', 'javascript: Slideshow.showFrame('+i+')');
						$(a).text(((i*1)+1));
						$(li).append(a);
						lis[lis.length] = li;
				};

		    if(selectedKey < this.arrData.length){
				    // we will show the next button
				    var li = document.createElement('li');
				    var a = document.createElement('a');
				    var nextKey = (selectedKey*1)+1;
				    if(nextKey >= this.arrData.length) nextKey = this.arrData.length-1;
				    $(a).attr('href', 'javascript: Slideshow.showFrame('+nextKey+')');
						$(a).html('<img src="'+this.imageUrl+'/gui/ss-next.gif" alt="Next">');
						$(li).append(a);
						lis[lis.length] = li;
				};				
				
				for(var i=0; i<lis.length; i++){
				    $(buttons).append(lis[i]);
				}
				
				return buttons;
		    
		},
		
		showFrame : function(selectedKey){
				// get the buttons
				var buttons = this.createButtons(selectedKey);
		    
				// wipe out the contents of the slideshow
				//$('#ss-live').html('');
				
				// create a new slideshow element
				var ssLive = document.createElement('div');
				var ssLiveOld = $('#ss-live');
				$(ssLiveOld).attr('id', 'old');
				$(ssLive).attr('id', 'ss-live');
				
				// add the image 
				var image = document.createElement('div');
				$(image).attr('class', 'image');
				$(image).append(this.arrData[selectedKey]['image'].cloneNode(true));
				$(ssLive).append(image);
				
				// create the content holder
				var content = document.createElement('div');
				$(content).attr('class', 'content');
				
				// add the heading
				var heading1 = document.createElement('h2');
				$(heading1).text('Skills used in this Industry');
				$(content).append(heading1);
				
				// add the buttons
				$(content).append(buttons);
				
				// add the heading
				var heading2 = document.createElement('h3');
				$(heading2).text(this.arrData[selectedKey]['title']);
				$(content).append(heading2);
				
				// add the frame content
				$(content).append(this.arrData[selectedKey]['content']);
				
				// put the content into the holder
				$(ssLive).append(content);
				
				// add a clearing div
				var clear = document.createElement('div');
				$(clear).attr('class', 'clear');
				$(ssLive).append(clear);
				
				// get rid of the old frame
				$(ssLiveOld).css('display', 'none');
        
        // put the new
				$('#ss-wrapper').append(ssLive);

				
		}
}