if (!window.ColorPicker)
	window.ColorPicker = {};

ColorPicker.Page = function() 
{
}

ColorPicker.Page.prototype =
{
	handleLoad: function(control, userContext, rootElement) 
	{
		this.control = control;
		this.rootElement = rootElement;
		this.onColorSelected;//fires when color selected
		
		this.picker = rootElement.findName("picker");
		this.rainbow = rootElement.findName("rainbow");
		this.rainbowSlider = rootElement.findName("rainbowSlider");
		this.colorSelected = rootElement.findName("colorSelected");
		this.color = rootElement.findName("color");
		this.colorBox = rootElement.findName("colorBox");
		this.colorAvailable = rootElement.findName("colorAvailable");
		this.colorAvailableStop = rootElement.findName("colorAvailableStop");
		
		this.red = rootElement.findName("red");
		this.green = rootElement.findName("green");
		this.blue = rootElement.findName("blue");
		this.redBox = rootElement.findName("redBox");
		this.greenBox = rootElement.findName("greenBox");
		this.blueBox = rootElement.findName("blueBox");
		
		this.alphaSlider = rootElement.findName("alphaSlider");
		this.alphaCover = rootElement.findName("alphaCover");
	
	    this.initEventListeners();
	    
	    this.setAvailableFromRainbow();
	},
	
	initEventListeners: function()
	{
	    if(this.initEventListenersDone) return;
	        this.initEventListenersDone = true;
	        
	    this.rootElement.addEventListener("MouseEnter", Silverlight.createDelegate(this,this.handlePageMouseEnter));
	    
	    this.rainbow.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this,this.handleRainbowMouseDown));
	    this.rainbow.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this,this.handleRainbowMouseUp));
	    this.rainbow.addEventListener("MouseMove", Silverlight.createDelegate(this,this.handleRainbowMouseMove));
	    
	    this.colorAvailable.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this,this.handleColorAvailableMouseDown));
	    this.colorAvailable.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this,this.handleColorAvailableMouseUp));
	    this.colorAvailable.addEventListener("MouseMove", Silverlight.createDelegate(this,this.handleColorAvailableMouseMove));
	    
	    this.alphaCover.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this,this.handleAlphaMouseUp));
	    this.alphaCover.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this,this.handleAlphaMouseDown));
	    this.alphaCover.addEventListener("MouseMove", Silverlight.createDelegate(this,this.handleAlphaMouseMove));
	    
	},
	
	handleAlphaMouseDown: function(sender, args)
	{
	    this.isAlphaMouseDown = true;
        sender.captureMouse();
        this.handleAlphaMouseMove(sender, args);
	},
	
	handleAlphaMouseMove: function(sender, args)
	{
	    if( this.isAlphaMouseDown )
	    {
	        var x = args.getPosition(this.alphaCover).x;
	        var sliderOffset = this.alphaSlider.width/2;
	        
	        x = Math.max(x,0);
	        x = Math.min(x,this.alphaCover.width);
	        
	        this.alphaSlider["Canvas.Left"] = x - sliderOffset;
	        
	        this.setSelectedColor();
	    }
	},
	
	handleAlphaMouseUp: function(sender, args)
	{
	    if( this.isAlphaMouseDown )
	    {
            sender.releaseMouseCapture();
            this.isAlphaMouseDown = false;
	    }
	},
	
	handlePageMouseEnter: function(sender, args)
	{
        if( this.isAlphaMouseDown )
            this.handleAlphaMouseUp(sender, args);
            
        if( this.isRainbowMouseDown )
            this.handleRainbowMouseUp(sender, args);
            
        if( this.isColorAvailableMouseDown )
            this.handleColorAvailableMouseUp(sender, args);
	},
	
	handleRainbowMouseDown: function(sender, args) 
	{
        this.isRainbowMouseDown = true;
        sender.captureMouse();
        this.handleRainbowMouseMove(sender, args);
	},
	
	handleRainbowMouseUp: function(sender, args) 
	{
        if( this.isRainbowMouseDown )
        {
            sender.releaseMouseCapture();
            this.isRainbowMouseDown = false;
        }
	},
	
	handleRainbowMouseMove: function(sender, args) 
	{
	    if( this.isRainbowMouseDown )
	    {
	        //move the slider
	        var sliderOffset = this.rainbowSlider.height/2;
	        var y = args.getPosition(this.rainbow).y - sliderOffset;
	        y = Math.max(y,this.rainbow["Canvas.Top"] - sliderOffset);
	        y = Math.min(y,this.rainbow["Canvas.Top"] - sliderOffset + this.rainbow.height);
	        
	        this.rainbowSlider["Canvas.Top"] = y;
	        
	        //update the available colors gradient
            this.setAvailableFromRainbow();
	        
	        //update the red green blue
	        //update the selected color
	    }
	},
	
	handleColorAvailableMouseDown: function(sender, args)
	{
        this.isColorAvailableMouseDown = true;
        sender.captureMouse();
        this.handleColorAvailableMouseMove(sender, args);
	},
	
	handleColorAvailableMouseUp: function(sender, args)
	{
        if( this.isColorAvailableMouseDown )
        {
            sender.releaseMouseCapture();
            this.isColorAvailableMouseDown = false;
        }
	},
	
	handleColorAvailableMouseMove: function(sender, args)
	{
        if( this.isColorAvailableMouseDown )
        {
	        var pickerOffset = this.picker.width/2;
	        var x = args.getPosition(sender).x;
	        var y = args.getPosition(sender).y;
	        
	        x = Math.min(x,this.colorAvailable.width);
	        x = Math.max(x,0);
	        y = Math.min(y,this.colorAvailable.height);
	        y = Math.max(y,0);
    	    
	        this.picker["Canvas.Left"] = x - pickerOffset;
	        this.picker["Canvas.Top"] = y - pickerOffset;
	        
	        this.setSelectedColor();
	    }
	},
	
	setSelectedColor: function()
	{
	
	    var pickerOffset = this.picker.width/2;
	    var x = this.picker["Canvas.Left"] + pickerOffset;
	    var y = this.picker["Canvas.Top"] + pickerOffset;
	
        var percentX = 1 - (x/255);
        var percentY = 1 - (y/255);
        
        var percent = this.getRainbowPercent();
        var section = this.getRainbowSection(percent);
        var sixth = 1/6;
        var percentOfSection = (percent - (section*sixth))/sixth;
        
        var red,green,blue;
        var valHigh = Math.floor( 255*percentY );
        var valLow = Math.floor( 255*percentX*percentY );
        
        var midH = valHigh;
        var midL = 255*percentOfSection*percentY;
        if( section % 2 == 1 ) midL = 255*(1-percentOfSection)*percentY;
        var valMid = Math.floor(((midH-midL)*percentX) + midL);
        valMid = Math.max(0,valMid);
        switch(section)
        {
            case 0: //red - yellow
                red = valHigh;
                green = valMid;
                blue = valLow;
                break;
            case 1: //yellow - green
                red = valMid;
                green = valHigh;
                blue = valLow;
                break;
            case 2: //green - aqua
                red = valLow;
                green = valHigh;
                blue = valMid;
                break;
            case 3: //aqua - blue
                red = valLow;
                green = valMid;
                blue = valHigh;
                break;
            case 4: //blue - purple
                red = valMid;
                green = valLow;
                blue = valHigh;
                break;
            case 5: //purple - red
                red = valHigh;
                green = valLow;
                blue = valMid;
                break;
        }
        this.red.text = red.toString();
        this.green.text = green.toString();
        this.blue.text = blue.toString();
        
        var alpha = this.alphaSlider["Canvas.Left"] + this.alphaSlider.width/2;
        alpha = Math.floor(alpha/this.alphaCover.width*255);
        
        this.color.text = this.colorSelected.fill = "#" + alpha.toColorPart() + red.toColorPart() + green.toColorPart() + blue.toColorPart();
        
        this.centerText(this.red,this.redBox);
        this.centerText(this.green,this.greenBox);
        this.centerText(this.blue,this.blueBox);
        this.centerText(this.color,this.colorBox);
        
        
//        this.color.foreground = "#" + alpha.toColorPart() + (255-red).toColorPart() + (255-green).toColorPart() + (255-blue).toColorPart();
//        this.rootElement.background = this.color.text;
        
        if( this.onColorSelected )
            this.onColorSelected(this);
	},
	
	getSelectedColor: function()
	{
	    return this.color.text;
	},
	
	setAvailableFromRainbow: function()
	{
	    var red,green,blue;
	    
	    var percent = this.getRainbowPercent();
	    var section = this.getRainbowSection(percent);
	    var sixth = 1/6;
	    var percentOfSection = (percent - (section*sixth))/sixth;
	    var val = Math.floor(percentOfSection*255);
	    if( section % 2 == 1 ) val = 255 - val;
	    
	    switch(section)
	    {
	        case 0: //red - yellow
                red = 255;
                green = val;
                blue = 0;
	            break;
	        case 1: //yellow - green
                red = val;
                green = 255;
                blue = 0;
	            break;
	        case 2: //green - aqua
                red = 0;
                green = 255;
                blue = val;
	            break;
	        case 3: //aqua - blue
                red = 0;
                green = val;
                blue = 255;
	            break;
	        case 4: //blue - purple
                red = val;
                green = 0;
                blue = 255;
	            break;
	        case 5: //purple - red
                red = 255;
                green = 0;
                blue = val;
	            break;
	    }
        
        this.colorAvailableStop.color = "#FF" + red.toColorPart() + green.toColorPart() + blue.toColorPart();
	    this.setSelectedColor();
	},
	
	getRainbowPercent: function()
	{
	    var height = this.rainbow.height;
	    var y = this.rainbowSlider["Canvas.Top"] + (this.rainbowSlider.height/2);
	    return y/height;
	},
	
	getRainbowSection: function(percent)
	{
        if( percent >= 0.000 && percent < 1/6 ) return 0;//red - yellow
        else if( percent >= 1/6 && percent < 2/6 ) return 1;//yellow - green
        else if( percent >= 2/6 && percent < 3/6 ) return 2;//green - aqua
        else if( percent >= 3/6 && percent < 4/6 ) return 3//aqua - blue
        else if( percent >= 4/6 && percent < 5/6 ) return 4;//blue - purple
        else if( percent >= 5/6 && percent <= 6/6 ) return 5;//purple - red
	},
	
	centerText: function(textBlock,container)
	{
	    textBlock["Canvas.Left"] = (container.width - textBlock.actualWidth)/2;
	    textBlock["Canvas.Top"] = (container.height - textBlock.actualHeight)/2;
	}
}

Number.prototype.toColorPart = function()
{
    var c = this.toString(16);
    if( this < 16 )
        c = "0" + c;
    return c.toUpperCase();
}