CAMP/padmaEssay
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

removed some unneeded files from tree

Browse Source
This commit is contained in:
sanj 2010-11-23 17:44:24 +01:00
parent c1987a2cd6
commit cf29a2561a
6 changed files with 141 additions and 517 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
jquery.color.js
View File

@ -1 +0,0 @@
(function(d){d.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","color","outlineColor"],function(f,e){d.fx.step[e]=function(g){if(g.state==0){g.start=c(g.elem,e);g.end=b(g.end)}g.elem.style[e]="rgb("+[Math.max(Math.min(parseInt((g.pos*(g.end[0]-g.start[0]))+g.start[0]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[1]-g.start[1]))+g.start[1]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[2]-g.start[2]))+g.start[2]),255),0)].join(",")+")"}});function b(f){var e;if(f&&f.constructor==Array&&f.length==3){return f}if(e=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)){return[parseInt(e[1]),parseInt(e[2]),parseInt(e[3])]}if(e=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)){return[parseFloat(e[1])*2.55,parseFloat(e[2])*2.55,parseFloat(e[3])*2.55]}if(e=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}if(e=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)]}if(e=/rgba\(0, 0, 0, 0\)/.exec(f)){return a.transparent}return a[d.trim(f).toLowerCase()]}function c(g,e){var f;do{f=d.curCSS(g,e);if(f!=""&&f!="transparent"||d.nodeName(g,"body")){break}e="backgroundColor"}while(g=g.parentNode);return b(f)}var a={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]}})(jQuery);

24
jquery.padma.js
View File

@ -1,24 +0,0 @@
(function($) {
$.fn.padma = function(opts) {
this.each(function() {
var that = this;
var o = $.extend({
'container': $('.padmaInfo'),
'tmpl': $('#padma_tmpl').html(),
'padmaUrl': that.attr("href"),
'no_of_images': 4,
'poster_size': 128,
'video_size': 128,
'timeline': true,
'on': 'hover'
}, opts);
if (typeof(o.container) == 'function') {
var container = o.container(that);
} else {
var container = o.container;
}
});
};
})(jQuery);

23
padma.tooltip.js
View File

@ -1,23 +0,0 @@
(function($) {
var PADMA_URL = "http://pad.ma/";
$(function() {
$("a").each(function() {
var that = this;
$(this).attr("target", "_blank");
var link = $(this).attr("href");
if (link.indexOf(PADMA_URL) != -1) {
var linkData = parsePadmaUrl(link, PADMA_URL);
if (linkData) {
// console.log(linkData);
var v = new padmaVideo(linkData.videoId);
v.getAllData(setupPadmaLink, {'linkData': linkData, 'jq': that});
// v.getVideoData(setupSidenotes, {'linkData': linkData, 'jq': that});
// getPadmaData(linkData, that, {});
}
}
});
});
// D = parsePadmaUrl;
})(jQuery);

233
taha.html
View File

@ -1,233 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.padmaWrapper {
width: 80%;
position: relative;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 10%;
border: 1px solid #333;
background: #000;
padding: 4px;
}
.closeButton {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
color: #fff;
}
.closeButton:hover {
color: red;
}
.annotation {
position: absolute;
left: 450px;
top: 20px;
height: 220px;
width: 400px;
overflow-y: auto;
color: white;
}
#essay {
width: 80%;
}
#padmaSidebar {
width: 20%;
position: absolute;
top: 0px;
right: 0px;
background: #666;
bottom: 0px;
}
#padmaSidebarRelative {
position: relative;
}
.padmaThumb {
position: absolute;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="padma.layers.js"></script>
<script type="text/javascript" src="padma.tooltip.js"></script>
<script type="text/javascript" src="taha.js"></script>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
<script type="text/html" id="tmpl_tcRange">
<div class="padmaWrapper">
<!-- <img src="<%= video.getFrame(linkData.tcIn) %>" /> -->
<video width="400" src="<%= video.getLayerVideo(linkData.tcIn, linkData.tcOut) %>" controls="controls"></video>
<!-- <img src="<%= video.getFrame(linkData.tcOut) %>" /> -->
<div class="annotation">
Transcripts / annotations will appear here.
</div>
<div class="closeButton">x</div>
</div>
</script>
<script type="text/html" id="tmpl_layers">
<div class="layersWrapper">
<% for (var i=0; i<layers.length; i++) { var layer = layers[i]; %>
<div class="layerWrapper">
<div class="layerTrack"><%= layer.track %></div>
<div class="layerText"><%= layer.value_html %></div>
</div>
<% } %>
</div>
</script>
<div id="wrapper">
<!--
<div id="padmaSidebar">
<div id="padmaSidebarRelative"></div>
</div>
-->
<h1>
Lorem Ipsum
</h1>
<div id="essay">
<div class="para">
<h2>
1.
</h2>
<p>
At 11:00 am on Saturday June 15th 1996 3000 kilograms of explosives was detonated at the heart of city centre in Manchester. The explosives were placed in a van stationed by the side of a nearby street. The impact of explosion left around three hundred people injured. No one died. It is claimed that over a million square feet of office and retail space was destroyed. 1200 buildings in the vicinity were affected. Seven hundred businesses had to be relocated. The explosion made more than two third retail capacity of the city centre, redundant. The explosives, as we all know, were planted by the IRA. (For a visual record of the moment of bombing please see: <a href="http://pad.ma/Vejbxsg7/00:18:01.000-00:18:43.000">http://pad.ma/Vejbxsg7/00:18:01.000-00:18:43.000</a> )
</p>
</div>
<div class="para">
<h2>
2.
</h2>
<p>
If on the one hand the bomb explosion at city centre of Manchester, wrecked the social, entrepreneurial, symbolic and spatial heart of the city, then on the other it helped build planners to think about Manchester in a new narrative of space and society.
A new idea of city centre at Manchester was articulated by the policy makers who worked together with key actors from local community and business enterprises. This idea was expressed through an overarching trope of regeneration. Erstwhile urban environments were to be regenerated as safe environments. Urban space was to be viewed as emancipatory, entrepreneurial, and orderly and a renaissance space instead of merely a space, for people to work, live and die. Issues of urban fear and insecurity were tackled through a narrative of risk and confidence rather than through a traditional phantasm of reflexive policing. It was in this regard that the technology and politics behind close circuit cameras came to play a crucial role in changing the nature of space and society around urban spaces.
</p>
</div>
<div class="para">
<h2>
3.
</h2>
<p>
The parcel of land on which the present day Manchester city is constructed was once part of bigger territory which used to come under the jurisdiction of a Roman fort of Mamucium. Mamucium was a garrison fort. Goods and commodities for the consumption for the Roman troops stationed inside the fort were supplied by local communities. A civilian vicus therefore grew nearby, to cater to the requirements of Mamucium, which we now know as the Manchester city centre.
</p>
<p>
Ever since then much of the industrial and trade related activity of the surrounding region used to take place on this space. Over centuries this space evolved into a vibrant trading centre. By the end of 19th Century the city centre was made up of two covered markets. One was called the Smithfield Market whilst the other went by the name of Market place. These markets were open daily and were particularly known for the sale of fresh meat, fish, potatoes, turnips, and cattle. We could imagine a bazaar like vibrancy to the place, where everything from people to goods would have spilled out on the street. In this atmosphere shopkeepers must have exercised a certain type of social surveillance which involves keeping an eye on ones good and on other people manning it. Just like workers in a factory are watched over by a supervisor.
</p>
<p>
The IRA bombing was not the first time when city centre was destroyed. The first time when the city centre was raised to ground was during the Manchester Blitz of WWII. German Luftwaffe raided the city in December 1940. Almost five hundred tons of high explosives coupled with two thousand incendiary bombs were showered on the city killing close to seven hundred people and injuring many others. (For a 'Unique Photographic record of damage sustained by Manchester City centre on the nights of December 22 and 23rd 1940' please see here: <a href="http://www.youtube.com/watch?v=AQ0xrje7YY4&feature=player_embedded#!">http://www.youtube.com/watch?v=AQ0xrje7YY4&feature=player_embedded#!</a> )
</p>
<p>
Post WWII, the city centre was rebuilt just like rest of Manchester and other major urban centres all over England. From the point of view of spatial policy Manchester city centre have evolved more rapidly in the past seventy years than in say, past two hundred. At each stage of its evolution it has reflected dominant themes of contemporary spatial policy.
</p>
</div>
<div class="para">
<h2>
4.
</h2>
<p>
In the fifties, The City of Manchester Plan (1945) was executed. This plan reflected the spatial policy of reconstruction which resulted in a movement of mass housing away from the city centre. The big idea back then, was to create spaces dedicated to retail and offices. The Nicholson Plan (1945) played a key role in envisioning the redesigning of city centre. The scheme was that the 'old grimy, out of date irrational buildings of the Victorian era be swept away, to be replaced with bold, new buildings of the twentieth century'. City centre was imagined as an island of trade amidst a sea of housing.
</p><p>
If on the one hand Sixties was a decade of retail decentralization in Britain. The policy thrust on the other hand was more on revitalization of existing retail areas. In 1964 a planning application to construct a regional shopping arcade, which was bigger than the existing city centre, was therefore rejected to protect the city centre from going into oblivion. Subsequently in 1967 a plan called the City centre map was considered which focussed on extensive transport proposals and promotion trade related activities. This development led to a weakening of the power of local authority however in-situ developments carried on in the next decade during the urban renewal programs of the seventies.
</p><p>
Eighties was the decade of Thatcherite led urban policies. By then, the rhetoric of redevelopment was in focus. The urban policies from 1960's onwards were gradually allowed to fade into irrelevance. It was also the time when great regional planning initiatives of the 1970's were scaled down to the local level. A new plan called the City centre Local Plan was introduced in 1984 which had a major impact on land use in and around the city centre. Integrated public transport, mixed land use, commercial balance, residential development, active-street frontages were some of the key features of this plan. The idea was to share. Public and private players were encouraged to come together.
</p><p>
When the IRA bombed city centre in 1996 the spatial planning in the UK had shifted to a 'new' theme called regeneration where public-private partnership had became the dominant approach. Under this scheme local authorities re-emerged as a key player in decision making process. Strategic long term perspective was reintroduced with an overall emphasis on regional growth. During the nineties the city centre at Manchester was developed to cater to a wider region covering councils of Manchester, Salford and Trafford and development corporations of Manchester and Trafford Park. The proposal was to situate major regional functions of government, banking and professional services together with a clustering of retailing, arts, entertainment and higher education services. All this was however buried in institutional quagmire as key actors belonging to various governmental departments were reluctant to relegate their areas of control. Things changed substantially after the bombings. Manchester City pride was introduced as a policy initiative to restructure Manchester economically, spatially, culturally and locally.
</p>
</div>
<div class="para">
<h2>
5.
</h2>
<p>
The idea for the planning guideline, Manchester City pride came out from two strategic documents called the City's Development Guide (1996) and the Planning Guidance of the Bomb Damaged Area (1996). Whilst the City Pride focussed more on entrepreneurial aspect, the two other guidelines covered the broad developmental aspects of planning for the region. It is in City Development Guide of 1996 that we perhaps get a sense of things to come. The idea, of developing a city centre which installs a sense of place, has a high quality of design, has an equitable mix of density has a space which could have mixed use and which address all security concerns, was mooted. The broad vision seemed to make Manchester into in an attractive place to study, work, live in and visit (<a href="http://pad.ma/Vha3qgya/00:00:00.000-00:00:44.840">http://pad.ma/Vha3qgya/00:00:00.000-00:00:44.840</a> ). The City centre Environmental Protection Strategy (1994) was instrumental in implementation of a central area CCTV strategy to 'strengthen aspects of community safety and of emerging public concerns'.
</p><p>
In other words one could argue that in the last seventy years the Manchester city centre grew from a being merely a place for conducting economic transactions to something where transaction of goods, commodities, services and culture became an integral aspect of the whole set up. The council which was in charge of the city centre in the early post war period had to relinquish some of its control during the decade of seventies and eighties but after the bombing, it re-emerges as a key player as a local decision maker.
</p>
</div>
<div class="para">
<h2>
6.
</h2>
<p>
During the dying years of the eighties and early nineties, prior to the bombing, a new rhetoric of 'Safe Cities Program' to police urban spaces was slowly emerging. A policy initiative comprising of twelve different programs collectively called, Action for Cities was launched in 1988. Spatial policy of the immediate post war era had pushed populations away from the city centres, this trend reversed in the eighties as people slowly started to settle in the newly developed residential spaces around city centres ( <a href="http://pad.ma/Vu5o965c/00:02:51.000-00:03:54.280"> http://pad.ma/Vu5o965c/00:02:51.000-00:03:54.280 </a> ). It was around this time that UK published a landmark circular called, 'Crime Prevention' (1984). The core argument discussed in this document was that to maintain a perpetual public peace policing needs to be 'proactive' rather than just being 'reactive', the stress was to involve an entire local community in policing. The broad idea of Safe Cities Program was to, 'reduce crime, to lessen fear of crime, and to create safer cities where economic enterprise and community life can flourish'. In other words with changing times, the institution of the state was re-creating conditions where institutions of the market can function without an excessive fear of crime. We could assume that an institutional tilt towards installing CCTV in virtually all public spaces in the UK has evolved with the Safe Cities program but policy surely was not the only thing which was driving this tilt.
</p>
</div>
<div class="para">
<h2>
7.
</h2>
<p>
Whilst there is no evidence available anywhere which could comprehensively suggest a correlationship between the presence of CCTV and downfall in criminal activities, something which could have a universal application, yet, CCTV technology seems to be favoured especially in so far as policy related urban geography literature dealing with notions of social risk, security and safety.
</p><p>
This seems a bit strange. Why do governments/corporations tend to prefer projecting CCTV cameras as a deterrent for social crimes when there is no data to support its curative claims? What about displacement of criminal activities to those areas where there are no CCTV's? We still do not know whether CCTV displaces crime or reduces it.
</p>
</div>
<div class="para">
<h2>
8.
</h2>
<p>
CCTV monitors and record visual data about people which could be archived, retrieved and analysed for purposes unbeknownst to those whose images are captured. Some people argue that presence of CCTV leads to internalization of certain behavioural norms. Disciplining of the body is perhaps one aspect of a response which the gaze of CCTV produces. Others contend that the 'watched' may also 'watch' which may lead to a complex network of interplay between the people and technology, resulting in production of ambivalent emotional responses. (<a href="http://pad.ma/Vfx9rui4/00:05:04.000-00:06:13.000">http://pad.ma/Vfx9rui4/00:05:04.000-00:06:13.000</a> )
</p><p>
If crime prevention professionals looking at CCTV monitors are supposed to be trained to sort 'suspicious' behaviour out and inform authorities on ground, then, it must also be taken into consideration that perhaps professional criminals who intend to commit a crime, are perhaps all too aware of the presence of a gaze of CCTV camera. Under this gaze, the moment of visibility, of a person entering a space with an intention to commit a crime may become ambivalent, as one does not know whether CCTV is preventing crime or aiding it. It could be argued that CCTV provides an illusion of safety which adds a feel good factor to a projected narrative of 'community safety'.
</p><p>
CCTV is often considered as a panoptic dream. An optical-mechanical technique for giving direction to predetermined social, spatial and economic processes. Topography of a space gets altered when it's under the gaze of a network of CCTV cameras. It gets more hierarchical. The horizontal and vertical screens perhaps signify new geographies.
</p><p>
A certain degree of technological determinism comes into play when people critique CCTV as some kind of an instrument to sort people out. Sorting takes place either through categorical seduction or through categorical suspicion. In City centres, malls and places of consumption, CCTV may be used to sort out genuine consumers from fake ones. Such a view may lead one to debate about the primacy of rights of citizens over those of consumers. (<a href="http://pad.ma/Veej57vg/00:05:49.119-00:06:33.399">http://pad.ma/Veej57vg/00:05:49.119-00:06:33.399</a> ) A clash of ideals enshrined in a democratic setup versus market led capitalism may ensue. Arguments related to politics of access to a space as opposed to rights of access may spring up. In such clashes however an important characteristic of CCTV technology i.e. to harvest information, is often ignored. An aspect, which I think, makes for a far more interesting read.
</p>
</div>
<div class="para">
<h2>
9.
</h2>
<p>
Information harvesting is perhaps one of the prime facets of any CCTV technology. Spatial and social geography of a place gets read as data which is fed into a centralized database. These databases are codified and collated to generate patterns in a pyramidal hierarchy. (<a href="http://pad.ma/Vtkyfckd/00:07:13.000-00:08:34.559">http://pad.ma/Vtkyfckd/00:07:13.000-00:08:34.559</a> ) Aspects such garnering of personal information related to bodies and identities of people are also shared by other technologies which go in the name of National Identity Cards systems. Seen in this way spatial and personal identities seem somewhat inter-linked and entangled.
</p><p>
The National Identity Card system is perhaps the result of a deep unfulfilled desire of a state apparatus, which is, to know who the state is claiming to govern. The ultimate fulfilment of this desire is to posses a centralized database. A centralized database becomes a utopian space. An ideal location to store in neatly arranged digital patterns, a uniform record of personal identities of all citizens. Just like with an aid of a network of CCTV cameras one can perpetually look at a space and monitor movements of bodies of people so to with a national identity card system one can perpetually look at people by tracking the traces of their unique identities left over at the end of every sundry transaction.
</p><p>
One could perhaps think of a city centre or a mall as an ideal space designed to entice citizens to consume commodities and services or one could think of a nation state as an ideal space designed to manage communities as they live, work and exist in a utilitarian framework.
</p><p>
It does not come as a surprise perhaps that when men dreamt of Utopias or ideal spaces they also dreamt of tracking identities of people living in these spaces. For instance, Lewis Mumford has this to write about a Utopia imagined by HG Wells:
</p><p>
'Perhaps the most remarkable feature of utopian organization is the registration of every individual, with his name, numeral, finger-print, changes of residence and changes in life; all of which is filed in a huge central filing office, to become part of a permanent file upon the individual's death. Utopian registration gets our travellers into hot water, for they are naturally mistaken for their utopian doubles; but outside of its use in the story this little device seems strangely beside the point, and it arose, I believe, out of Mr. Wells' temperamental regard for tidiness--tidiness on a planetary scale--the tagging and labelling of a well-conducted shop'.
</p><p>
Tidiness on a planetary scale is a grand dream. Maybe at the end of the day a network of CCTV cameras help some people to keep a city centre neat, clean and tidy, or personal identities linked through a digital network help a state to keep a nation neat, clean and tidy. The idea in a way is to watch with being too obvious about it. (<a href="http://pad.ma/Vu5tyw1a/00:02:47.399-00:03:56.000">http://pad.ma/Vu5tyw1a/00:02:47.399-00:03:56.000</a> )
</p><p>
The emerging discourse of tidiness seems to form a part of bigger narrative of hygiene which is binding a technology of CCTV with those national identity card systems. Bureaucratic organization is common to those, who sit behind a switchboard to stare at a wall full of illuminated screens look for patterns of behaviour which could be divided into certain type of norms and deviancies, tidy and untidy behaviours, and too those who continuously look at data on human beings to in order to identify them as they are, are looking for patterns for norms and deviances of legible unique identity. (<a href="http://pad.ma/Vfgebc2x/00:05:32.000-00:06:27.000">http://pad.ma/Vfgebc2x/00:05:32.000-00:06:27.000</a> )
</p><p>
However unlike a fine machine like a vacuum cleaner which if directed properly will only suck diffident dirt particles while leaving other objects untouched, a network of CCTV cameras or a National Identity Card system suck everyone out. All consumers are perhaps probable suspects in the eyes of a CCTV operator and all citizens are probable aliens in the view of those who will look after digitized sets of unique identities. (<a href="http://pad.ma/Vg8ielth/00:02:33.920-00:03:20.599">http://pad.ma/Vg8ielth/00:02:33.920-00:03:20.599</a> ) The debate essentially seem between different interpretation of notions of control and care. These technologies are installed on the premise of providing care however it could be used as instruments for greater social control. Often one observes that such technologies come to occupy a central position in our lives not as a result of careful thinking and planning but by sudden bursts and disruptions caused by social events.
</p>
</div>
<div class="para">
<h2>
10.
</h2>
<p>
An event can appear as a link between what was and what will be. Certain events may have occurred by our perceived sense of past but they all have a potential to signify our future. A big event could have a big impact on our collective future. The bomb blast which ripped off the city centre on 15/06 at Manchester in England was a big event. A new city centre with comprehensive CCTV observation system might be imagined as a significant result of that event. Similarly, a terrorist attack on Bombay on 26/11 in India was a big event. The scheme for a roll out of, till then bureaucratically and politically stalled, National Identity Card program in India was a consequence of that event. Specific reasons might have triggered these events yet responses to these events are designed to cover every body on a generalized spatial and social scale. The grammar of policy responses to these big events are often punctuated with a language of risk.
</p>
<div class="para">
<h2>
11.
</h2>
<p>
Risk in insurance terms means a deviation of a future result from its expected value, culturally it might signify loss, and politically it might indicate fluctuation of power. In terms of a policy response to a big event which had left a lasting impact on the perception of security of a city, risk has come to assume central position. Spatially it has lead to a discourse of fortification of cities, socially it has piloted schemes for measuring, marking, capturing and mediating citizens by either giving them tokens of national membership or by keeping them under a perpetual gaze or both. Conceptually risk has been able to bend spatial form in particular ways. Blanket CCTV coverage at Manchester city centre might be seen as an attempt to reshape and secure an ideal space. What we still don't know is how effective are these measures to take care of, as Mumford points out, the problem of, utopian doubles. Every measure to sort genuine seems to producing a counter narrative where it's becoming increasing difficult to imagine a blueprint to mark and capture the impostor.
</p>
</div>
</div>
</div>
</body>
</html>

98
taha.js
View File

@ -1,98 +0,0 @@
/*
function displayPadmaURL(linkData, elem, opts) {
if (linkData.type == 'tcRange') {
var videoId = linkData.videoId;
}
}
*/
/*
$(function() {
var docHeight = $('#essay').height();
$('#padmaSidebar').css('height', (docHeight + 50) + "px");
});
*/
function setupPadmaLink(video, data) {
console.log(data);
// console.log(data);
var jq = $(data.jq);
var linkData = data.linkData;
jq.data("video", video);
jq.data("linkData", linkData);
jq.data("videoDisplayed", false);
jq.mouseover(function() {
// console.log("mouse");
if ($(this).data("videoDisplayed") == false) {
var $that = $(this);
var video = $(this).data("video");
var linkData = $(this).data("linkData");
var parentP = $(this).parents('p');
var appendElem = $('<div />').addClass('padmaVideo').data("sourceElem", $that).appendTo(parentP).appendTo(parentP);
var wrapperElem = $('<div />').addClass('padmaWrapper').appendTo(appendElem);
var videoElem = $('<video />').attr("src", video.getLayerVideo(linkData.tcIn, linkData.tcOut)).attr("controls", true).css("width", "320px").appendTo(wrapperElem);
var annotElem = $('<div />').addClass('annotation').insertAfter(videoElem);
var closeBtn = $('<div />').html('x').addClass('closeButton').appendTo(wrapperElem);
videoElem.bind("play", function() {
var that = this;
var videoObj = $(this).closest('.padmaVideo').data("sourceElem").data("video");
videoObj.currentLayers = '';
videoObj.interval = setInterval(function() {
var currentTime = parseInt(that.currentTime * 1000);
var time_ms = currentTime + npt2ms(linkData.tcIn);
var allLayers = videoObj.getLayersAtTimecode(time_ms);
var layers = filterLayersByTracks(allLayers, ['transcript']);
var html = tmpl("tmpl_layers", {'layers': layers});
if (videoObj.currentlyDisplayedLayers == layers) {
return;
} else {
annotElem.html(html);
videoObj.currentlyDisplayedLayers = layers;
}
}, 100);
});
videoElem.bind("pause", function() {
var that = this;
var videoObj = $(this).closest(".padmaVideo").data("sourceElem").data("video");
clearInterval(videoObj.interval);
});
// var html = tmpl("tmpl_" + linkData.type, {'video': video, 'linkData': linkData});
videoElem.bind("ended", function() {
var that = this;
closeBtn.click();
});
appendElem.slideDown();
$(this).data("videoDisplayed", true);
} else {
var padmaElem = $(this).parents('p').find('.padmaWrapper');
if (!padmaElem.is(":visible")) {
padmaElem.slideDown();
}
}
});
}
$('.closeButton').live("click", function() {
$(this).parents('.padmaWrapper').slideUp();
});
function setupSidenotes(video, data) {
console.log(video, data);
var ld = data.linkData;
if (ld.type != 'tcRange') { return false; }
var a = $(data.jq);
// AAA = a;
var aTop = parseInt(a.offset().top);
if (data.linkData.type == 'tcRange') {
var thumb = video.getFrame(ld.tcIn);
var title = video.video.title;
}
var containerElem = $('<div />').addClass('padmaThumb').css('top', aTop + "px").appendTo("#padmaSidebarRelative");
var imgElem = $('<img />').attr('src', thumb).attr('title', title).appendTo(containerElem);
}

279
test.js
View File

@ -1,157 +1,160 @@
var padmaContainer;
var $padmaQuery = jQuery.noConflict();
$(function() {
padmaContainer = $('#padmaSidebar');
padmaContainer.data("currentVideo", false);
var docWidth = $(document).width();
var essayWidth = docWidth - 360;
$('#essay').css("width", essayWidth);
});
function setupPadmaLink(videoObj, data) {
var $a = $(data.jq);
// $a.data("isDisplayed", false);
var linkData = data.linkData;
(function($) {
var p = padmaConfig;
var padmaContainer;
var wikiContainer;
//FIXME: put this as a variable, option somewhere?
var $container = padmaContainer;
videoObj.currentLayers = [];
switch (linkData.type) {
case "tcRange":
var mid_frame_npt = ms2npt(parseInt((npt2ms(linkData.tcIn) + npt2ms(linkData.tcOut)) / 2));
// console.log(mid_frame_npt);
var thumbUrl = videoObj.getFrame(mid_frame_npt);
default:
var frame_npt = ms2npt(videoObj.video.poster_frame);
var thumbUrl = videoObj.getFrame(frame_npt);
}
//FIXME: Html may need to be conditional on linkData.type, probably put html in switch case above.
var html = tmpl("tmpl_tooltip", {'video': videoObj, 'thumbUrl': thumbUrl, 'linkData': linkData});
// $a.attr("title", title);
$a.tooltip({
bodyHandler: function() {
return html;
},
showURL: false
$(function() {
padmaContainer = $('<div />').attr("id", "padmaSidebar").css({'position': 'fixed', 'bottom': '0px', 'top': '0px', 'right': '0px', 'width': '0px', 'background': p.background, 'color': p.color}).appendTo('body');
padmaContainer.data("currentVideo", false);
wikiContainer = $('<div />').attr("id", "wikiWrapper").css({'width': '100%'});
$('body').wrapInner(wikiContainer);
});
$a.click(function(e) {
function setupPadmaLink(videoObj, data) {
var $a = $(data.jq);
// $a.data("isDisplayed", false);
var linkData = data.linkData;
function sidebarAnimateIn() {
/*
$container.animate({'width': '400px'}, function() {
$(this).animate({'backgroundColor': '#000000'});
});
var docWidth = $(document).width();
var newWidth = docWidth - 440;
$('#essay').animate({'width': newWidth + "px"});
*/
// $container.show();
$('#aboutTxt').hide();
var $container = padmaContainer;
videoObj.currentLayers = [];
switch (linkData.type) {
case "tcRange":
var mid_frame_npt = ms2npt(parseInt((npt2ms(linkData.tcIn) + npt2ms(linkData.tcOut)) / 2));
var thumbUrl = videoObj.getFrame(mid_frame_npt);
default:
var frame_npt = ms2npt(videoObj.video.poster_frame);
var thumbUrl = videoObj.getFrame(frame_npt);
}
function sidebarAnimateOut() {
$container.find('.padmaViewer').empty();
$('#aboutTxt').show();
/*
$container.animate({'width': '0px'}, function() {
$(this).animate({'backgroundColor': '#ffffff'});
});
$('#essay').animate({'width': '100%'});
*/
}
var html = videoObj.video.title + "<br />";
html += "<img src='" + thumbUrl + "' /> <br />";
html += "Click to Play";
$a.tooltip({
bodyHandler: function() {
return html;
},
showURL: false
});
function isSidebarVisible() {
if (padmaContainer.width() > 0) {
return true;
} else {
return false;
$a.click(function(e) {
function sidebarAnimateIn() {
$container.show();
$container.animate({'width': '400px'});
var docWidth = $(document).width();
var newWidth = docWidth - 440;
$('#wikiWrapper').animate({'width': newWidth + "px"});
}
}
// sidebarAnimateIn();
e.preventDefault();
var currentVideo = $container.data("currentVideo");
if (currentVideo == videoObj) {
/*
if (!isSidebarVisible()) {
function sidebarAnimateOut() {
$container.animate({'width': '0px'}).hide();
sidebarWrap.remove();
$('#wikiWrapper').animate({'width': '100%'});
cleanupVideo(videoObj);
}
function isSidebarVisible() {
if (padmaContainer.width() > 0) {
return true;
} else {
return false;
}
}
e.preventDefault();
var currentVideo = $container.data("currentVideo");
if (currentVideo) {
cleanupVideo(currentVideo);
}
$container.data("currentVideo", videoObj);
if (!isSidebarVisible()) {
sidebarAnimateIn();
}
*/
return;
}
if (currentVideo) {
cleanupVideo(currentVideo);
}
$container.data("currentVideo", videoObj);
if (!isSidebarVisible()) {
sidebarAnimateIn();
}
var html = tmpl("tmpl_sidebar", {'video': videoObj, 'linkData': linkData});
$('#padmaSidebarWrapper').html(html);
$('#aboutTxt').hide();
padmaContainer.empty();
var sidebarWrap = $('<div />').attr("id", "padmaSidebarWrapper").css({'position': 'relative'}).appendTo($container);
var videoElem = $('<video />').addClass('padmaVideo').attr("src", videoObj.getLayerVideo(linkData.tcIn, linkData.tcOut)).attr("autoplay", "autoplay").attr("controls", "controls").appendTo(sidebarWrap).css({'width': '400px'});
var annotHeight = $(document).height() - 300;
var annotations = $('<div />').addClass('annotationText').css({'height': annotHeight + "px", "overflow-y": "auto"}).appendTo(sidebarWrap);
var html = getLayersHtml(npt2ms(linkData.tcIn), p.default_layers);
$('.annotationText').html(html);
//FIXME: should be a better way to deal with displaying default layer.
var currentLayers = videoObj.getLayersAtTimecode(npt2ms(linkData.tcIn));
var transcripts = filterLayersByTracks(currentLayers, ['transcript']);
// console.log(transcripts);
if (transcripts.length > 0) {
var annotHtml = transcripts[0].value_html;
} else {
var annotHtml = '';
}
$('.annotationText').html(annotHtml);
/*
var closeBtn = $('<div />')
.addClass("close")
.click(function() {
sidebarAnimateOut();
})
.text("x")
.appendTo('.padmaViewer');
*/
var videoElem = $('video');
// var videoObj = video;
videoElem.bind("play", function() {
var that = this
videoObj.interval = setInterval(function() {
var currentTime = parseInt(that.currentTime * 1000);
var time_ms = currentTime + npt2ms(linkData.tcIn);
var allLayers = videoObj.getLayersAtTimecode(time_ms);
if (videoObj.currentLayers == allLayers) {
return;
//tc in ms
//tracks is an array like ['transcript', 'description']
function getLayersHtml(tc, tracks) {
//FIXME: This code is retarded, but we do want a way to group transcripts, descriptions, etc.
var currentLayers = videoObj.getLayersAtTimecode(tc);
var annotLayers = [];
var annotHtml = '';
for (var t=0; t < tracks.length; t++) {
var thisTrack = tracks[t];
var thisTrackLayers = filterLayersByTracks(currentLayers, [thisTrack]);
if (thisTrackLayers.length > 0) {
annotHtml += thisTrack + "s<br />";
}
for (var i=0; i < thisTrackLayers.length; i++) {
var thisTrack = thisTrackLayers[i];
var thisHtml = '';
thisHtml += "<span class='padmaContributor'>" + thisTrack.creator + ":</span>";
thisHtml += " <span class='padmaAnnotation'>" + thisTrack.value_html + "</span>";
thisHtml += "<br /><br />";
annotHtml += thisHtml;
}
}
// GLOBAL_FOO = allLayers;
var transcript = filterLayersByTracks(allLayers, ['transcript'])[0].value_html;
if (transcript != $('.annotationText').html()) {
$('.annotationText').html(transcript);
}
}, 150);
return annotHtml;
}
var closeBtn = $('<div />')
.addClass("closeBtn")
.click(function() {
sidebarAnimateOut();
})
.text("x")
.appendTo(sidebarWrap)
.css({'position': 'absolute', 'top': '2px', 'right': '2px', 'cursor': 'pointer', 'z-index': '100'});
videoElem.bind("play", function() {
var that = this
videoObj.interval = setInterval(function() {
var currentTime = parseInt(that.currentTime * 1000);
var time_ms = currentTime + npt2ms(linkData.tcIn);
var html = getLayersHtml(time_ms, p.default_layers);
if (html != $('.annotationText').html()) {
$('.annotationText').html(html);
}
}, 150);
});
videoElem.bind("pause", function() {
clearInterval(videoObj.interval);
});
videoElem.bind("ended", function() {
clearInterval(videoObj.interval);
// cleanupVideo(videoObj);
// sidebarAnimateOut();
});
});
videoElem.bind("pause", function() {
clearInterval(videoObj.interval);
});
}
videoElem.bind("ended", function() {
clearInterval(videoObj.interval);
// cleanupVideo(videoObj);
sidebarAnimateOut();
});
window.setupPadmaLink = setupPadmaLink;
});
//All functions that destroy the video must call this to ensure clean-ups are handled
// parameter is a padmaVideo object.
function cleanupVideo(videoObj) {
if ($('.padmaVideo').length > 0) {
// console.log("cleaning");
$('.padmaVideo').get(0).pause();
$('.padmaVideo').remove();
}
clearInterval(videoObj.interval);
// $('.padmaViewer').remove();
padmaContainer.data("currentVideo", false);
}
}
//All functions that destroy the video must call this to ensure clean-ups are handled
//FIXME: actually handle the cleanups.
// parameter is a padmaVideo object.
function cleanupVideo(videoObj) {
$('video')[0].pause();
clearInterval(videoObj.interval);
$('.padmaViewer').remove();
padmaContainer.data("currentVideo", false);
}
})(jQuery);