// JavaScript Document



(function() {
 
 // Declaration of variables
    var Event = YAHOO.util.Event,
        Dom   = YAHOO.util.Dom,
        lang  = YAHOO.lang,
        slider, 
        bg="slider-bg", thumb="slider-thumb", 
        textfield="slider-converted-value"

    // The slider can move 0 pixels up
    var topConstraint = 0;

    // The slider can move 200 pixels down
    var bottomConstraint = 200;

    // Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

    // The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

    var tickSize = 20;

    // The slider function
    Event.onDOMReady(function() {

        slider = YAHOO.widget.Slider.getHorizSlider(bg, 
                         thumb, topConstraint, bottomConstraint, 20);
		
        slider.subscribe("change", function(offsetFromStart) {
	

        // Put your switch here
		// "offsetFromStart" is position of slider
			// My code that fires on positions of the slider
		switch (offsetFromStart)
	{
		case 20:
		// Your code to fire your small() function
		small();
		break
		case 100:
		// Your code to fire your medium() function
		medium();
		break
		case 180:
		// Your code to fire your large() function
		large();
		break
		default:			
	}
		 
		 
        });

		
		
        // YUI code to start the slider
        slider.subscribe("slideStart", function() {
                YAHOO.log("slideStart fired", "warn");
            });
        // YUI code to stop the slider
        slider.subscribe("slideEnd", function() {
                YAHOO.log("slideEnd fired", "warn");
            });

  
    });
})();

// Variables for our JavaScript
var dragging = false;
var top;
var left;
var dragStartTop;
var dragStartLeft;


// Set up the application when the page loads
function init() {
    
    // Size the inner DIV    
    var innerDiv = document.getElementById("innerDiv");
    innerDiv.style.width = "1024px";
    innerDiv.style.height = "687px";

    // Prepare the outerDIV to listen to our cursor
    var outerDiv = document.getElementById("outerDiv");
    outerDiv.onmousedown = startMove;
    outerDiv.onmousemove = processMove;
    outerDiv.onmouseup = stopMove;

    // Hack up Internet Explorer
    outerDiv.ondragstart = function() { return false; }

   
}

// Responds when moving begins
function startMove(event) {
    
    // Hack up Internet Explorer
    if (!event) event = window.event;

    // Get the starting X,Y coordinates
    dragStartLeft = event.clientX;
    dragStartTop = event.clientY;
    // Target the innerDIV; fiddle with the cursor style
    var innerDiv = document.getElementById("innerDiv");
    innerDiv.style.cursor = "move";

    // Get the cursor position
    top = stripPx(innerDiv.style.top);
    left = stripPx(innerDiv.style.left);

    // Set a boolean to indicate things are happening
    dragging = true;
    return false;
}

// Things are moving
function processMove(event) {
    // Hack up Internet Explorer
    if (!event) event = window.event; 
    var innerDiv = document.getElementById("innerDiv");
    // If things are happening, reset the left and top positions
    if (dragging) {
        innerDiv.style.top = top + (event.clientY - dragStartTop);
        innerDiv.style.left = left + (event.clientX - dragStartLeft);
    }
}

// Stop dragging
function stopMove() {
    var innerDiv = document.getElementById("innerDiv");
    innerDiv.style.cursor = "";
    dragging = false;
}

// A helper function for turning strings like "250px" into numbers like "250"
function stripPx(value) {
    if (value == "") return 0;
    return parseFloat(value.substring(0, value.length - 2));
}

function small()
    {
        var i = document.getElementById("snowWhite");
        i.src = "80largeSnowWhite.jpg";
    }

function medium()
    {
        var i = document.getElementById("snowWhite");
        i.src = "90largeSnowWhite.jpg";
    }

function large()
    {
        var i = document.getElementById("snowWhite");
        i.src = "largeSnowWhite.jpg";
    }