var Content=[];
var famCounter=0;
var famScrolAmount=104;
var current_img=0;

$(document).ready(function(){
						   
						   Content = fillDataArray();
						   
						   $('#SHM_featured_articles').html('');
						   createMainPanel();
						   createBIGPanel();
						   createThumbPanel()
						   createTextPanel();
						   createArrows();
						   createReadMore();
						   
						   addThumbNails();
						   addPreloaderOption();
						   
						   });

function fillDataArray()
{
   var arr=[];
   $('#SHM_featured_articles').find('div').each(function(n){
														 	  	
														 	  var obj = new Object();
															  obj.img = $(this).find('img').eq(0).attr('src');
														 	  obj.content = $(this).find('span').eq(0).html();
															  obj.a = $(this).find('a').eq(0);
														 	  arr.push(obj);
														    });	
   return arr;
}

function addThumbNails()
{
	var i=0;
	var html_content="";
	if(Content.length)
	{
		while(i<Content.length)
		{
		  html_content = html_content+"<img id='img_"+i+"' src='"+Content[i].img+"'/>";
		
		 i++;
		}
		
		$('#panel_container .img_plate').css('width',((Content.length+1)*famScrolAmount)+'px');
		$('#panel_container .img_plate').html(html_content);
		$('#panel_container .img_plate img').bind('mouseover',commonMouseEffect);
		$('#panel_container .img_plate img').bind('mouseout',commonMouseEffect);
		$('#panel_container .img_plate img').bind('click',function(){ 
																      imgOpenFunction($(this).attr('id').split('img_')[1]);
																	 
																	 });
		
		
	
		if(Content.length>4)
		{
		  $('#panel_container .arrowRight').show();
		  $('#panel_container .arrowLeft').show();
		  $('#panel_container .arrowRight').bind('click',function(){moveNext(true)});
		  $('#panel_container .arrowLeft').bind('click',function(){moveNext(false)});
		}
	 }
	
}

function imgOpenFunction(n)
{	
	style = "margin:10px;";
	$('.bigPictire #pic1').attr('src',Content[n].img);
	$('.txt_portion').html('<div style="'+style+'">'+Content[n].content+'</div>')
	current_img=n;
}

function moveNext(bool)
{
  var tgt;	
	if(bool)
	{
		if(famCounter<Content.length-4){
		famCounter++;
		tgt = (-1)*(famCounter)*famScrolAmount;
		$('#panel_container .img_plate').animate({left:tgt+'px'},550);}
	}
	else
	{
		if(famCounter>0){
		famCounter--;
		tgt = (-1)*(famCounter)*famScrolAmount;
		$('#panel_container .img_plate').animate({left:tgt+'px'},550);}
	}
}


function addPreloaderOption()
{
  $('.bigPictire #pic1').bind('load',function(){
											  	  $(this).css('opacity',0);
											      $(this).animate({opacity:1},600,function(){      
																						   	  $('.bigPictire #pic0').attr('src',$('.bigPictire #pic1').attr('src'));	
																						     });
											    });
}

function commonMouseEffect(e)
{
   switch(e.type)
   {
	 case "mouseover":
	 $(this).css('border','1px dotted #075983');
	 break;
	
	 case "mouseout":
	  $(this).css('border','1px solid #aec95c');
	 break;
	 
	 
   }
}


function openLink()
{
	window.location.href = Content[current_img].a.attr('href')
	
 
}

//DESIGNING PART...
function createMainPanel()
{
	HTML_CONTENT = "<div id='panel_container'></div>";	
	$('#SHM_featured_articles').append(HTML_CONTENT)
}

function createBIGPanel()
{
	imgpath = Content[0].img;
	preloader = "<img src='http://www.roadandtrack.in/image/preloader.gif' style='display:block; top:140px; left:160px;	width:50px; height:50px;'>";
	HTML_CONTENT = "<div class='bigPictire'>"+preloader+"<img id='pic0' src='"+imgpath+"'><img id='pic1' src='"+imgpath+"'></div>";	
	$('#panel_container').append(HTML_CONTENT)
	
	$('#panel_container .bigPictire').css('cursor','pointer');
	$('#panel_container .bigPictire').bind('click',function(){
															
															  openLink();
															  
															  });
	
	//imgOpenFunction
}

function createThumbPanel()
{
	HTML_CONTENT = "<div class='img_plate_mask'><div class='img_plate'></div></div>";	
	$('#panel_container').append(HTML_CONTENT)
}

function createTextPanel()
{
	HTML_CONTENT = "<div class='txt_portion'></div>";	
	$('#panel_container').append(HTML_CONTENT)
	style = "margin:10px;";
	$('.txt_portion').html('<div style="'+style+'">'+Content[0].content+'</div>')
}

function createArrows()
{
	HTML_CONTENT = "<div class='arrowLeft'></div><div class='arrowRight'></div>";	
	$('#panel_container').append(HTML_CONTENT)
}

function createReadMore()
{
	HTML_CONTENT = "<img class='readMore' src='"+theme_url+"/featured_article_module/read_more.jpg'/>";	
   
   $('#panel_container').append(HTML_CONTENT);
   $('#panel_container .readMore').bind('click',openLink);
  
}