// JavaScript Document
// This Script is written for the purpose of dynamatically adding content from the films.xml file in the xml folder
// to the <div id="left_left"></div> in the homepage.

var xmlData = "/xml/films.xml";
var htmlData = "";
var filmsSize = 0;

$(document).ready(function() {
	
	$.get(xmlData,function(data) {  
		xuLyXMLData(data);
	},"xml");

});

function xuLyXMLData(data) {
	
	var boxTitle = "";
	if (ddl_session_time_lang == 1) {
		boxTitle = "Hình ảnh";
	} else {
		boxTitle = "Latest Download";
	}

	htmlData += "";
	htmlData +=	'<div class="standard_box">';
	htmlData +=	'	<div class="header">';
	htmlData +=	'		<div class="insidel">';
	htmlData +=	'			<div class="insider">';
	htmlData +=	'			   <div class="left_header">'+boxTitle+'</div>';
	htmlData +=	'			   <div class="right_header">';
	htmlData +=	'					<a id="films_next" class="next_btn_gray" href="javascript:void(0);">Next</a>';
	htmlData +=	'					<a id="films_back" class="back_btn_gray" href="javascript:void(0);">Back</a>';
	htmlData +=	'				</div>';
	htmlData +=	'			</div>';
	htmlData +=	'		</div>';
	htmlData +=	'	</div>';
	htmlData +=	'</div>';
	
	
htmlData += '<div class="lastest">';
htmlData += '	<div id="films_div" style="height:275px;" class="content">';
	
// big loop here
var films = $(data).find('film');
filmsSize = $(films).size();

$(films).each(function(filmIndex){

var filmName = $(this).attr('name');

htmlData += '<div class="film" >';
htmlData += '<div class="wallpaper">';
htmlData += '    <div class="heading">';
htmlData += '        <span class="title">'+filmName+' Wallpaper</span>';
htmlData += '        <span id="wall_back_'+filmIndex+'"><a class="next" href="javascript:void(0);"><span>Back</span></a></span>';
htmlData += '        <span id="wall_next_'+filmIndex+'"><a class="back" href="javascript:void(0);"><span>Next</span></a></span>';
htmlData += '    </div>';


htmlData += '    <div id="slider_'+filmIndex+'" class="preview">';	
			// wallpaper loop here
			var tempImgSrcArray = [];
			var tempDownloadLinkArray = [];
			var count = 0;
			
			var walls = $(this).find('wall');
			var wallsSize = $(walls).size();
			$(walls).each(function(index){
				var imgSrc = $(this).text();
				var downloadLink = $(this).attr('downloadLink');
				tempImgSrcArray.push(imgSrc);
				tempDownloadLinkArray.push(downloadLink);
				count ++ ;
				if(count >= 4 || index == (wallsSize - 1)) {					
htmlData += '        <div class="wall_box" style="display:none">';
					for(i= 0; i < tempImgSrcArray.length; i ++) {
htmlData += '            <a href="'+ tempDownloadLinkArray[i] +'"><img src="'+ tempImgSrcArray[i] +'"/></a>';
					}
htmlData += '        	<div class="clearfloats"></div>';					
htmlData += '        </div>';
					count = 0;
					tempImgSrcArray = [];
					tempDownloadLinkArray = [];		
				} // this block is to make a block of 4 images inside a <div style="display:block"> </div>.				
			
			}); // end of Wallpaper loop

htmlData += '    </div>';
    
htmlData += ' </div>'; 
htmlData += '<div class="clearfloats"></div>';
                  
htmlData += '<div class="buddy1">';
htmlData += '    <div class="heading">';
htmlData += '        <span class="title">Avatar Buddy icon</span>';
htmlData += '        <a id="b_next_'+filmIndex+'" class="next" href="javascript:void(0);"><span>Next</span></a>';
htmlData += '        <a id="b_back_'+filmIndex+'" class="back" href="javascript:void(0);"><span>Back</span></a>';
htmlData += '    </div>';

htmlData += '    <div id="b_slider_'+filmIndex+'" class="preview">';
	
		// buddy loop here
		tempImgSrcArray = [];
		tempDownloadLinkArray = [];
		count = 0;
		
		var buddies = $(data).find('film:eq('+filmIndex+')').find('buddy');
		var buddiesSize = $(buddies).size();
		
		$(buddies).each(function(index){
				var imgSrc = $(this).text();
				var downloadLink = $(this).attr('downloadLink');
				tempImgSrcArray.push(imgSrc);
				tempDownloadLinkArray.push(downloadLink);
				count ++ ;
				if(count >= 4 || index == (buddiesSize - 1)) {					
htmlData += '        <div style="display:none">';
					for(i= 0; i < tempImgSrcArray.length; i ++) {
htmlData += '            <a href="'+ tempDownloadLinkArray[i] +'"><img src="'+ tempImgSrcArray[i] +'"/></a>';
					}
htmlData += '        </div>'
					count = 0;
					tempImgSrcArray = [];
					tempDownloadLinkArray = [];		
				} // this block is to make a block of 4 images inside a <div style="display:block"> </div>.				
			
			}); // end of Buddy loop

htmlData += '    </div>';
htmlData += '</div>';
htmlData += '<div class="clearfloats"></div>';

htmlData += '</div>';

}); // end of big loop here

htmlData += '	</div>';
htmlData += '</div>';
	
	// write htmlData taken from the xml file to the div with id = "#left_left".
	$("#left_left").prepend(htmlData);
	
	// now add animation to the HTML data.
	$('#films_div').cycle({
		fx: 'fade',// choose your transition type, ex: fade, scrollUp, shuffle, etc...
		timeout:  90000,
		prev: '#films_back',
		next: '#films_next'
	});
	
	for (j=0 ; j < filmsSize;  j++) {
		$('#slider_'+j).cycle({
			fx: 'fade',// choose your transition type, ex: fade, scrollUp, shuffle, etc...
			timeout:  20000,
			prev: '#wall_back_'+j,
			next: '#wall_next_'+j
		});
		
		$('#b_slider_'+j).cycle({
			fx: 'fade',// choose your transition type, ex: fade, scrollUp, shuffle, etc...
			timeout:  20000,
			prev: '#b_back_'+j,
			next: '#b_next_'+j
		});
	}
}