﻿function CarConfigurator(url) {
    var me = this;
    me.url = url;
    me.colors = ["red", "black", "darkgray", "white"];
    me.folii = ["5", "15", "20", "35", "50", "70"];
    me.create = function () {
        me.createColorButtons();
        me.createFoliiButtons();
        me.changeCarColor(me.colors[0], true);
        me.initAnimation();
    };
    me.preloadImageList = function(list){
	for(var i=0;i<list.length;i++){
          var img = new Image();
          img.src = me.url + "/"+list[i] + ".png";
	}
    }
    me.preloadImages = function(){
	me.preloadImageList(me.colors);
        me.preloadImageList(me.folii);	
    }

    me.createColorButtons = function() {
        me.createLink(function() { me.changeCarColor(me.colors[0]); }, $("#carcolor"));
        me.createLink(function() { me.changeCarColor(me.colors[1]); }, $("#carcolor"));
        me.createLink(function() { me.changeCarColor(me.colors[2]); }, $("#carcolor"));
        me.createLink(function() { me.changeCarColor(me.colors[3]); }, $("#carcolor"));
    };
    me.createFoliiButtons = function () {
        me.createLink(function () { me.changeFoliiFata(me.folii[0]); }, $("#foliifrontcolor"));
        me.createLink(function () { me.changeFoliiFata(me.folii[1]); }, $("#foliifrontcolor"));
        me.createLink(function () { me.changeFoliiFata(me.folii[2]); }, $("#foliifrontcolor"));
        me.createLink(function () { me.changeFoliiFata(me.folii[3]); }, $("#foliifrontcolor"));
        me.createLink(function () { me.changeFoliiFata(me.folii[4]); }, $("#foliifrontcolor"));
        me.createLink(function () { me.changeFoliiFata(me.folii[5]); }, $("#foliifrontcolor"));

        me.createLink(function () { me.changeFoliiSpate(me.folii[0]); }, $("#foliibackcolor"));
        me.createLink(function () { me.changeFoliiSpate(me.folii[1]); }, $("#foliibackcolor"));
        me.createLink(function () { me.changeFoliiSpate(me.folii[2]); }, $("#foliibackcolor"));
        me.createLink(function () { me.changeFoliiSpate(me.folii[3]); }, $("#foliibackcolor"));
        me.createLink(function () { me.changeFoliiSpate(me.folii[4]); }, $("#foliibackcolor"));
        me.createLink(function () { me.changeFoliiSpate(me.folii[5]); }, $("#foliibackcolor"));
    };
    
    me.createLink = function(callback, placeToAdd) {
        $("<a>").attr("href", "javascript:;")
            .html("&nbsp;")
            .click(callback)
            .appendTo(placeToAdd);
    };

    me.changeFoliiFata = function (color, isNotAUserAction) {
        if (isNotAUserAction != true) 
            me.isAnimationStopped = true;       
        $("#geamfata").css("background-image", me.formatImageUrl(color));
    };
    me.changeFoliiSpate = function (color, isNotAUserAction) {
        if (isNotAUserAction != true)
            me.isAnimationStopped = true;
        $("#geamspate").css("background-image", me.formatImageUrl(color));
    };

    me.changeCarColor = function (color, isNotAUserAction) {
        if (isNotAUserAction != true)
            me.isAnimationStopped = true;
        $("#carholder").css("background-image", me.formatImageUrl(color));
    };

    me.formatImageUrl = function(imageName) {
	return "url("+me.url + "/" + imageName + ".png)";
    };

    me.initAnimation = function () {
       setInterval(function() {
            me.animateFolii();
        }, 2000);
    };

    me.animateCarColor = function () {
        if (me.isAnimationStopped == true)
            return;
        me.carColorAnimationIndex++;
        if (me.carColorAnimationIndex >= me.colors.length)
            me.carColorAnimationIndex = 0;
        me.changeCarColor(me.colors[me.carColorAnimationIndex],true);
    };

    me.animateFolii = function () {
        if (me.isAnimationStopped == true)
            return;
        me.carColorFoliiIndex++;
        if (me.carColorFoliiIndex >= me.folii.length) {
            me.animateCarColor();
            me.carColorFoliiIndex = 0;
        }
        me.changeFoliiFata(me.folii[me.carColorFoliiIndex], true);
        me.changeFoliiSpate(me.folii[me.carColorFoliiIndex], true);
    };

    me.carColorAnimationIndex = 0;
    me.carColorFoliiIndex = 0;

    me.isAnimationStopped = false;
    
    me.create();    
    me.preloadImages();
}
