addEvent(window, 'load',initRollovers);

var browser = navigator.appName;
var versionInfo = navigator.appVersion;
var versionNum = parseFloat(versionInfo);
var vendor = navigator.vendor;
var IE = "Microsoft Internet Explorer";
var IE6 = "MSIE 6.0";
var IE7 = "MSIE 7.0";
var safari = "Apple Computer, Inc.";
var classAttribute = classAttr();   //Get the appropriate class attribute to set. IE and Firefox use different attributes for class in the DOM.


/* image rollover funtion :
-------------------------------------------------------------------------*/

/* Function to initalize rollover */
function initRollovers(){	
	var rollovers = getElementsByClass('rollover',null,null);	//Get elements with a class of "rollover"
	
	if (rollovers.length > 0){		//If there is at least one element with a class "rollover"
		for(var i=0;i<rollovers.length;i++){	//Loop through all elements with class "rollover"
			var classValue = rollovers[i].getAttribute(classAttribute);
			
			if((versionInfo.match(IE6) != null) && (classValue.match('tpng') != null) ){ //If the browser is IE6 and a transparent png				
				addEvent(rollovers[i],'mouseover',rolloverPNG);	//Attach mouseover event
				addEvent(rollovers[i],'mouseout',rolloverPNG);	//Attach mouseout event	
			}
			else {
				addEvent(rollovers[i],'mouseover',rollover);	//Attach mouseover event
				addEvent(rollovers[i],'mouseout',rollover);	//Attach mouseout event
			}
		}		
	}
}

// This function grabs the src attribute and replaces "off" with "on" (for mouseover) or "on" with "off (for mouseout) in the attribute string. KM
function rollover(event) {
	var etype = event.type;
	var imgSrc = getObjectAttribute(this,"src");
	var newImgSrc;
	
	if (etype == 'mouseover'){
	    newImgSrc = imgSrc.replace('off.','on.','gi');
		this.setAttribute("src",newImgSrc);
	}
	
	else if (etype == 'mouseout') {
	    newImgSrc = imgSrc.replace('on.','off.','gi');
		this.setAttribute("src",newImgSrc);
	}
}

// IE 6 transparent PNG rollover function. KM
function rolloverPNG(event) {
	var etype = event.type;
	var imgSrc = getObjectAttribute(this,"name");
	var newImgSrc;
	
	if (etype == 'mouseover'){
	    newImgSrc = imgSrc.replace('off.','on.','gi');
		this.setAttribute('src',newImgSrc);
	}
	
	else if (etype == 'mouseout') {
	    newImgSrc = imgSrc.replace('on.','off.','gi');
		this.setAttribute('src',newImgSrc);
	}
}

// When function needs to be added inline (e.g. dynamically added content) KM
function rolloverInline(imgId,type) {
	var imgSrc = $("#" + imgId).attr("src");//jquery
	var newImgSrc;	

	if (type == 'over'){
	    newImgSrc = imgSrc.replace('off.','on.','gi');

	}
	else if (type == 'out') {
	    newImgSrc = imgSrc.replace('on.','off.','gi');
	}	
	$("#" + imgId).attr("src",newImgSrc);//jquery
}
/* image rollover function ^
-------------------------------------------------------------------------*/

/* pop up function :
-------------------------------------------------------------------------*/
function popWindow(href,title,sb,width,height) {
	window.open(href,title,'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars='+ sb +',resizable=0,width='+ width +',height='+ height +',top=150,left=150');
}
/* pop up function ^
-------------------------------------------------------------------------*/

/* timeline functions :
-------------------------------------------------------------------------*/
var tPrev;//Previous position
var tNext;//Next position
var tLast;//Last position
var nCurr;//Current navigation item
var itemsPP = 4;//Number of items per page

var ddIndex;//Timeline navigation index

function initTimeline(){
    var tItems = getElementsByClass('item',_gel("timeline-details"),null);
    ddIndex = tStart - 1;
    tPrev = tStart;
    tNext = tPrev + 1;
    tLast = tItems.length;
    
    if(tPrev = 1){
        _gel("timeline-left").style.visibility = "hidden";
    }    
    
    sizeTimeline();
    //console.log("Page Load. tPrev = " + tPrev + "; tNext = " + tNext + "; tLast = " + tLast);
}

function navigateTimeline(val){
    var dir;
    var num = val;
    
    ddIndex = val;
    
    if(val == 0){
        //Don't do anything if the first option is selcted
        return;
    }
    else if((val <= 4) && (val > tPrev)){
        dir = "next";
        num = 1;        
        tNext = parseInt(num) + 1;
        tPrev = tNext - 2; 
    }
    else if ((val <= 4) && (val < tPrev)){
        dir = "prev";
        num = val; 
        tPrev = parseInt(num) - 1;
        tNext = tPrev + 2; 
    }
    else if (val > tPrev){
        dir = "next";
        num = val - 3;      
        tNext = parseInt(num) + 1;
        tPrev = tNext - 2;       
    }
    
    sp.showPanel('item' + num); 
    manageTimeline(dir);
}

function moveTimeline(dir){
    if(dir == "prev"){   
        sp.showPanel('item' + tPrev);
        tPrev = tPrev - 1;
        tNext = tPrev + 2;     
        ddIndex--;
    }
    else {
        sp.showPanel('item' + tNext);
        tNext = tNext + 1;
        tPrev = tNext - 2; 
        ddIndex++;
    } 
    manageTimeline(dir);
    updateDropdown(); 
}

function manageTimeline(dir){
    
    if(tPrev < 1){
        _gel("timeline-left").style.visibility = "hidden";
        _gel("timeline-right").style.visibility = "visible";
        tPrev = 1;
        tNext = tPrev + 1;
    }
    else if(tNext > (tLast - 3)){
        _gel("timeline-left").style.visibility = "visible";
        _gel("timeline-right").style.visibility = "hidden";
    }
    else {
        _gel("timeline-left").style.visibility = "visible";
        _gel("timeline-right").style.visibility = "visible"; 
    }
      
    //console.log("tPrev = " + tPrev + "; tNext = " + tNext); 
    //console.log("Dropdown Index = " + ddIndex);
}

function updateDropdown(){
    var ddObj = _gel("timeline-navigation");
    var optItems = ddObj.getElementsByTagName("option");
    
    optItems[0].selected = "selected";
//    $(ddObj).addClass("selected");
//    for(var i=0;i<optItems.length;i++){
//        if(ddIndex == i){
//            optItems[i].selected = "selected";
//            $(optItems[i]).addClass("selected");
//        }
//        else {
//            optItems[i].selected = "";
//            $(optItems[i]).removeClass("selected");
//        }
//    
//    }
}

//Sets the actual width of the timeline to allow for the addition or removal of years
function sizeTimeline(){
    var tObj = _gel("timeline-details");//timeline-details object
    var tItems = getElementsByClass('item',tObj,null);
    var tWidth = $(tItems[0]).width() * tItems.length;
    
    $(tObj).css("width", tWidth);
}
/* timeline functions ^
-------------------------------------------------------------------------*/

/* product detail functions :
-------------------------------------------------------------------------*/
var optionsContainer = "#frame-options";
var frameContainer = "#style-options";
var imageContainer = "#deed-image";
var priceContainer = "#product-price";
var landPrice;

function initFraming(){
    if($(optionsContainer + " > div.tab > input.radio").length > 0){
        $(optionsContainer + " > div.tab > input.radio").click(function(){         
            clearSelections();
            selectFrameStyle($(this));
        });
    }
    //Set the original price
    landPrice = $(priceContainer).text().split("$")[1];
    
    //Add modal to initial deed image
    $("#deed-image > .tpng").click(function(){
        var href = $(this).attr("src");
	    //Open thick box modal
	    tb_show('', href + '?modal=true', '');
	    $("#TB_window").css("background-color", "#fff");
    });
}

function selectFrameStyle(obj){
    //Clear frame and mattte inputs
    $(frameContainer).empty();
    //Clear selected tab
    $(optionsContainer + " > .tab").removeClass("selected");
    
    var val = obj.attr("value");
    
        
    var frameTable = document.createElement("table");
    $(frameTable).attr("id", "frame-table");
    
    for(var i=0;i<fstyles.length;i++){
        var frameOpt = fstyles[i].split("::")[0];
        var frameStyle = fstyles[i].split("::")[1];
        var frameImg = fstyles[i].split("::")[2];
        var frameName = fstyles[i].split("::")[3];
        var framePrice = fstyles[i].split("::")[4];
        var frameDescription = fstyles[i].split("::")[5];
        
        var frameRow = document.createElement("tr");
        $(frameRow).attr("id","frame-" +  frameStyle);
        $(frameRow).attr("valign", "top");
        $(frameRow).addClass("frame-row");
        
        var frameEl = document.createElement("td");
        $(frameEl).addClass("frame-item");
        
        if(frameOpt.indexOf(val) > -1){ 
            //Select current tab
            $(obj).parent().addClass("selected"); 
            
            if(val == 2){//If large frame is chosen
                $(frameTable).addClass("matte-table");
            }
                      
            var inputObj = buildRadio("frameStyle",frameStyle);
            $(inputObj).click(function(){ 
                clearSelections();
                var radioValue = $(this).attr("value");
                buildFrameDescription(radioValue);
                updatePrice(radioValue);
                
                if(val == 1){//If the smaller frame is chosen
                    buildFrameExample(radioValue);
                }
                else if(val == 2){//If large frame is chosen
                    enableRadios(this);
                    $(frameTable).addClass("matte-table");
                    $(".frame-row").removeClass("highlight");
                    $(this).parent().parent().addClass("highlight");
                }
            });
            var displayPrice = (parseFloat(framePrice) - parseFloat(landPrice)).toFixed(2)
            var inputLabel = buildRadioLabel(frameStyle);
            $(inputLabel).append(frameName + "<br />" + displayPrice);
            
            var imgObj = buildImg(frameImg);
            $(imgObj).attr("width","30");
            $(imgObj).attr("height","30");
            $(imgObj).addClass("frame-image");
            
            var labelHolder = document.createElement("span");
            $(labelHolder).addClass("label-holder");
            
            $(frameEl).append(inputObj);
            $(labelHolder).append(imgObj);
            $(labelHolder).append(inputLabel);
            $(frameEl).append(labelHolder);
            $(frameRow).append(frameEl);
            $(frameTable).append(frameRow);
        }
        else {
            //Select current tab
            $(obj).parent().addClass("selected"); 
        }
    }
    
    $(frameContainer).append(frameTable);
    
    if(val == 2){//If large frame is chosen
        displayMatteStyle();
    }
    else if(val == 0){
        $(priceContainer).empty();
        $(priceContainer).append("$" + landPrice);
    }
    
}

function displayMatteStyle(){    
    for(var i=0;i<mstyles.length;i++){
        var matteContainer = document.createElement("td");
        $(matteContainer).addClass("matte-item item" + i);
        
        var frameStyle = mstyles[i].split("::")[0];
        var matteStyle = mstyles[i].split("::")[1];
        var matteImg = mstyles[i].split("::")[2];
        var matteName = mstyles[i].split("::")[3];
           
        var inputObj = buildRadio("matteStyle",matteStyle);
        $(inputObj).click(function(){ 
            buildFrameExample($(this).attr("value"));
        });
        $(inputObj).attr("disabled","disabled");
        
        var imgObj = buildImg(matteImg);
        $(imgObj).attr("width","30");
        $(imgObj).attr("height","30");
        $(imgObj).addClass("matte-image");
        
        var inputLabel = buildRadioLabel(matteStyle);
        $(inputLabel).append(matteName);
        
        var labelHolder = document.createElement("span");
        $(labelHolder).addClass("label-holder");
            
        $(matteContainer).append(inputObj);
        $(labelHolder).append(imgObj);
        $(labelHolder).append(inputLabel);
        $(matteContainer).append(labelHolder);
        $("#frame-" + frameStyle).append(matteContainer); 
    }   
}

function enableRadios(obj){
    //Enable all matte options for the current frame option
    $(obj).parent().parent().find(".matte-item > input.radio").attr("disabled","");
}

function clearSelections(){
    //Remove previous frame images    
    $(imageContainer + " > img.frame-image").remove();    
    //Remove previous matte images    
    $(imageContainer + " > img.matte-image").remove();    
    //Uncheck and disable all matte options
    $(".matte-item > input.radio").attr("checked","").attr("disabled","disabled");    
    //Remove previous frame text   
    $("#frame-description").remove();
}

function buildRadio(name,value){
    var inputObj;
    try{
        inputObj = document.createElement('<input type="radio" name="' + name + '" value="' + value + '" class="radio" />');
    }catch(err){
        inputObj = document.createElement("input");
    }
    $(inputObj).attr("type","radio");
    $(inputObj).attr("name",name);
    $(inputObj).attr("value",value);
    $(inputObj).addClass("radio");

    return inputObj;
    
}

function buildRadioLabel(label){
    var inputLabel = document.createElement("label");
    $(inputLabel).addClass("radio");
    
    return inputLabel;
}

function buildImg(frameImg){
    var imgObj = document.createElement("img");
    $(imgObj).attr("src", imgPath + frameImg);
    
    return imgObj;
}

function buildFrameExample(val){
    //Remove previous frame images    
    $(imageContainer + " > img.frame-image").remove();
    
    var frameImg = getImageName(val);
    
    var imgObj = buildImg(frameImg);
    $(imgObj).attr("width","386");
    $(imgObj).attr("height","350");
    $(imgObj).addClass("frame-image");
    $(imgObj).click(function(){
        var href = $(this).attr("src");
	    //Open thick box modal
	    tb_show('', href + '?modal=true', '');
	    $("#TB_window").css("background-color", "#fff");
    });
    $(imageContainer).append(imgObj);
}

function buildFrameDescription(val){
    for(var i=0;i<fstyles.length;i++){
        var frameStyle = fstyles[i].split("::")[1];
        if(frameStyle.indexOf(val) > -1){
            var frameName = fstyles[i].split("::")[3];
            var frameDescription = fstyles[i].split("::")[5];
        }
    }
    var titleObj = document.createElement("h3");
    $(titleObj).append(frameName);
    
    var descriptionObj = document.createElement("p");
    $(descriptionObj).append(frameDescription);
    
    var copyObj = document.createElement("div");
    $(copyObj).attr("id","frame-description");
    
    $(copyObj).append(titleObj);
    $(copyObj).append(descriptionObj);
    $("#product-right").append(copyObj);
}

function updatePrice(val){
    //Clear the price element and add the new price
    $(priceContainer).empty();
    
    for(var i=0;i<fstyles.length;i++){        
        var frameStyle = fstyles[i].split("::")[1];
        if(frameStyle.indexOf(val) > -1){
            var framePrice = fstyles[i].split("::")[4];
        }
    }
    
    var newPrice = parseFloat(framePrice);
    $(priceContainer).append("$" + newPrice.toFixed(2));
}

function getImageName(val){
    var arr = largeImg;
    
    for(var i=0;i<arr.length;i++){
        if(arr[i].indexOf(val + "::") > -1){
            var frameImg = arr[i].split("::")[1];
        }
    }
    return frameImg;
}
/* product detail functions ^
-------------------------------------------------------------------------*/