Ext.onReady(function()
{

	var newsXml = '/actuas/html/actua.xml';


	Ext.namespace('App');
	App.itemWidth = 289;
	App.decalage = -85;
	App.currentOffset = 0;
	App.currentItem = 0;
	
	// Item sur lequel débute le carousel
	App.startItem = 2;
	
	App.maxOffset = 0;
	App.minOffset = 0;
	App.nbItems = 0;
	App.startOffset = 1;
	App.moving = false;
	
	App.anim = {
		duration: 0.5
	};
	
	App.init = function(store)
	{
		App.nbItems = store.data.length;
		App.minOffset = App.startOffset - (App.nbItems-1)*(App.itemWidth+App.decalage);
		App.maxOffset = App.startOffset;
		App.dv.applyToMarkup('carousel');
		
		var items = Ext.select('#bottom-content li', true);
		var i=0;
		Ext.each(items.elements, function(item)
		{
			item.applyStyles({'z-index': App.nbItems-i});
			i++;
		});
		
		var menu = Ext.select('#bottom-menu td', true);
		menu.elements[1].addClass('first');
		menu.elements[menu.elements.length-2].addClass('last');
		
		App.goTo(App.startItem);
		
		Ext.get('fleft').first().on('click', function (evt, t)
		{
			evt.stopEvent();
			App.goPrev();
		});
		
		Ext.get('fright').first().on('click', function (evt, t)
		{
			evt.stopEvent();
			App.goNext();
		});
	};
	
	App.setMenuBg = function()
	{
		var offset1 = 0;
		var offset2 = 0;
		
		if (App.currentItem === 1)
		{
			offset2 = offset1 = Ext.get('bmenu-left').getWidth();
			
		}
		else if(App.currentItem === App.nbItems)
		{
			offset1 = Ext.get('bmenu-right').getWidth();
		}
		
		
		var l = Ext.get('ilink-' + App.currentItem).getLeft();
		var w = Ext.get('ilink-' + App.currentItem).getWidth();

		Ext.get('slide').setX(l-offset2, App.anim);
		Ext.get('slide').animate({
			width:{to:w+offset1}
		})
	
	};
	
	App.serialiseXml = function(node,level) {
		if (node == null || typeof node != 'object') {return node};
		if (window.ActiveXObject) {
			//pour IE
			return node.xml;
		} else if (window.XMLSerializer) {
			//pour FF
			return new XMLSerializer().serializeToString(node);
		}
	};
	
	
	
	
	App.goPrev = function ()
	{
		App.goTo(App.currentItem-1);
	};
	
	App.goNext = function ()
	{
		App.goTo(App.currentItem+1);
	};
	
	
	App.goTo = function (itemId)
	{
		if (App.moving === true){
			return;
		}
		
		if (itemId === App.currentItem){
			return;
		}
		
		var item = Ext.get('item-' + itemId);
						
		var newOffset = App.startOffset - (itemId-1)*(App.itemWidth+App.decalage);
		
		if (newOffset <= App.maxOffset && newOffset >= App.minOffset)
		{
			App.moving = true;
			
			//Ext.get('bottom-content').setX(newOffset, App.anim);
			Ext.get('bottom-content').animate({left:{to:newOffset}}, App.anim.duration, 
				function ()
				{  
					App.currentOffset = Ext.get('bottom-content').getLeft(true);
				}
			);
			App.scaleDown(App.currentItem);
			var ilink = Ext.get('ilink-'+App.currentItem) || undefined;
			if (ilink){
				Ext.get('ilink-'+App.currentItem).removeClass('active');
			}
		
			App.currentItem = itemId;
			
			Ext.get('ilink-'+itemId).addClass('active');
			App.scaleUp(App.currentItem);
			App.setMenuBg();
		}
	};
	
	App.scaleUp = function (itemId)
	{
		var el = Ext.get('item-' + itemId);
		el.applyStyles({'z-index': 5000});
		var next = el.next() || undefined;
		var prev = el.prev() || undefined;
		
		if (next){
			next.applyStyles({'z-index': 4950});
			var nnext = next.next() || undefined;
			if (nnext){
				nnext.applyStyles({'z-index': App.nbItems-itemId});
			}
		}
		
		if (prev){
			prev.applyStyles({'z-index': 4950});
			var pprev = prev.prev() || undefined;
			if (pprev){
				pprev.applyStyles({'z-index': itemId-2});
			}
		}
		
		
		
		el.animate({
			'marginTop' :{to:0}
		}, App.anim.duration, 
		function (){
			App.moving = false;
		
		});
		el.select('.item-bg').first().scale(336, 256);
		el.scale(336, 256);
		el.select('.item-title').first().setTop(3);
		el.select('.item-title').first().applyStyles({'font-size': '13pt'});
		

		el.select('.item-image').first(). setLeftTop(9,35);
		el.select('.item-image').first().setSize(151,114);

		el.select('.item-desc').first(). setLeftTop(167,35);
		el.select('.item-desc').first().setSize(167,114);
		el.select('.item-desc').first().applyStyles({'font-size': '10pt'});
		
		el.select('.item-now').first(). setLeftTop(9,154);
		el.select('.item-now').first().setSize(235,85);
		el.select('.item-now').first().applyStyles({'font-size': '10pt'});
		
	
		el.select('.item-logo').first(). setLeftTop(233,154);
		el.select('.item-logo').first().setSize(99,85);
		
		el.select('.item-readmore').first(). setLeftTop(12,231);
		el.select('.item-readmore').first().setSize(180,20);
		el.select('.item-readmore').first().first().applyStyles({'font-size': '10pt'});

	};
	
	App.scaleDown = function (itemId)
	{
		var el = Ext.get('item-' + itemId) || undefined;
		if (!el){
			return;
		}
		el.applyStyles({'z-index': 4950});
				
		el.animate({
			'marginTop' :{to:19}
		}, App.anim.duration, 
		function (){
			App.moving = false;
		
		});
		el.scale(289, 220);
		el.select('.item-bg').first().scale(289, 220);
		el.select('.item-title').first().setTop(2);

		el.select('.item-title').first().applyStyles({'font-size': '9pt'});
		
		el.select('.item-image').first(). setLeftTop(9,30);
		el.select('.item-image').first().setSize(128,96);

		
		el.select('.item-desc').first(). setLeftTop(142,30);
		el.select('.item-desc').first().setSize(144,96);
		el.select('.item-desc').first().applyStyles({'font-size': '7pt'});
		
		
		el.select('.item-now').first(). setLeftTop(9,132);
		el.select('.item-now').first().setSize(202,73);
		el.select('.item-now').first().applyStyles({'font-size': '7pt'});
		

		el.select('.item-logo').first(). setLeftTop(200,132);
		el.select('.item-logo').first().setSize(85,73);
		
		el.select('.item-readmore').first().setLeftTop(12,195);
		el.select('.item-readmore').first().setSize(160,20);
		el.select('.item-readmore').first().first().applyStyles({'font-size': '7pt'});


	};
	

	var itemRecord = Ext.data.Record.create([
		{name: 'id'},
		{
			name: 'title', 
			convert: function(v, el){ 
				var myEl = el.getElementsByTagName('title')[0].firstChild;
				return App.serialiseXml(myEl);
			}
		},
		{
			name: 'subtitle', 
			convert: function(v, el){ 
				var myEl = el.getElementsByTagName('subtitle')[0].firstChild;
				return App.serialiseXml(myEl);
			}
		},
		{
			name: 'desc', 
			convert: function(v, el){ 
				var myEl = el.getElementsByTagName('desc')[0].firstChild;
				return App.serialiseXml(myEl);
			}
		},
		{name: 'image'},
		{
			name: 'nowList', 
			mapping: 'nowList', 
			convert: function (v, el)
			{
				var ar = [];
                var nows = el.getElementsByTagName('now');
				
				var nb = nows.length;
                for (var i = 0, n; i < nb; i++) 
				{
					var t = App.serialiseXml(nows[i].firstChild);
					ar[i] = t;
                }
				
                return ar;
			}
		},
		{name: 'logo'},
		{name: 'link'},
		{name: 'anchor'},
		{name: 'menu'}
		]);


	App.dataStore = new Ext.data.Store({
		autoLoad: true,
		url: 'data.xml',
		reader: new Ext.data.XmlReader({
			totalRecords: "carousel", // The element which contains the total dataset size (optional)
			record: "item",           // The repeated element which contains row information
			id: "id"
		}, itemRecord),
		listeners: {
			load: App.init
		}
	});

	var template = new Ext.XTemplate(
	    '<div id="fleft"><a href="#" id="goPrev"><img src="images/flecheg.jpg" alt="Précédent" /></a></div>',
		'<div id="bottom">',
		  '<ul id="bottom-content">',
		  '<tpl for=".">',
		    '<li id="item-{id}" style="left:{id*'+(App.itemWidth-85)+'}px;">',
		      '<div class="item-small">',
		        '<img src="images/bmodule_02.png" class="item-bg" alt=""/>',
		        '<h4 class="item-title">{title}</h4>',
		        '<img src="{image}" class="item-image" alt="" />',
		        '<div class="item-desc"><b>{subtitle}</b><br /><br />{desc}</div>',
		        '<div class="item-now">',
			      /*'<b>En ce moment</b>',*/
			      '<tpl for="nowList">',
				    '<br /> - {.}',
			      '</tpl>',
		        '</div>',
				'<div class="item-readmore">',
                '<a ',
                '<tpl if="link">',
                  'href="{link}" target="_blank"',
                '</tpl>',
                '>{anchor}</a></div>',
		        '<img src="{logo}" class="item-logo" alt=""/>',
	          '</div>',
		    '</li>',
		  '</tpl>',
		  '</ul>',
		'</div>',
		'<div id="fright"><a href="#" id="goNext"><img src="images/fleched.jpg" alt="Suivant" /></a></div>',
		'<div style="clear:both">&nbsp;</div>',
		'<div id="bottom-menu-wrapper">',
		'<table id="bottom-menu" cellspacing="0" cellpadding="0">',
		  '<tr>',
		    '<td id="bmenu-left"></td>',
		    '<tpl for=".">',
		      '<td id="ilink-{id}"><a href="#" onclick="App.goTo({id}); return false;">{menu}</a></td>',
		    '</tpl>',
			'<td id="bmenu-right"></td>',
		  '</tr>',
		  '<tr><td style="height:6px;"></td></tr>',
		  '</table>',
		  '<div id="slide"></div>',
		'</div>');
		
	App.dv = new Ext.DataView({
		autoScroll: true,
		store: App.dataStore,
		tpl: template,
		//height: 287,
		//multiSelect: true,
		overClass: 'x-view-over',
		itemSelector: 'li.thumb-wrap',
		emptyText: "Nada"
	});
	
	
	
	// Gestion des actus - flux RSS
	
	var newsDS = new Ext.data.Store({
		autoLoad: true,
		url: newsXml,
		
		reader: new Ext.data.XmlReader({
			record: "item"
		}, 
			Ext.data.Record.create([
				{name: 'title'},
				{name: 'link'},
				{name: 'description'}
			])
		),
		listeners: {
			load: function (store)
			{
				store.data.length = 3;
				newsDv.applyToMarkup('allNews');
			}
		}
	});
	

	
		var newsTpl =  new Ext.XTemplate(
		  '<tpl for=".">',
		  '<div class="news">',
			'<!--<strong class="date">21 / 11 / 08</strong>-->',
			'<div class="content">{title}</div>',
			'<div class="readmore"><a href="{link}">Lire la suite</a></div>',
		  '</div>',
	    '</tpl>'
	);

	
	newsDv = new Ext.DataView({
		autoScroll: true,
		store: newsDS,
		tpl: newsTpl,
		//height: 287,
		//multiSelect: true,
		overClass: 'x-view-over',
		itemSelector: 'div.class',
		emptyText: "Aucune actualité"
	});
	

	
	
	
	
});