Commits

Diego Cantor committed 4aba95c

Adding missing exercise on chapter 1. Renaming files on Ch1

  • Participants
  • Parent commits beb425e

Comments (0)

Files changed (259)

File 1727_01/ch1_Canvas.html

+<html>
+<head>
+	 <title> WebGL Beginner's Guide - Setting up the canvas </title>
+	 <style type="text/css">
+	 canvas {border: 2px dotted blue;}
+	 </style>
+</head>
+<body>
+<canvas id="canvas-element" width="800" height="600">
+Your browser does not support the HTML5 canvas element.
+</canvas>
+</body>
+</html>

File 1727_01/ch1_Car.html

+<html>
+
+<head>
+<title>WebGL Beginner's Guide - Chapter 1 - WebGL Car</title>
+<meta http-equiv='content-type' content='text/html; charset=ISO-8859-1'>
+<link href='css/styles.css'   type='text/css' rel='stylesheet'>
+<link href='css/cars.css' type='text/css' rel='stylesheet' />
+<link href='css/smoothness/jquery-ui-1.8.13.custom.css' type='text/css' rel='stylesheet' />
+<link href='css/colorpicker.css'  type='text/css' rel='stylesheet'/>
+<!-- GUI Libraries //-->
+<script type='text/javascript' src='js/gui/jquery-1.5.1.min.js'></script>
+<script type='text/javascript' src='js/gui/jquery-ui-1.8.13.custom.min.js'></script> 
+<script type='text/javascript' src='js/gui/colorpicker.js'></script>
+<!-- MATH Libraries //-->
+<script type='text/javascript' src='js/math/gl-matrix-min.js'></script>
+<!-- WEBGL Libraries //-->
+<script type='text/javascript' src='js/webgl/Globals.js'></script>
+<script type='text/javascript' src='js/webgl/Utils.js'></script>
+<script type='text/javascript' src='js/webgl/Program.js'></script>
+<script type='text/javascript' src='js/webgl/Scene.js'></script>
+<script type='text/javascript' src='js/webgl/Axis.js'></script>
+<script type='text/javascript' src='js/webgl/Floor.js'></script>
+<script type='text/javascript' src='js/webgl/Camera.js'></script>
+<script type='text/javascript' src='js/webgl/CameraInteractor.js'></script>
+<script type='text/javascript' src='js/webgl/SceneTransforms.js'></script>
+<script type='text/javascript' src='js/webgl/Texture.js'></script>
+<script type='text/javascript' src='js/webgl/Lights.js'></script>
+<script type='text/javascript' src='js/webgl/WebGLApp.js'></script>
+<script type='text/javascript' src='js/webgl/Picker.js'></script>
+
+<script id="shader-vs" type="x-shader/x-vertex">
+
+const int NUM_LIGHTS = 4;
+
+attribute vec3 aVertexPosition;
+attribute vec3 aVertexNormal;
+attribute vec4 aVertexColor;
+
+uniform mat4 uMVMatrix;
+uniform mat4 uPMatrix;
+uniform mat4 uNMatrix;
+
+uniform bool uTranslateLights;
+uniform vec3 uLightPosition[NUM_LIGHTS];
+
+varying vec3 vNormal;
+varying vec3 vLightRay[NUM_LIGHTS];
+varying vec3 vEye[NUM_LIGHTS];
+
+void main(void) {
+
+     vec4 c = aVertexColor;
+     vec4 vertex = uMVMatrix * vec4(aVertexPosition, 1.0);
+     vNormal = vec3(uNMatrix * vec4(aVertexNormal, 1.0));
+     vec4 lightPosition = vec4(0.0);
+     
+     if (uTranslateLights){
+         for(int i=0; i < NUM_LIGHTS; i++){
+           lightPosition =   uMVMatrix * vec4(uLightPosition[i], 1.0);
+           vLightRay[i] = vertex.xyz - lightPosition.xyz;
+           vEye[i] = -vec3(vertex.xyz);
+         }
+     }    
+     else {
+        for(int i=0; i < NUM_LIGHTS; i++){
+          lightPosition = vec4(uLightPosition[i], 1.0);
+          vLightRay[i] = vertex.xyz - lightPosition.xyz;
+          vEye[i] = -vec3(vertex.xyz);
+        }
+    }
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+}	
+</script>
+
+<script id="shader-fs" type="x-shader/x-fragment">
+#ifdef GL_ES
+precision highp float;
+#endif
+
+
+//Light uniforms
+const int NUM_LIGHTS = 4;
+uniform vec3  uLa[NUM_LIGHTS];   //ambient
+uniform vec3  uLd[NUM_LIGHTS];   //diffuse
+uniform vec3  uLs[NUM_LIGHTS];   //specular
+uniform vec3 uLightPosition[NUM_LIGHTS];
+
+//Material uniforms
+uniform vec3  uKa;   //ambient
+uniform vec3  uKd;   //diffuse
+uniform vec3  uKs;   //specular
+uniform float uNs;   //specular coefficient
+uniform float d;     //Opacity
+uniform int   illum; //Illumination mode
+
+
+uniform bool  uWireframe;
+
+
+varying vec3 vNormal;
+varying vec3 vLightRay[NUM_LIGHTS];
+varying vec3 vEye[NUM_LIGHTS];
+
+float calculateAttenuation(in vec3 ray){
+    float dist = length(ray);
+    return (1.0 / (0.1 * dist));
+}
+
+void main(void) {
+    if (uWireframe || illum == 0){
+        gl_FragColor = vec4(uKd,d);
+        return;
+    }
+    
+   vec3 COLOR = vec3(0.0,0.0,0.0);
+   vec3 N =  normalize(vNormal);
+   vec3 L =  vec3(0.0,0.0,0.0);
+   vec3 E =  vec3(0.0,0.0,0.0);
+   vec3 R =  vec3(0.0,0.0,0.0);
+   vec3 deltaRay = vec3(0.0);
+   const int  lsize = 2;
+   const float step = 0.25;
+   const float inv_total = 1.0/((float(lsize*lsize) + 1.0)*(float(lsize*lsize) + 1.0));  //how many deltaRays
+   
+   float dx = 0.0;
+   float dz = 0.0;
+   float LT = 0.0;
+   
+   if (illum == 1){
+        for(int i = 0; i < NUM_LIGHTS; i++){	
+            L = normalize(vLightRay[i]);	
+            N = normalize(vNormal);	
+            COLOR += (uLa[i] * uKa) + (uLd[i] * uKd * clamp(dot(N, -L),0.0,1.0));
+        }   
+        gl_FragColor =  vec4(COLOR,d);
+        return;
+   }
+   
+   if (illum == 2){
+        for(int i = 0; i < NUM_LIGHTS; i++){
+
+            E = normalize(vEye[i]);
+            L = normalize(vLightRay[i]);
+            R = reflect(L, N);
+            COLOR += (uLa[i] * uKa);
+            COLOR += (uLd[i] * uKd * clamp(dot(N,-L),0.0,1.0));// * calculateAttenuation(vLightRay[i]));
+            COLOR += (uLs[i] * uKs * pow( max(dot(R, E), 0.0), uNs) * 4.0);
+        }
+        gl_FragColor =  vec4(COLOR,d);
+        return;
+   }
+}
+</script>
+
+<script type="text/javascript">
+
+var camera = null,
+light1 = null,
+light2 = null,
+light3 = null,
+light4 = null,
+transforms = null,
+
+cameraHome = [0.0,10,150],
+cameraAzimuth = 25,
+cameraElevation = -11,
+carSurface = undefined,
+floorVisible = false,
+translateLights = false;
+
+
+
+function configure(){
+    gl.clearColor(0.2,0.2,0.2, 1.0);
+    gl.clearDepth(1.0);
+    
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthFunc(gl.LEQUAL);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); 
+
+    
+  
+    //Creates and sets up the camera location
+    camera = new Camera(CAMERA_ORBITING_TYPE);
+    camera.goHome(cameraHome);
+    camera.setFocus([0.0,0.0,0.0]);
+	camera.setAzimuth(cameraAzimuth);
+	camera.setElevation(cameraElevation);
+    camera.hookRenderer = render;
+    
+    //Creates and sets up the mouse and keyboard interactor
+    var interactor = new CameraInteractor(camera, document.getElementById('the-canvas'));
+    
+    //Scene Transforms
+    transforms = new SceneTransforms(camera);
+   
+    //init transforms
+    transforms.init();
+
+    light1 = new Light('far-left');
+	light1.setPosition([-25,25,-25]);
+	light1.setDiffuse([0.5,0.5,0.5]);
+    light1.setAmbient([0.0,0.0,0.0]);
+    light1.setSpecular([0.4,0.4,0.4]);
+	
+	light2 = new Light('far-right');
+	light2.setPosition([25,25,-25]);
+	light2.setDiffuse([0.5,0.5,0.5]);
+    light2.setAmbient([0.0,0.0,0.0]);
+    light2.setSpecular([0.4,0.4,0.4]);
+	
+	light3 = new Light('near-left');
+	light3.setPosition([-25,25,25]);
+	light3.setDiffuse([0.5,0.5,0.5]);
+    light3.setAmbient([0.0,0.0,0.0]);
+    light3.setSpecular([0.4,0.4,0.4]);
+    
+    light4 = new Light('near-right');
+    light4.setPosition([25,25,25]);
+    light4.setDiffuse([0.5,0.5,0.5]);
+    light4.setAmbient([0.0,0.0,0.0]);
+    light4.setSpecular([0.4,0.4,0.4]);
+    
+    
+	Lights.add(light1);
+	Lights.add(light2);
+    Lights.add(light3);	
+	Lights.add(light4);	
+    
+    //init Program
+	var attributeList = ["aVertexPosition",
+					"aVertexNormal",
+					"aVertexColor"];
+
+	var uniformList = [	"uPMatrix", 
+					"uMVMatrix", 
+					"uNMatrix",
+                    "uLightPosition",
+                    "uWireframe",
+                    "uLa",
+                    "uLd",
+                    "uLs",
+                    "uKa",
+                    "uKd",
+                    "uKs",
+                    "uNs",
+                    "d",
+                    "illum",
+                    "uTranslateLights"
+					];
+					
+	Program.load(attributeList, uniformList);
+	
+	
+    gl.uniform3fv(Program.uLightPosition, Lights.getArray('position'));
+    gl.uniform3fv(Program.uLa ,     Lights.getArray('ambient'));
+    gl.uniform3fv(Program.uLd,      Lights.getArray('diffuse'));
+    gl.uniform3fv(Program.uLs,      Lights.getArray('specular'));
+    
+    gl.uniform3fv(Program.uKa ,     [1.0,1.0,1.0]);
+    gl.uniform3fv(Program.uKd ,     [1.0,1.0,1.0]);
+    gl.uniform3fv(Program.uKs ,     [1.0,1.0,1.0]);
+    
+    gl.uniform1f(Program.uNs, 1.0);
+    gl.uniform1i(Program.uTranslateLights, translateLights);
+
+}
+
+function loadNissan(){
+    Scene.objects = [];
+    Scene.addObject(Floor);
+    for(var i = 1; i <= 178; i+=1){
+        Scene.loadObject('models/nissan/part'+i+'.json');
+
+    }
+}
+
+
+function load(){
+    Floor.build(80,2);
+    Floor.Ka = [1,1,1];
+    Floor.Kd = [0.6,0.6,0.6]
+    Floor.Ks = [1,1,1];
+    Floor.Ni = 1;
+    Floor.Ns = 1;
+    Floor.d = 1.0;
+    Floor.illum = 1;
+   
+    Floor.visible = floorVisible;
+    
+    Scene.addObject(Floor);
+    loadNissan();
+}
+
+function render(){
+    gl.viewport(0, 0, c_width, c_height);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    
+
+    transforms.updatePerspective();
+    
+    try{
+        
+        for (var i = 0; i < Scene.objects.length; i++){
+            
+            var object = Scene.objects[i];
+			if (object.visible != undefined && !object.visible) continue;
+			transforms.calculateModelView();           
+            transforms.push();
+            transforms.setMatrixUniforms();
+            transforms.pop();
+            
+            
+   
+            gl.enableVertexAttribArray(Program.aVertexPosition);
+            gl.disableVertexAttribArray(Program.aVertexNormal);
+            gl.disableVertexAttribArray(Program.aVertexColor);
+            
+            gl.uniform1i(Program.uWireframe, false);
+            gl.uniform3fv(Program.uKa, object.Ka);
+            gl.uniform3fv(Program.uKd, object.Kd);
+            gl.uniform3fv(Program.uKs, object.Ks);
+            gl.uniform1f(Program.uNs, object.Ns);
+            gl.uniform1f(Program.d, object.d);
+            gl.uniform1i(Program.illum, object.illum);
+            
+                    
+            
+            gl.bindBuffer(gl.ARRAY_BUFFER, object.vbo);
+            gl.vertexAttribPointer(Program.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
+            gl.enableVertexAttribArray(Program.aVertexPosition);
+            
+			if(!object.wireframe){
+				gl.bindBuffer(gl.ARRAY_BUFFER, object.nbo);
+				gl.vertexAttribPointer(Program.aVertexNormal, 3, gl.FLOAT, false, 0, 0);
+				gl.enableVertexAttribArray(Program.aVertexNormal);
+            }
+            else{
+                gl.uniform1i(Program.uWireframe, true);
+            }
+			
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, object.ibo);
+			
+			if (object.wireframe){
+                gl.drawElements(gl.LINES, object.indices.length, gl.UNSIGNED_SHORT,0);
+            }
+            else{
+                gl.drawElements(gl.TRIANGLES, object.indices.length, gl.UNSIGNED_SHORT,0);
+            }
+			
+            gl.bindBuffer(gl.ARRAY_BUFFER, null);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+
+        }
+    }
+    catch(err){
+        alert(err);
+        console.error(err.description);
+    }
+}
+
+function resizeCanvas(){
+    c_width = $('#content').width();
+    c_height = $('#content').height();
+    $('#the-canvas').attr('width',c_width);
+    $('#the-canvas').attr('height',c_height);
+}
+
+$(window).resize(function(){resizeCanvas();});
+
+var app;
+function runShowRoom(){
+    app = new WebGLApp("the-canvas");
+    app.configureGLHook = configure;
+    app.loadSceneHook   = load;
+    app.drawSceneHook   = render;
+    app.run(); 
+}
+</script>
+</head>
+
+<body onLoad='runShowRoom()'>
+<div id="header">
+    <h1>WebGL Beginner's Guide - Chapter 1 - WebGL Car Scene</h1>
+    <h2>Customize your Car</h2>
+    <div id='logo-packt'><img src='packt.gif'/></div>
+</div>
+
+<div id="nav">
+  
+    <table width='100%' cellspacing ='0'>
+    <tr>
+       <td>Car Color:</td>
+       <td colspan=2><div id='carColor' class='colorSelector'><div style='background-color:rgb(255,255,255)'></div></div></td>
+    </tr>
+    <tr>
+        <td>Car Shininness:</td>
+        <td width='130px'><div id='slider-shininess'/></td>
+        <td id='slider-shininess-value' width='60px'>  0</td>
+   	</tr>
+    </table>
+    
+    <hr/>
+    
+    <table width='100%'>
+        <tr>
+            <td><h3>Lights</h3></td>
+        </tr>
+		<tr>
+            <td>
+                <table style='text-align:center'>
+                <tr>
+                    <td></td><td>Ambient</td><td></td>
+                    <td>Diffuse</td><td></td>
+                    <td>Specular</td><td></td>
+                </tr>    
+                <tr>
+                    <td style='text-align:right' width='160px'>far-left: </td>
+                    <td width='150px'><div id='slider-la1'/></td><td id='slider-la1-value' width='20px'>0.0</td>
+                    <td width='150px'><div id='slider-ld1'/></td><td id='slider-ld1-value' width='20px'>0.4</td>
+                    <td width='150px'><div id='slider-ls1'/></td><td id='slider-ls1-value' width='20px'>0.8</td>
+                </tr>
+                <tr>
+                    <td style='text-align:right' width='160px'>far-right: </td>
+                    <td width='150px'><div id='slider-la2'/></td><td id='slider-la2-value' width='20px'>0.0</td>
+                    <td width='150px'><div id='slider-ld2'/></td><td id='slider-ld2-value' width='20px'>0.4</td>
+                    <td width='150px'><div id='slider-ls2'/></td><td id='slider-ls2-value' width='20px'>0.8</td>
+                </tr>
+                <tr>
+                    <td style='text-align:right' width='160px'>near-left: </td>
+                    <td width='150px'><div id='slider-la3'/></td><td id='slider-la3-value' width='20px'>0.0</td>
+                    <td width='150px'><div id='slider-ld3'/></td><td id='slider-ld3-value' width='20px'>0.4</td>
+                    <td width='150px'><div id='slider-ls3'/></td><td id='slider-ls3-value' width='20px'>0.8</td>
+                </tr>
+                <tr>
+                    <td style='text-align:right' width='160px'>near-right: </td>
+                    <td width='150px'><div id='slider-la4'/></td><td id='slider-la4-value' width='20px'>0.0</td>
+                    <td width='150px'><div id='slider-ld4'/></td><td id='slider-ld4-value' width='20px'>0.4</td>
+                    <td width='150px'><div id='slider-ls4'/></td><td id='slider-ls4-value' width='20px'>0.8</td>
+                </tr>
+                </table>
+            </td>
+        </tr>
+        <tr>
+            <td align='right'><input type="checkbox" id="translate-lights"/> Translate Lights<br /></td>
+        </tr>    
+    </table>
+    <hr/>
+    <table width='100%'>
+        <tr>
+            <td><h3>Camera</h3></td>
+        </tr>
+        <tr>
+        <td align='center'>
+        <div id='opt-pose' >
+            <input type='radio' id='opt-home'  name='posecam' /><label for='opt-home'>Home</label>
+            <input type='radio' id='opt-above' name='posecam' /><label for='opt-above'>Above</label>
+            <input type='radio' id='opt-front' name='posecam' /><label for='opt-front'>Front</label>
+            <input type='radio' id='opt-back'  name='posecam' /><label for='opt-back'>Back</label>
+            <input type='radio' id='opt-left'  name='posecam' /><label for='opt-left'>Left</label>
+            <input type='radio' id='opt-right' name='posecam' /><label for='opt-right'>Right</label>
+            
+         </div>
+         </td>
+         </tr>
+         <tr>
+            <td align='center'>Zoom: Alt + Drag <input type="checkbox" id="show-floor"/>Floor Visible<br /></td>
+         </tr>          
+    </table>        
+
+    
+</div>
+
+<div id="content">
+    <canvas id='the-canvas'></canvas>
+</div>
+
+<script type='text/javascript'>resizeCanvas();</script>
+<script type='text/javascript'>
+    $('#opt-pose').buttonset();
+    $('#slider-shininess').slider({value:0.0, min:0.0, max:1.0, step:0.1, slide:function(event, ui){updateShininessSelectedCar(ui)}, change:function(event,ui){updateShininessSelectedCar(ui)}});
+    $('#slider-la1').slider({value:0.0, min:0.0, max:1.0, step:0.1, slide:function(){updateLightProperty(1, 'a')}, change:function(){updateLightProperty(1,'a')}});
+    $('#slider-ld1').slider({value:0.5, min:0.0, max:1.0, step:0.1, slide:function(){updateLightProperty(1, 'd')}, change:function(){updateLightProperty(1,'d')}});
+    $('#slider-ls1').slider({value:0.4, min:0.0, max:1.0, step:0.1, slide:function(){updateLightProperty(1, 's')}, change:function(){updateLightProperty(1,'s')}});
+    $('#slider-la2').slider({value:0.0, min:0.0, max:1.0, step:0.1, slide:function(){updateLightProperty(2, 'a')}, change:function(){updateLightProperty(2,'a')}});
+    $('#slider-ld2').slider({value:0.5, min:0.0, max:1.0, step:0.1, slide:function(){updateLightProperty(2, 'd')}, change:function(){updateLightProperty(2,'d')}});
+    $('#slider-ls2').slider({value:0.4, min:0.0, max:1.0, step:0.1, slide:function(){updateLightProperty(2, 's')}, change:function(){updateLightProperty(2,'s')}});
+    $('#slider-la3').slider({value:0.0, min:0.0, max:1.0, step:0.1, slide:function(){updateLightProperty(3, 'a')}, change:function(){updateLightProperty(3,'a')}});
+    $('#slider-ld3').slider({value:0.5, min:0.0, max:1.0, step:0.1, slide:function(){updateLightProperty(3, 'd')}, change:function(){updateLightProperty(3,'d')}});
+    $('#slider-ls3').slider({value:0.4, min:0.0, max:1.0, step:0.1, slide:function(){updateLightProperty(3, 's')}, change:function(){updateLightProperty(3,'s')}});
+    $('#slider-la4').slider({value:0.0, min:0.0, max:1.0, step:0.1, slide:function(){updateLightProperty(4, 'a')}, change:function(){updateLightProperty(4,'a')}});
+    $('#slider-ld4').slider({value:0.5, min:0.0, max:1.0, step:0.1, slide:function(){updateLightProperty(4, 'd')}, change:function(){updateLightProperty(4,'d')}});
+    $('#slider-ls4').slider({value:0.4, min:0.0, max:1.0, step:0.1, slide:function(){updateLightProperty(4, 's')}, change:function(){updateLightProperty(4,'s')}});
+
+
+  
+$('#show-floor').change(function(){
+	    floorVisible = !floorVisible;
+        Floor.visible = floorVisible;
+});
+
+$('#translate-lights').change(function(){
+    translateLights = !translateLights;
+    gl.uniform1i(Program.uTranslateLights, translateLights);
+});
+
+function updateShininessSelectedCar(shine){
+
+    $('#slider-shininess-value').html(shine.value);
+    
+
+    for(var i = 0, N = Scene.objects.length; i < N; i+=1){
+        for(var j =0; j <3; j+=1){
+        Scene.objects[i].Ks[j] = shine.value;
+        }
+    }
+    app.refresh();
+   
+}
+
+function updateLightProperty(index,property){
+    var v = $('#slider-l'+property+''+index).slider("value");
+    $('#slider-l'+property+''+index+'-value').html(v);
+    var light = undefined;
+    switch(index){
+                case 1: light = light1; break;
+                case 2: light = light2; break;
+                case 3: light = light3; break;
+                case 4: light = light4; break;
+    }
+    
+    switch(property){
+                case 'a':light.setAmbient([v,v,v]);
+                         gl.uniform3fv(Program.uLa, Lights.getArray('ambient'));
+                         break;
+                case 'd':light.setDiffuse([v,v,v]);
+                         gl.uniform3fv(Program.uLd, Lights.getArray('diffuse'));
+                         break;
+                case 's':light.setSpecular([v,v,v]);
+                         gl.uniform3fv(Program.uLs, Lights.getArray('specular'));
+                         break;
+    }
+
+    render();
+}
+
+function updateColorSelectedCar(color){
+    var parts = [];
+    
+    for(var i=0, N = Scene.objects.length; i < N; i+=1){
+        if (Scene.objects[i].alias.indexOf('_paint') != -1){
+            parts.push(Scene.objects[i]);
+        }
+    }
+   
+
+    for(var i = 0, N = parts.length; i < N; i+=1){
+        parts[i].Kd = color;
+    }
+    app.refresh();
+};
+
+var carColorHex = '#ffffff';
+$('#carColor').ColorPicker({
+    onSubmit: function(hsb, hex, rgb, el) {
+            $(el).val(hex);
+            $(el).ColorPickerHide();
+            
+    },
+    color: '#00ff00',
+    onShow: function (colpkr) {
+        $(colpkr).fadeIn(500);
+        return false;
+    },
+    onHide: function (colpkr) {
+        $(colpkr).fadeOut(500);
+        return false;
+    },
+    onChange: function (hsb, hex, rgb) {
+        carColorHex = hex;
+        $('#carColor div').css('backgroundColor', '#' + hex);
+        updateColorSelectedCar([rgb.r/256,rgb.g/256,rgb.b/256]);
+    },
+    
+    onBeforeShow: function (colpkr) {
+            $(this).ColorPickerSetColor(carColor);
+        }
+    });
+
+
+var timer_anim_camera = undefined;
+var goal_camera_azimuth = 0;
+var goal_camera_elevation = 0;
+var goal_camera_home = cameraHome;
+
+
+
+$('#opt-home').click(function(){
+    if(timer_anim_camera) { clearInterval(timer_anim_camera); }
+    goal_camera_azimuth = cameraAzimuth;
+    goal_camera_elevation = cameraElevation;
+    timer_anim_camera = setInterval(animCamera, 5);
+});
+
+$('#opt-above').click(function(){
+    if(timer_anim_camera) { clearInterval(timer_anim_camera); }
+    goal_camera_azimuth = 0;
+    goal_camera_elevation = -90;
+    timer_anim_camera = setInterval(animCamera, 5);
+});
+
+$('#opt-front').click(function(){
+    if(timer_anim_camera) { clearInterval(timer_anim_camera); }
+    goal_camera_azimuth = 0;
+    goal_camera_elevation = -10;
+    timer_anim_camera = setInterval(animCamera, 5);
+});
+
+$('#opt-back').click(function(){
+    if(timer_anim_camera) { clearInterval(timer_anim_camera); }
+    goal_camera_azimuth = 180;
+    goal_camera_elevation = -10;
+    timer_anim_camera = setInterval(animCamera, 5);
+});
+
+$('#opt-left').click(function(){
+    if(timer_anim_camera) { clearInterval(timer_anim_camera); }
+    goal_camera_azimuth = -90;
+    goal_camera_elevation = 0;
+    timer_anim_camera = setInterval(animCamera, 5);
+});
+
+$('#opt-right').click(function(){
+    if(timer_anim_camera) { clearInterval(timer_anim_camera); }
+    goal_camera_azimuth = 90;
+    goal_camera_elevation = 0;
+    timer_anim_camera = setInterval(animCamera, 5);
+});
+
+
+
+function animCamera(){
+
+    var ca = goal_camera_azimuth-camera.azimuth;
+    var ce = goal_camera_elevation-camera.elevation;
+    var deltaPos = vec3.create([goal_camera_home[0]-camera.position[0], 
+                    goal_camera_home[1]-camera.position[1], 
+                    goal_camera_home[2]-camera.position[2]]);
+                    
+    
+    if (Math.abs(ca) < 0.5 && 
+        Math.abs(ce) < 0.5 && 
+        Math.abs(deltaPos[0]  < 0.1) &&
+        Math.abs(deltaPos[1]  < 0.1) &&
+        Math.abs(deltaPos[2]  < 0.1))
+    {
+        camera.setAzimuth(goal_camera_azimuth);
+        camera.setElevation(goal_camera_elevation);
+        camera.setPosition(goal_camera_home);
+        clearInterval(timer_anim_camera);
+    }
+    else{
+        camera.setAzimuth  (camera.azimuth   + ca/100);
+        camera.setElevation(camera.elevation + ce/100);
+        vec3.scale(deltaPos, 1/100);
+        vec3.add(camera.position,deltaPos,deltaPos);
+        camera.setPosition(deltaPos);
+        render();
+    }
+}    
+
+
+</script>
+</body>
+</html>

File 1727_01/ch1_GL_Attributes.html

+<html>
+<head>
+	 <title> WebGL Beginner's Guide - Setting WebGL context attributes</title>
+	 <style type="text/css">
+	 canvas {border: 2px dotted blue;}
+	 </style>
+	 
+	 <script>
+		var gl = null;
+		var c_width = 0;
+		var c_height = 0;
+		
+		window.onkeydown = checkKey;
+		
+		function checkKey(ev){
+		  switch(ev.keyCode){
+			case 49:{ // 1
+				gl.clearColor(0.3,0.7,0.2,1.0);
+				clear(gl);
+				break;
+			}
+			case 50:{ // 2
+				gl.clearColor(0.3,0.2,0.7,1.0);
+				clear(gl);
+				break;
+			}
+			case 51:{ // 3
+				var color = gl.getParameter(gl.COLOR_CLEAR_VALUE);
+				
+				//Don't get confused with the following line. It basically rounds up the numbers to one decimal cipher just for visualization purposes
+				alert('clearColor = (' + Math.round(color[0]*10)/10 + ',' +Math.round(color[1]*10)/10+','+Math.round(color[2]*10)/10+')');
+				window.focus();
+				break;
+			}
+		  }
+		}
+		
+		function getGLContext(){
+			var canvas = document.getElementById("canvas-element-id");
+			if (canvas == null){
+				alert("there is no canvas on this page");
+				return;
+			}
+				
+			var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
+            var ctx = null;
+            for (var i = 0; i < names.length; ++i) {
+                try {
+                    ctx = canvas.getContext(names[i]);
+                } 
+                catch(e) {}
+                if (ctx) break;
+            }
+
+			if (ctx == null){
+				alert("WebGL is not available");
+			}
+			else{
+				return ctx;
+			}
+		}
+		
+		function clear(ctx){
+			ctx.clear(ctx.COLOR_BUFFER_BIT);
+			ctx.viewport(0,0,c_width, c_height);
+		}
+		
+		function initWebGL(){
+			gl = getGLContext();
+			
+		}
+	 </script>
+</head>
+<body onLoad='initWebGL()'>
+<canvas id="canvas-element-id" width="800" height="600">
+Your browser does not support the HTML5 canvas element.
+</canvas>
+</body>
+</html>

File 1727_01/ch1_GL_Context.html

+<html>
+<head>
+	 <title> WebGL Beginner's Guide - Checking the WebGL Context </title>
+	 <style type="text/css">
+	 canvas {border: 2px dotted blue;}
+	 </style>
+	 
+	 <script>
+		var gl = null;
+		
+		function getGLContext(){
+			var canvas = document.getElementById("canvas-element-id");
+			if (canvas == null){
+				alert("there is no canvas on this page");
+				return;
+			}
+				
+			var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
+	
+            for (var i = 0; i < names.length; ++i) {
+                try {
+                    gl = canvas.getContext(names[i]);
+                } 
+                catch(e) {}
+                if (gl) break;
+            }
+
+			if (gl == null){
+				alert("WebGL is not available");
+			}
+			else{
+				alert("Hooray! You got a WebGL context");
+			}
+		}
+	 </script>
+</head>
+<body onLoad="getGLContext()">
+<canvas id="canvas-element-id" width="800" height="600">
+Your browser does not support the HTML5 canvas element.
+</canvas>
+</body>
+</html>

File 1727_01/css/cars.css

+#header
+{
+	height: 80px;
+	background-color: #fff;
+	margin-bottom: 10px;
+}
+
+#nav
+{
+	float: left;
+	width: 29%;
+	height: 80%;
+	background-color: #fff;
+	margin-bottom: 1px;
+}
+
+#content
+{
+	float: right;
+	margin-left: 1%;
+	width: 70%;
+	height: 80%;
+	background-color: #ccc;
+	margin-bottom: 1px;
+}
+
+

File 1727_01/css/colorpicker.css

+.colorpicker {
+	width: 356px;
+	height: 176px;
+	overflow: hidden;
+	position: absolute;
+	background: url(colorpickerImages/colorpicker_background.png);
+	font-family: Arial, Helvetica, sans-serif;
+	display: none;
+	z-index: 9999999; /*modification made by Diego*/
+}
+.colorpicker_color {
+	width: 150px;
+	height: 150px;
+	left: 14px;
+	top: 13px;
+	position: absolute;
+	background: #D1D1D1;
+	overflow: hidden;
+	cursor: crosshair;
+}
+.colorpicker_color div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 150px;
+	height: 150px;
+	background: url(colorpickerImages/colorpicker_overlay.png);
+}
+.colorpicker_color div div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 11px;
+	height: 11px;
+	overflow: hidden;
+	background: url(colorpickerImages/colorpicker_select.gif);
+	margin: -5px 0 0 -5px;
+}
+.colorpicker_hue {
+	position: absolute;
+	top: 13px;
+	left: 171px;
+	width: 35px;
+	height: 150px;
+	cursor: n-resize;
+}
+.colorpicker_hue div {
+	position: absolute;
+	width: 35px;
+	height: 9px;
+	overflow: hidden;
+	background: url(colorpickerImages/colorpicker_indic.gif) left top;
+	margin: -4px 0 0 0;
+	left: 0px;
+}
+.colorpicker_new_color {
+	position: absolute;
+	width: 60px;
+	height: 30px;
+	left: 213px;
+	top: 13px;
+	background: #f00;
+}
+.colorpicker_current_color {
+	position: absolute;
+	width: 60px;
+	height: 30px;
+	left: 283px;
+	top: 13px;
+	background: #f00;
+}
+.colorpicker input {
+	background-color: transparent;
+	border: 1px solid transparent;
+	position: absolute;
+	font-size: 10px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #898989;
+	top: 4px;
+	right: 11px;
+	text-align: right;
+	margin: 0;
+	padding: 0;
+	height: 11px;
+}
+.colorpicker_hex {
+	position: absolute;
+	width: 72px;
+	height: 22px;
+	background: url(colorpickerImages/colorpicker_hex.png) top;
+	left: 212px;
+	top: 142px;
+}
+.colorpicker_hex input {
+	right: 6px;
+}
+.colorpicker_field {
+	height: 22px;
+	width: 62px;
+	background-position: top;
+	position: absolute;
+}
+.colorpicker_field span {
+	position: absolute;
+	width: 12px;
+	height: 22px;
+	overflow: hidden;
+	top: 0;
+	right: 0;
+	cursor: n-resize;
+}
+.colorpicker_rgb_r {
+	background-image: url(colorpickerImages/colorpicker_rgb_r.png);
+	top: 52px;
+	left: 212px;
+}
+.colorpicker_rgb_g {
+	background-image: url(colorpickerImages/colorpicker_rgb_g.png);
+	top: 82px;
+	left: 212px;
+}
+.colorpicker_rgb_b {
+	background-image: url(colorpickerImages/colorpicker_rgb_b.png);
+	top: 112px;
+	left: 212px;
+}
+.colorpicker_hsb_h {
+	background-image: url(colorpickerImages/colorpicker_hsb_h.png);
+	top: 52px;
+	left: 282px;
+}
+.colorpicker_hsb_s {
+	background-image: url(colorpickerImages/colorpicker_hsb_s.png);
+	top: 82px;
+	left: 282px;
+}
+.colorpicker_hsb_b {
+	background-image: url(colorpickerImages/colorpicker_hsb_b.png);
+	top: 112px;
+	left: 282px;
+}
+.colorpicker_submit {
+	position: absolute;
+	width: 22px;
+	height: 22px;
+	background: url(colorpickerImages/colorpicker_submit.png) top;
+	left: 322px;
+	top: 142px;
+	overflow: hidden;
+}
+.colorpicker_focus {
+	background-position: center;
+}
+.colorpicker_hex.colorpicker_focus {
+	background-position: bottom;
+}
+.colorpicker_submit.colorpicker_focus {
+	background-position: bottom;
+}
+.colorpicker_slider {
+	background-position: bottom;
+}
+
+.colorSelector {
+    background: url(colorpickerImages/select2.png) scroll 0 0 transparent;
+    height: 36px;
+    left: 0px;
+    position: relative;
+    top: 0px;
+    width: 36px;
+}
+
+.colorSelector div {
+    background: url(colorpickerImages/select2.png) scroll center center transparent;
+    height: 28px;
+    left: 4px;
+    position: absolute;
+    top: 4px;
+    width: 28px;
+}
+
+

File 1727_01/css/colorpickerImages/blank.gif

Added
New image

File 1727_01/css/colorpickerImages/colorpicker_background.png

Added
New image

File 1727_01/css/colorpickerImages/colorpicker_hex.png

Added
New image

File 1727_01/css/colorpickerImages/colorpicker_hsb_b.png

Added
New image

File 1727_01/css/colorpickerImages/colorpicker_hsb_h.png

Added
New image

File 1727_01/css/colorpickerImages/colorpicker_hsb_s.png

Added
New image

File 1727_01/css/colorpickerImages/colorpicker_indic.gif

Added
New image

File 1727_01/css/colorpickerImages/colorpicker_overlay.png

Added
New image

File 1727_01/css/colorpickerImages/colorpicker_rgb_b.png

Added
New image

File 1727_01/css/colorpickerImages/colorpicker_rgb_g.png

Added
New image

File 1727_01/css/colorpickerImages/colorpicker_rgb_r.png

Added
New image

File 1727_01/css/colorpickerImages/colorpicker_select.gif

Added
New image

File 1727_01/css/colorpickerImages/colorpicker_submit.png

Added
New image

File 1727_01/css/colorpickerImages/custom_indic.gif

Added
New image

File 1727_01/css/colorpickerImages/select.png

Added
New image

File 1727_01/css/colorpickerImages/select2.png

Added
New image

File 1727_01/css/colorpickerImages/slider.png

Added
New image

File 1727_01/css/colorpickerImages/trashk/colorpicker_background.png

Added
New image

File 1727_01/css/colorpickerImages/trashk/colorpicker_hex.png

Added
New image

File 1727_01/css/colorpickerImages/trashk/colorpicker_hsb_b.png

Added
New image

File 1727_01/css/colorpickerImages/trashk/colorpicker_hsb_h.png

Added
New image

File 1727_01/css/colorpickerImages/trashk/colorpicker_hsb_s.png

Added
New image

File 1727_01/css/colorpickerImages/trashk/colorpicker_rgb_b.png

Added
New image

File 1727_01/css/colorpickerImages/trashk/colorpicker_rgb_g.png

Added
New image

File 1727_01/css/colorpickerImages/trashk/colorpicker_rgb_r.png

Added
New image

File 1727_01/css/colorpickerImages/trashk/colorpicker_submit.png

Added
New image

File 1727_01/css/prettify_default.css

+.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}

File 1727_01/css/prettify_desert.css

+/* desert scheme ported from vim to google prettify */
+pre { display: block; background-color: #333 }
+pre .nocode { background-color: none; color: #000 }
+pre .str { color: #ffa0a0 } /* string  - pink */
+pre .kwd { color: #f0e68c; font-weight: bold }
+pre .com { color: #87ceeb } /* comment - skyblue */
+pre .typ { color: #98fb98 } /* type    - lightgreen */
+pre .lit { color: #cd5c5c } /* literal - darkred */
+pre .pun { color: #fff }    /* punctuation */
+pre .pln { color: #fff }    /* plaintext */
+pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
+pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
+pre .atv { color: #ffa0a0 } /* attribute value - pink */
+pre .dec { color: #98fb98 } /* decimal         - lightgreen */
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
+/*li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }*/
+
+/*li.L1,li.L3,li.L5,li.L7,li.L9 { list-style-type: none }*/
+/* Alternate shading for lines */
+li.L1,li.L3,li.L5,li.L7,li.L9 { }
+
+
+@media print {
+  pre { background-color: none }
+  pre .str, code .str { color: #060 }
+  pre .kwd, code .kwd { color: #006; font-weight: bold }
+  pre .com, code .com { color: #600; font-style: italic }
+  pre .typ, code .typ { color: #404; font-weight: bold }
+  pre .lit, code .lit { color: #044 }
+  pre .pun, code .pun { color: #440 }
+  pre .pln, code .pln { color: #000 }
+  pre .tag, code .tag { color: #006; font-weight: bold }
+  pre .atn, code .atn { color: #404 }
+  pre .atv, code .atv { color: #060 }
+}
+

File 1727_01/css/prettify_sunburst.css

+/* Pretty printing styles. Used with prettify.js. */
+/* Vim sunburst theme by David Leibovic */
+
+pre .str, code .str { color: #65B042; } /* string  - green */
+pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
+pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
+pre .typ, code .typ { color: #89bdff; } /* type - light blue */
+pre .lit, code .lit { color: #3387CC; } /* literal - blue */
+pre .pun, code .pun { color: #fff; } /* punctuation - white */
+pre .pln, code .pln { color: #fff; } /* plaintext - white */
+pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
+pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
+pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
+pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
+
+pre.prettyprint, code.prettyprint {
+	background-color: #000;
+	-moz-border-radius: 8px;
+	-webkit-border-radius: 8px;
+	-o-border-radius: 8px;
+	-ms-border-radius: 8px;
+	-khtml-border-radius: 8px;
+	border-radius: 8px;
+}
+
+pre.prettyprint {
+	width: 95%;
+	margin: 1em auto;
+	padding: 1em;
+	white-space: pre-wrap;
+}
+
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
+li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
+/* Alternate shading for lines */
+li.L1,li.L3,li.L5,li.L7,li.L9 { }
+
+@media print {
+  pre .str, code .str { color: #060; }
+  pre .kwd, code .kwd { color: #006; font-weight: bold; }
+  pre .com, code .com { color: #600; font-style: italic; }
+  pre .typ, code .typ { color: #404; font-weight: bold; }
+  pre .lit, code .lit { color: #044; }
+  pre .pun, code .pun { color: #440; }
+  pre .pln, code .pln { color: #000; }
+  pre .tag, code .tag { color: #006; font-weight: bold; }
+  pre .atn, code .atn { color: #404; }
+  pre .atv, code .atv { color: #060; }
+}

File 1727_01/css/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png

Added
New image

File 1727_01/css/smoothness/images/ui-bg_flat_75_ffffff_40x100.png

Added
New image

File 1727_01/css/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png

Added
New image

File 1727_01/css/smoothness/images/ui-bg_glass_65_ffffff_1x400.png

Added
New image

File 1727_01/css/smoothness/images/ui-bg_glass_75_dadada_1x400.png

Added
New image

File 1727_01/css/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png

Added
New image

File 1727_01/css/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png

Added
New image

File 1727_01/css/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png

Added
New image

File 1727_01/css/smoothness/images/ui-icons_222222_256x240.png

Added
New image

File 1727_01/css/smoothness/images/ui-icons_2e83ff_256x240.png

Added
New image

File 1727_01/css/smoothness/images/ui-icons_454545_256x240.png

Added
New image

File 1727_01/css/smoothness/images/ui-icons_888888_256x240.png

Added
New image

File 1727_01/css/smoothness/images/ui-icons_cd0a0a_256x240.png

Added
New image

File 1727_01/css/smoothness/jquery-ui-1.8.13.custom.css

+/*
+ * jQuery UI CSS Framework 1.8.13
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming/API
+ */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden { display: none; }
+.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
+.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
+.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+.ui-helper-clearfix { display: inline-block; }
+/* required comment for clearfix to work in Opera \*/
+* html .ui-helper-clearfix { height:1%; }
+.ui-helper-clearfix { display:block; }
+/* end clearfix */
+.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled { cursor: default !important; }
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+
+
+/*
+ * jQuery UI CSS Framework 1.8.13
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming/API
+ *
+ * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana,Arial,sans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
+ */
+
+
+/* Component containers
+----------------------------------*/
+.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 11px; }
+.ui-widget .ui-widget { font-size: 1em; }
+.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
+.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
+.ui-widget-content a { color: #222222; }
+.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
+.ui-widget-header a { color: #222222; }
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #555555; }
+.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; }
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
+.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
+.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
+.ui-widget :active { outline: none; }
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1; background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; }
+.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
+.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x; color: #cd0a0a; }
+.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; }
+.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; }
+.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
+.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
+.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
+.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
+.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
+.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png); }
+.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
+.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
+.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png); }
+.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png); }
+
+/* positioning */
+.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-radio-off { background-position: -96px -144px; }
+.ui-icon-radio-on { background-position: -112px -144px; }
+.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-start { background-position: -80px -160px; }
+/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; }
+.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
+.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
+.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
+.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
+.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
+.ui-corner-right {  -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
+.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
+.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
+
+/* Overlays */
+.ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
+.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }/*
+ * jQuery UI Resizable 1.8.13
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Resizable#theming
+ */
+.ui-resizable { position: relative;}
+.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;
+	/* http://bugs.jqueryui.com/ticket/7233
+	 - Resizable: resizable handles fail to work in IE if transparent and content overlaps
+	*/
+	background-image:url(data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=);
+}
+.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
+.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
+.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
+.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
+.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
+.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
+.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
+.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
+.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/*
+ * jQuery UI Selectable 1.8.13
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Selectable#theming
+ */
+.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }
+/*
+ * jQuery UI Accordion 1.8.13
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Accordion#theming
+ */
+/* IE/Win - Fix animation bug - #4615 */
+.ui-accordion { width: 100%; }
+.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
+.ui-accordion .ui-accordion-li-fix { display: inline; }
+.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
+.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
+.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
+.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
+.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
+.ui-accordion .ui-accordion-content-active { display: block; }
+/*
+ * jQuery UI Autocomplete 1.8.13
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Autocomplete#theming
+ */
+.ui-autocomplete { position: absolute; cursor: default; }	
+
+/* workarounds */
+* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
+
+/*
+ * jQuery UI Menu 1.8.13
+ *
+ * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Menu#theming
+ */
+.ui-menu {
+	list-style:none;
+	padding: 2px;
+	margin: 0;
+	display:block;
+	float: left;
+}
+.ui-menu .ui-menu {
+	margin-top: -3px;
+}
+.ui-menu .ui-menu-item {