/**
* @requires jQuery v1.2 or above
* Copyright (c) 2010 GaussSoft Inc. All Rights reserved
* This Script can generate an effect like a carousel slider, it takes three parameters as initial configuration.
* These parameters are:
* @desc 
* xmlFile : The xml file where the input images are located
* divName : The name of the div to read from and create the effect
* vertical: The boolean condition to set the carousel horizontal or vertical
* It is very simple to use, just declare the div you have the image list, set the attribute vertical if you want to create the 
* effect vertical, or no attribute if you want the carousel to behave horizontally.
* @Example:
* <div id="someDivName"> 
* 	<ul>
* 		<li>images/imgName.jpg</li>
* 		<li>images/imgName1.jpg</li>
* 		<li>images/imgName2.jpg</li>
* 		<li>images/imgName3.jpg</li>
* 	</ul>
* </div>
* With this configuration your images must behave horizontally carousel, you MUST include the following CSS to assure the right behavior of 
* the images on the page.
* The CSS you must include is as follows:
* @CSS:
* <style type="text/css">
* 	div#yourDivName li
*	 {
*	  position:relative;
*	  height:15%;
*	  width:auto;		
*	  float:left;
*	  text-align:center;
*	}	
* </style>
* The initial configuration must be included at the init of the page, it must set the values when the page is ready as follows:
* 
*	$(function()
*     {
*		init("xmlFileName.xml","yourDivName");	
*     });
* NOTE : Don't forget to include the jquery script and this script at the head of your HTML markup page like this:
*  
* <script type="text/javascript" src="jquery.js"></script>
* <script type="text/javascript" src="carousel.js"></script>
*
* @Author CPAEZ cpaez@gausssoft.com 
* Version 1.0 - 18/05/2010 
*
**/
function initCarousel( xmlFile,divName )
{

this.xmlFile = xmlFile;
this.divName = divName;
this.changeImage = changeImage;
this.posHorizontal = posHorizontal;
this.posVertical = posVertical;
var imgList = [];
var imageSize=0;
var imgPos=0;
var listElm=0;
var vertical = $("#"+divName+"").attr('vertical');
var urlBase="";
var listStyle = {'list-style-type':'none','margin':'0','padding':'0'};
var lstStyle = {'list-style-type':'none', 'display':'inline'};
var delay = 1600;
	listElm = divName +" "+ "li:first-child";
	//if($("#"+divName+" "+"li:last-child"+"").position().left == $("#"+divName+" "+"li:first-child"+"").position().left)
	
	if(vertical)
	{
		imageSize = $("#"+listElm+"").css("height");
		$('ul').css(listStyle);
				
	}
	else
	{
		//imageSize = $("#"+listElm+"").width();
		imageSize = "20%"
		$('ul').css(lstStyle);
		
	}	
			
		
	$.ajax({

  	     type: "GET",
	     url: this.xmlFile,
	     error:function(xhr, status, errorThrown) { alert(errorThrown+'\n'+status+'\n'+xhr.statusText); },	 
           dataType: ($.browser.msie) ? "text" : "xml",
    	     success: parseXml						

	          });
	//setInterval("changeImage()",3000);	
	/*
	* This function parses the xml document to find the text between the tags related 
	* and inserts each element into an array then readed to set  each element to the list
	*/
	function parseXml(xml)
	{
	    if(jQuery.browser.msie)
				{
				
				var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  
				xmlDoc.loadXML(xml);  
				xml = xmlDoc; 
				
				}
				$(xml).find("image").each(function()
	      			 {
    	  				imgList.push($(this).text());
					 				
	     		        });
		setInterval(function(){this.changeImage()},3000);
		//alert(vertical);	
	}
	/*
	* Changes the image of the last and the first element of the list 
	*
	*/
	function changeImage()
	{
		var elm;

		

		if( imgPos == imgList.length ) imgPos = 0;
		elm = divName + " " + "ul"; 
		if(vertical)
		{
			$("#"+elm+"").append('<li style="display:none;height:1px"><img src="'+urlBase+imgList[imgPos]+'"></li>');
			elm = divName + " " + "li:last-child img";
			$("#"+elm+"").load(posVertical);	
                  
		}
		else
		{
			$("#"+elm+"").append('<li style="display:none;width:0px "><img src="'+urlBase+imgList[imgPos]+'"></li>');
			elm = divName + " " + "li:last-child img";
			$("#"+elm+"").load(posHorizontal);	

		}
		
		
      	imgPos++;	    
     	
	
	}
	/*
	* Sets the parameters to create the effect in a vertical position
	* 
	*/
	function posVertical()
	{
		var elm;
		
		elm = divName + " " + "li:first-child";
              	$("#"+elm+"")
          			.animate(
					
          				{height: "1px"},
					{ duration: delay/2 ,complete:function(){ $(this).remove();}} 
					
          				); 
				elm = divName + " " +"li:last-child";
                        
   				$("#"+elm+"")
   				.animate(
							
							{ height:imageSize},
							{  duration: delay/2 }
							
						);
			
				 
	}
	/*
	* Sets the parameters to create the effect in a horizontal position
	*
	*/	
	function posHorizontal()
	{
		var elm;

		elm = divName + " " + "li:first-child";	
		
          		$("#"+elm+"")
          			.animate(
					
          				{width: "0"},
					{ duration: 1000 ,complete:function(){$(this).remove();}});
			
			elm = divName + " " + "li:last-child";
   					$("#"+elm+"")
					.animate(
							
							{ width:imageSize },
							{ duration: 1000 }
							

						);

		
	}
}