$(function() {
		//main albums wrapper 
		var $cdContainer		= $('#cd_container'),
		
		//all the albums (cd_album containers)	
		$albums				= $cdContainer.children('.cd_album_1'),
		
		//total number of albums
		totalAlbums			= $albums.length,
		
		//current album (first one)
		$albumCurrent		= $albums.eq(0),
		
		//where the bg image is placed
		$cd_background		= $('#cd_background'),
		
		isIElt8				= ($.browser.msie && $.browser.version.substr(0,1) < 9),
		
		Template	 		= (function(){
			//if we want to use bgimages for the albums
			var bgimage				= true,
				
				init				= function() {
					
					$.when(loadImages()).done(function(){
						
						//show first album
						$albumCurrent.show();
						//initialize the events
						initEventsHandler();
					});
				},
				/* preloads a set of images */
				loadImages			= function() {
					return $.Deferred(
						function(dfd) {
							var Images = new Array();
							
							$albums.each(function(i) {
								var albumBGImage 	= $(this).data('bgimg'),
									albumImage		= albumBGImage.replace('images','thumbs');
								Images.push(albumBGImage);
								Images.push(albumImage);								
							});
							var total_images 	= Images.length,
								loaded			= 0;
							
							for(var i = 0; i < total_images; ++i){
								
								$('<img/>').load(function() {
									++loaded;
									if(loaded === total_images)
										dfd.resolve();
								}).attr('src' , Images[i]);
							}
						}
					).promise();
				},

				/*
				initializes some events
				*/
				initEventsHandler	= function() {
					/*
					clicking the title will open the album info and starts playing its songs.
					Also the bg image is changed
					*/
					$albums.find('.play-album').bind('mouseover', function() {
						var $title				= $(this);
						//if the album is opened return
						if($title.data('opened'))
							return false;
						var $album				= $title.parent();
						showAlbum($album);
						//controls if the album is already opened
						$title.data('opened', true);
						return false;
					});
						
				},
				/*
				opens the album:
				shows some description (where we use the jScollPane scroll);
				> shows a back button to close the album;
				> slides the title to the left;
				> starts playing the albums songs;
				*/
				showAlbum			= function($album) {
					var $cd_back			= $album.find('.cd_back'),
						$cd_content			= $album.find('.cd_content'),
						$product1			= $album.find('.product1'),
						$title				= $album.find('.play-album'),
					
					$albumCurrent			= $album; 
					
					//slides the title to the left
					$title.fadeOut(500);
					
					//shows content wrapper
					$cd_content.show();
					$product1.show();
					
					//this removes the inner image of the album
					$album.removeClass('cd_album_' + ($album.index() + 1));
					
					if(bgimage) {
						//which bg image to show to this album?
						var source	= $album.data('bgimg');
						//change bg image
						changeBGImage(source);
					}
			
					
					//when clicking the back button 
					//we reverse this actions
					$cd_back.show()
							.unbind('click')
							.bind('click', function(e) {
								//titles slides to the original position
								$title.fadeIn(500);
								//hide back button 
								$cd_back.hide();
								//show album image
								$album.addClass('cd_album_1');
								//hide content wrapper
								$cd_content.hide();
								//pause playing soundcloud stream
								$('.sc-player.playing a.sc-pause').click();
								//remove the background image
								if(bgimage)
									removeBGImage();
								//close the album
								$title.data('opened', false);
								return false;
					});
				},
				/*
				changes the background image
				*/
				changeBGImage		= function(img) {
					var $itemImage = $('<img src="'+img+'" alt="Background" class="cd_bgimage" style="display:none;"/>');
					$cd_background.prepend($itemImage);
					$itemImage.fadeIn(700);
				},
				/*
				removes the background image
				*/
				removeBGImage		= function() {
					$cd_background.find('img').fadeOut(700, function() {
						$(this).remove();
					});
				};
				
				
			return {
				init : init
			};
			
		})();
		
	/*
	call the init method of Template
	*/
	
	Template.init();
});