var map;
var photos = [];
var tweets = [];
var infoWindow;
var marker;
var displayCount = 0;
var footer = "<div id='footer'><img src='img/thanks.png'><iframe id='a4e1f03e' name='a4e1f03e' src='http://sponsors.kcrw.com/delivery/afr.php?zoneid=1&amp;source=kcrw-worldwide&amp;target=_blank&amp;cb=[timestamp]' framespacing='0' frameborder='no' scrolling='no' width='88' height='31'><a href='http://sponsors.kcrw.com/delivery/ck.php?n=a9d33425&amp;cb=[timestamp]' target='_blank'><img src='http://sponsors.kcrw.com/delivery/avw.php?zoneid=1&amp;source=kcrw-worldwide&amp;cb=[timestamp]&amp;n=a9d33425' border='0' alt='' /></a></iframe></div>";
var largeImageWidth;
var largeImageHeight;
var flickroverlay = false;
var myusername;
var mytitle;
var mydescription;
var mygeotagged;
var mylocation;
jQuery.noConflict();
jQuery.fn.image = function(src, f){
  return this.each(function(){
    var i = new Image();
    i.src = src;
    i.onload = f;
    this.appendChild(i);
  });
}

function updateFooter() {

}

function showWindow(lat, lon) {
  updateFooter();
	if (marker) {
		map.removeOverlay(marker);
	}
	var baseIcon = new GIcon();
	baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.iconSize = new GSize(19, 27);
	baseIcon.shadowSize = new GSize(0, 0);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
	baseIcon.infoShadowAnchor = new GPoint(18, 25);
	var customIcon = new GIcon(baseIcon);
	customIcon.image = "http://newmedia.kcrw.com/worldwide/img/marker.png";
	markerOptions = { icon:customIcon };

	marker = new GMarker(new GLatLng(lat,lon), markerOptions);
	map.addOverlay(marker);
	marker.openInfoWindow(infoWindow);

}

function wheelZoom(a) { (a.detail || -a.wheelDelta) < 0 ? map.zoomIn() : map.zoomOut(); }

function sizeMap() {

  map = new GMap2(document.getElementById("map"));
	map.setCenter(new GLatLng(39,-76), 3);
	map.addControl(new GSmallMapControl());
	positionOverlay();

}

function positionOverlay () {
  // Get browser size
	var w=GetWindowWidthHeight().width;
	var h=GetWindowWidthHeight().height;

	// Minimum size
	if (w <= '984')	{ w = '984'; }

	center_w=w/2;
  jQuery.noConflict();
	jQuery('#header').css('width', w);
	jQuery('#map').css({top: '0', left: '0', width: w, height:h});
	jQuery('#kcrwFlickr').css({left: center_w-155, top: 10, height:20});
	jQuery('#copyright').css({top: h-45, width: w, height:33});
	jQuery('#login').css({left: center_w-200, top: 45});
	jQuery('#help').css({left: center_w-200, top: 45});
	jQuery('#join').css({left: center_w-200, top: 45});
	jQuery('#tellafriend').css({left: center_w-200, top: 45});
	jQuery('#textBox').css({left: center_w-200, top: 45});
	jQuery('#copyright .content').css({left: center_w-178-40, position:'absolute'});

	largeImageWidth = jQuery('#flickroverlay img').width();
  largeImageHeight = jQuery('#flickroverlay img').height();

  jQuery('#flickroverlay').css({left: center_w-largeImageWidth/2-40, top:60});
  jQuery('#flickroverlay span.flickrcaption').css('width', largeImageWidth+60);

}

// Get size map
function GetWindowWidthHeight () {
	var myWidth = 0, myHeight = 0;
	if(typeof(window.innerWidth) == 'number') {
		myWidth = window.innerWidth;
		myHeight = window.innerHeight - 114;
	} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight - 114;
	} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight - 114;
	}
	return {'width' : myWidth, 'height' : myHeight};
}


function addPhotos(transport) {
	var newPhotos = eval('(' + transport.responseText + ')');
	photos = photos.concat(newPhotos);
	photos = photos.findAll(checkPhotoAge);
	// Start display chain after photos are loaded
	if (displayCount==0)
	    showItem();
}

function addTweets(transport) {
	var newTweets = eval('(' + transport.responseText + ')');
	//tweets = tweets.concat(newTweets.followers);
	//tweets = tweets.concat(newTweets.following);
	tweets = tweets.concat(newTweets);
	tweets = tweets.findAll(checkTweetAge);
}

function checkTweetAge(tweet){
    var days = 700;
    var d = new Date();
    return ((d.getTime()/1000) - (Date.parse(tweet.last_status.created_at).getTime()/1000)) <= (86400*days);
}

function checkPhotoAge(photo){
    var days = 700;
    var d = new Date();
    return ((d.getTime()/1000) - (Date.parse(photo.info.created_at).getTime()/1000)) <= (86400*days);
}

// Replenish any data sources that need to be refreshed
var isLoadingDataF = false;
var isLoadingDataT = false;
function loadData() {
	if (photos.length < 3 && !isLoadingDataF) {
		isLoadingDataF = true;
		setTimeout("clearLoadingDataF()", 30000);
		new Ajax.Request('feed.php?type=json&cat=flickr',
			{ method : 'get',
				onSuccess : addPhotos
			});
	}

	if (tweets.length < 3 && !isLoadingDataT) {
		isLoadingDataT = true;
		setTimeout("clearLoadingDataT()", 30000);
		new Ajax.Request('feed.php?type=json&cat=twitter',
			{ method : 'get',
				onSuccess : addTweets
			});
	}
}
function clearLoadingDataF() {
	isLoadingDataF = false;
}
function clearLoadingDataT() {
	isLoadingDataT = false;
}

var s = false;
var c = 2;
function updateStats () {
  if (s && c%3==0) {
    jQuery('#kcrwFlickr').html(photos.length+" recent flickr photos");
    s = false;
  } else {
    jQuery('#kcrwFlickr').html(tweets.length+" recent tweets");
    s = true;
  }
  c++;
}

function showPhoto() {
        var p = photos.pop();
	if (p && typeof(p.info) != "undefined") {
	  jQuery.noConflict();
	  myusername = p.info.username;
	  mytitle = p.info.title;
	  mydescription = p.info.description;
	  mygeotagged = p.info.geotagged;
	  mylocation = p.info.location_name;
		jQuery('#preload').html("<img src=" + p.info.small_url + ">");
    jQuery("#preloader").image(p.info.small_url, function(){
      var iwidth = jQuery('#preload img').width();
  		var iheight = jQuery('#preload img').height();
  		if (iheight>700) {
  		  iwidth = iwidth/iheight * 700;
  		  iheight = 700;
  		};
  		map.closeInfoWindow();
  		var date = Date.parse(p.info.created_at)+" ";
  		date = date.substr(0, 24);
        date = dateToSinceNow(Date.parse(p.info.created_at)) + ' ago';
        if(date == ' ago') date = '';
  		infoWindow.innerHTML = "<b>"+p.user.username+"</b><br /><br /><a href='#' onmouseover='showLargeFlickr();'><IMG SRC=" + p.info.small_url + " width="+iwidth+" height="+iheight+"></a><br /><br />"+"<span style='color:#555;font-size:.9em;'>"+date+"</span>"+footer;

  		jQuery("#flickroverlay").html('').image(p.info.large_url, function(){
  		  var start = false;
  		  var mycaption = ""
  		  mycaption += "<span class='flickrcaption'>";
  		  if(myusername) {
  		    mycaption += "<span style='color:#AAAEE;'>"+myusername+"</span>";
  		    start = true;
  		  }
  		  if(mytitle) {
  		    if (start) {
  		      mycaption += "<br />";
  		    } else {
  		      start = true;
  		    }
  		    mycaption += mytitle;
  		  }
  		  if(mydescription) {
  		    if (start) {
  		      mycaption += "<br />";
  		    } else {
  		      start = true;
  		    }
  		    mycaption += "<span style='font-size:.9em;'>"+mydescription+"</span>";
		    }
        if(mygeotagged) {
          if (start) {
  		      mycaption += "<br />";
  		    } else {
  		      start = true;
  		    }
          mycaption += "<span style='font-size:.8em;'>"+mylocation+"</span>";
        }
  		  mycaption += "</span>";

  		  jQuery("#flickroverlay").append(mycaption);

        largeImageHeight = jQuery('#flickroverlay img').height();
  		  largeImageWidth = jQuery('#flickroverlay img').width();

  		  positionOverlay();
  		});
		if (p.location.latitude == 0  && p.location.longitude == 0) {
		    showWindow(34.052187, -118.243425);
		} else {
		    showWindow(p.location.latitude, p.location.longitude);
		}
  		displayCount++;
    });
    updateStats();
	}
	positionOverlay();
}

function showLargeFlickr () {
  jQuery("#flickroverlay").fadeIn('slow');
  largeImageWidth = jQuery('#flickroverlay img').width();
  largeImageHeight = jQuery('#flickroverlay img').height();
  jQuery('#flickroverlay span.flickrcaption').css('width', largeImageWidth+60);
  jQuery('#flickroverlay').css({left: center_w-largeImageWidth/2-50, top:60});

}

function showTweet() {
        var t = tweets.pop();
	if (t && typeof(t.last_status) != "undefined") {
	    jQuery.noConflict();
	    var text = t.last_status.text.replace('&apos;','&#039;'); 
	    jQuery('#preload').html(text);
	    map.closeInfoWindow();
	    var date = Date.parse(t.last_status.created_at)+" ";
	    date = date.substr(0, 24);
	    var since = dateToSinceNow(Date.parse(t.last_status.created_at)) + ' ago';
	    if(since == ' ago') since = '';
	    infoWindow.innerHTML = "<b>" +t.screen_name +"</b><br /><br /><span>" + text + '</span><br /><br /><span style="color:#555;font-size:.9em;">' + since + "</span>" + footer;
	    // some tweets missing location property (?)
	    if(!t.location){
		showWindow(34.052187, -118.243425);
	    } else {
		showWindow(t.location.latitude, t.location.longitude);
	    }
	    displayCount++;
	    updateStats();
	}
}

/**
 * start new date since methods
 */
function dateToSinceNow(objDate){
  var c,i=0;
  var now = new Date();
  var since = $A();
  var seconds = (now.getTime() - objDate.getTime())/1000;
  var elapsed=$H();
  var periods = ['year','month','day','hour','minute'];
  var intervals = $H({
   year:31536000, month:2592000, day:86400,
   hour:3600, minute:60, second: 1});
  for(c=0,i=0;i<periods.size();i++,c=0){
   if(seconds >= intervals.get(periods[i])){
    while(seconds>=intervals.get(periods[i])){
     seconds -= intervals.get(periods[i]);
     c++;
    }
    elapsed.set(periods[i], c);
    since.push(c + ' ' + periods[i] + (c!=1?'s':''));
   }
  }
  return since.join(', ');
}

/**
 * end new date since methods.
 */


function showItem() {
	loadData();
	updateStats();
	if (isEven(displayCount))
		showPhoto();
	else
		showTweet();
	setTimeout("showItem()", 7000);
}

function isEven(num) {
  return !(num % 2);
}

function getImageWidth(myImage) {
	var x, obj;
	if (document.layers) {
		var img = getImage(myImage);
		return img.width;
	} else {
		return getElementWidth(myImage);
	}
	return -1;
}

function getImageHeight(myImage) {
	var y, obj;
	if (document.layers) {
		var img = getImage(myImage);
		return img.height;
	} else {
		return getElementHeight(myImage);
	}
	return -1;
}

function doTVLogin(form){
    $('loginStatus').update('&nbsp;').up().hide();
    var opts = {
        method: 'POST',
        onSuccess: function(o){
            if(o.getHeader('X-Login-Status') == 'success'){
                var t = eval('(' + o.responseText + ')');
                tweets.push(t);
                Hide('login');
            } else {
                $('loginStatus').update(o.responseText).up().show();
            }
        },
        onFailure: function(o){
            $('loginStatus').update(o.responseStatus).up().show();
        },
        parameters: $(form).serialize()
    };
    new Ajax.Request('/worldwide/login.php', opts);
    return false;
}


window.onresize = sizeMap;

window.onload = function() {

  if (GBrowserIsCompatible()) {
	  GEvent.addDomListener(document.getElementById('map'), "DOMMouseScroll", wheelZoom);
	  GEvent.addDomListener(document.getElementById('map'), "mousewheel", wheelZoom);
		// You can use this to display a splash graphic, as is used on Twittervision/Flickrvision
	  //setTimeout("new Effect.Fade('splash')", 3500);
		sizeMap();

		// Initialize infoWindow div
		infoWindow = document.createElement("div");
		infoWindow.setAttribute("id", "infoWindow");
		infoWindow.innerHTML = "Hello World!<br>Style me with CSS!";

		loadData();
  } else {
    alert("Sorry, your browser isn't compatible with Twittervision!")
  }
}

// Read data.txt
jQuery.noConflict();
jQuery(document).ready(function() {

  jQuery("#flickroverlay").click(function() {
    jQuery("#flickroverlay").fadeOut('slow');
  });

  positionOverlay();
	jQuery(".png").ifixpng();
	jQuery("#whereKCRW").load("data.txt");
});

// Show popup
function Show(ID){
jQuery(".boxPopup").hide();
 jQuery("#"+ID+"").show();
}

// Hide popup
function Hide(ID){
 jQuery("#"+ID+"").hide();
}