var csCurrentPageElement;

//Variables to set the co-ordinates for an active cellstream cell. 
/*
var csActiveLeftCoor = [0, 75, 164];
var csActiveTopCoor = -35;
var csActiveHeight = 248;
var csActiveWidth = 225;
//Variables to set the co-ordinates for a normal cellstream cell. 
var csNormalTopCoor = 0;
var csNormalHeight = 180;
var csNormalWidth = 123;
var csNormalLeftCoor = [0, 133, 266];
*/

var csActiveLeftCoor =0 ;
var csActiveTopCoor = [0,150,318];
var csActiveHeight = 250;
var csActiveWidth = 190;
//Variables to set the co-ordinates for a normal cellstream cell. 
var csNormalTopCoor = [0,203,406];
var csNormalHeight = 191;
var csNormalWidth = 117;
var csNormalLeftCoor = 0;

var csItemsPerPage = 3;
var csPageNumber = 0;
var csFeedItems;
var csContainer;
var csPageCount = 0;
var csViewAllText = "View All";



function initCellstream(container, data){

    csContainer = container;
    csFeedItems = new Array();
    feedDom = parseFeed(data);  
    jQuery('item', feedDom).each(function(){
        var item = new Object();
        item.title = jQuery(this).find('title').eq(0).text();
        item.link = jQuery(this).find('link').eq(0).text();
        item.description = jQuery(this).find('description').eq(0).text();
        item.updated = jQuery(this).find('pubDate').eq(0).text();
        item.id = jQuery(this).find('guid').eq(0).text();
        item.author = jQuery(this).find('author').eq(0).text();
        item.url = jQuery(this).find('enclosure').eq(0).attr('url');
        csFeedItems.push(item);
    });
    csPageCount = Math.ceil(csFeedItems.length / csItemsPerPage);
     
    id = csContainer.attr("id");
    /* Empty the container div */
    csContainer.empty();
    
    /* Create Wrapper and Slider */
    cellStreamWrapper = document.createElement('div');
    $(cellStreamWrapper).attr("id", "cellStreamWrapper");
	
	/* creating the top View all link */	
	var linkWrap = document.createElement('div');
	$(linkWrap).attr("id","cslinkWrap");
	$(linkWrap).attr("class","cslinkWrap");
    $(linkWrap).append('<a href="/photo/category/cellstream/" id="csViewAll" class="csViewAll">'+ csViewAllText +'</a>');
	$(cellStreamWrapper).append(linkWrap);
	
	/* creating the top previous next buttons */
    var buttonWrap = document.createElement('div');
	$(buttonWrap).attr("id","csButtonWrap");
	$(buttonWrap).attr("class","csButtonWrap");
    
    $(buttonWrap).append('<a href="javascript:void(0);" onClick="showCSNextPage()" id="csNext1" class="csNext"><span></span></a>');
	$(buttonWrap).append('<a href="javascript:void(0);" onClick="showCSPrevPage()" id="csPrevious1" class="csPreviousDisabled"><span></span></a>');
    $(buttonWrap).append('<span class="clear"/>');
	$(cellStreamWrapper).append(buttonWrap);
	
    cellStreamElement = document.createElement('div');
    $(cellStreamElement).attr("id", "cellStreamSlider");
    csCurrentPageElement = document.createElement('div');
    $(csCurrentPageElement).attr("id", "csPage0");
    $(csCurrentPageElement).attr("class", "csPage");
    $(cellStreamElement).append(csCurrentPageElement)
    $(cellStreamWrapper).append(cellStreamElement);
    csContainer.append(cellStreamWrapper);
	csContainer.parent(".body").siblings(".head").append(linkWrap);
    csContainer.parent(".body").siblings(".head").append(buttonWrap);
	
	/* Creating the bottom previous next buttons*/
    buttonWrapBot = document.createElement('div');
	$(buttonWrapBot).attr("id","csButtonWrapBot");
	$(buttonWrapBot).attr("class","csButtonWrap");
    
    $(buttonWrapBot).append('<a href="javascript:void(0);" onClick="showCSNextPage()" id="csNext2" class="csNext"><span></span></a>');
	$(buttonWrapBot).append('<a href="javascript:void(0);" onClick="showCSPrevPage()" id="csPrevious2" class="csPreviousDisabled"><span></span></a>');
    $(buttonWrapBot).append('<span class="clear"/>');
	$(cellStreamWrapper).append(buttonWrapBot);
	
	/* creating the bottom View all link */
	var linkWrapBot = document.createElement('div');
	$(linkWrapBot).attr("id","cslinkWrapBot");
	$(linkWrapBot).attr("class","cslinkWrap");
    
    $(linkWrapBot).append('<a href="/photo/category/cellstream/" id="csViewAllBot" class="csViewAll">' + csViewAllText + '</a>');
	$(cellStreamWrapper).append(linkWrapBot);



    showCSNextPage();  
	
	/*
	$(buttonWrap).append('<span class="clear"/>');
	$(div).append(buttonWrap);
	*/
    
}

function showCSPrevPage(){
    if (csPageNumber > 1) {
        csPageNumber--;
        _showCellstreamPage();
        $('#csNext1').removeClass('csNextDisabled');
        $('#csNext1').addClass('csNext');
        $('#csNext2').removeClass('csNextDisabled');
        $('#csNext2').addClass('csNext');
    }
    if (csPageNumber <= 1) {
        $('#csPrevious1').removeClass('csPrevious');
        $('#csPrevious1').addClass('csPreviousDisabled');
       	$('#csPrevious2').removeClass('csPrevious');
        $('#csPrevious2').addClass('csPreviousDisabled');
    }
}

function showCSNextPage(){

    if (csPageNumber < csPageCount) {
        csPageNumber++;
        _showCellstreamPage();
        if(csPageNumber > 1) {
        	$('#csPrevious1').removeClass('csPreviousDisabled');
        	$('#csPrevious1').addClass('csPrevious');
        	$('#csPrevious2').removeClass('csPreviousDisabled');
        	$('#csPrevious2').addClass('csPrevious');        	
        }
    }
    if (csPageNumber >= csPageCount) {
        $('#csNext1').removeClass('csNext');
        $('#csNext1').addClass('csNextDisabled');
        $('#csNext2').removeClass('csNext');
        $('#csNext2').addClass('csNextDisabled');        
    }
}

function _showCellstreamPage(){

    var start = csItemsPerPage * (csPageNumber - 1);
    var end = csItemsPerPage * csPageNumber;
	var description;
    $(csCurrentPageElement).empty();
  	
    for (var d = start; d < csFeedItems.length && d < end; d++) {
        var e = '<li class="article">';
        var f = csFeedItems[d];
        author = f.author;
        date = f.updated;
        text = f.title;
        description = f.description;
        imageURL = f.url;
        link = f.link;
        
	if(link.match(/.*\/\/.*\/video\/.*/)) {
		type = "video";
	} else {
		type = "image";
        }
        
        /* Generate the cell element using the data and add to Cellstream Slider */
        nodeHtml = generateCellStreamCell(type, imageURL, text, author, date, link, d % csItemsPerPage);
        $(csCurrentPageElement).append(nodeHtml);
    }  
    
    $(csCurrentPageElement).fadeIn();
    registerHover();
    
}

/* Generate the HTML content required for the individual cells */

function generateCellStreamCell(type, imageURL, text, author, date, link, position){

    var cellElement = document.createElement('div');
    var contentElement = document.createElement('div');
    $(contentElement).attr("class", "csContent");
	/* Add Video Play button in case of video files */
	if (type == "video"){
		$(contentElement).append('<div id="csPlay' + position + '" class="csVideoPlayButton">' + '<a class="csPlayLink" href="' + link + '">' + '</a>' + '</div>');
	}
    /* Add the image if available */
    if (imageURL != "") {
        $(contentElement).append('<div class="' + type + '"><a href="' + link + '"><img src="' + imageURL + '"/></a></div>');
        $(contentElement).addClass('imageVideo');
    }
    
    /* Handle Text only case */
    if (imageURL == "") {
        $(contentElement).append('<div class="fullText">' + text + '</div>');
    }
    else {
        $(contentElement).append('<div class="text">' + text + '</div>');
    }
    
    
    /* Create the Wrapper */
    var wrapperElement = document.createElement('div');
    $(wrapperElement).attr("class", "csWrapper");
    $(wrapperElement).append('<div class="timestamp">' + date.fixCellstreamDate() + '</div>');
    $(wrapperElement).append('<div class="user">' + author + '</div>');
    $(wrapperElement).append('<div class="clear"></div>');
    
    /* Adding all of them to the cell element */
    $(cellElement).attr("id", "csCell" + position);
    $(cellElement).attr("class", "csCell");
    $(cellElement).addClass("csCell" + position);
    $(cellElement).append(contentElement);
    $(cellElement).append(wrapperElement);
    
    return cellElement;
    
}


/* Convert the timestamp to text format */
String.prototype.fixCellstreamDate = function(){

    var dateArray = jQuery.trim(this).split(" ");
    var dateString;
    
    var remoteOffset = 0;
    
    if (parseInt(dateArray[1], 10) > 0) {
        dateString = ""+dateArray[2] + " " + dateArray[1] + ", " + dateArray[3] + " " + dateArray[4];
        
        try {
	  remoteOffset = parseInt(dateArray[5], 10)/100;
	} catch(err) {
	  //ignore
  	}
       
    }
    else {
        dateString = dateArray[1] + " " + dateArray[2] + ", " + dateArray[5] + " " + dateArray[3];
    }    
    
var mobileTime = Date.parse(dateString);

var mobileDateObj = new Date(mobileTime);

var currDate = new Date();

var offset = parseInt(currDate.getTime() - mobileTime) / 1000;
offset = offset + (currDate.getTimezoneOffset() + remoteOffset * 60) * 60;
    
    /*display full timestamp if posted Date is in the future or more than 10 days ago*/
    if (offset < 0 || offset > 10 * 24 * 60 * 60) {

        return (1 + mobileDateObj.getMonth()) + '/' + mobileDateObj.getDate() + '/' + (mobileDateObj.getUTCFullYear())
    }
    
    //display mins if less then an hour ago
    if (offset < 60 * 60) {
        mins = Math.round(offset / (60));
        return mins + ' min' + (mins > 1 ? 's' : '') + ' ago';
    }
    
    //display hours if less than a day ago
    if (offset < 24 * 60 * 60) {
        hrs = Math.round(offset / (60 * 60));
        return hrs + ' hr' + (hrs > 1 ? 's' : '') + ' ago';
    }

    //display days
    days = Math.round(offset / (24 * 60 * 60));
    return days + ' day' + (days > 1 ? 's' : '') + ' ago';
}


/* Register hovering effect on the images and videos */
function registerHover(){
    $('#cellStreamSlider .csCell').hover(function(){ //mouseover
        if (!$('#cellStreamSlider .csCell').hasClass('active')) {
            
            className = $(this).attr("class");
            index = className.substring(13);
            if($('#csPlay' + index)) {
            	$('#csPlay' + index).hide();
            }
            $(this).animate({			
				width: csActiveWidth + "px",
                height: csActiveHeight + "px",
                top: csActiveTopCoor[index] + 'px',
                left: csActiveLeftCoor + 'px'
            }, 200, 'swing');
            
            $(this).addClass('active');
            if($('#csPlay' + index)) {
            	$('#csPlay' + index).fadeIn();
            }
        }
    }, function(){ //mouseout
        $(this).stop();
   	className = $(this).attr("class");
   	index = className.substring(13);
   	$('#csPlay' + index).hide();
        
        $(this).removeClass('active');
        resetActiveToNormal($(this));
        
        $('#csPlay' + index).fadeIn();
    })
}

function resetActiveToNormal(cell){
    className = cell.attr("class");
    index = className.substring(13);
    cell.css({
        width: csNormalWidth + 'px',
        height: csNormalHeight + 'px',
        top: csNormalTopCoor[index] + 'px',
        left: csNormalLeftCoor + 'px'
    });    
}


function parseFeed(xml){
    if( window.ActiveXObject && window.GetObject ) {
        var dom = new ActiveXObject( 'Microsoft.XMLDOM' );
        dom.async="false";
        dom.loadXML( xml );
        return dom;
    }
    if( window.DOMParser ) {
        return new DOMParser().parseFromString( xml, 'text/xml' );
    }
       
    throw new Error( 'No XML parser available' );
}